Chart js with json file from url

Question

I am new here so please forgive my errors in asking. I am working on a personal project with json file from external url. But the graph does not shown up. Chrome compiler says that Chart.min.js:12 Uncaught TypeError: t.ticks.map is not a function Chart.min.js:12 Uncaught TypeError: Cannot read property 'initialize' of undefinedeventHandler @ Chart.min.js:12(anonymous function) @ Chart.min.js:12i.(anonymous function) @ Chart.min.js:12 Note: Arrays are getting the values (Sorry if I ask this wrong way I will try to improve my questions)

<html>
 <head>
 <script type="text/javascript" src="Chart.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    </head>
    <body>
        <canvas id="myChart" width="400" height="200"></canvas>
        <script>
            var name;
            var count;
            $(document).ready(function () {
                var jsonurl = "http://avare.pe.hu/veri2.json";

                $.getJSON(jsonurl, function (json) {


                    name = json[0]['names'];
                    count = json[0]['count'];
                    for (var i = 0; i < 5; i++)
                        console.log(name[i] + count[i]);


                });
            })



            var canvas = document.getElementById('myChart');
            var dataSet = {
                labels: name,
                datasets: [
                    {
                        label: "My First dataset",
                        backgroundColor: "rgba(255,99,132,0.2)",
                        borderColor: "rgba(255,99,132,1)",
                        borderWidth: 2,
                        hoverBackgroundColor: "rgba(255,99,132,0.4)",
                        hoverBorderColor: "rgba(255,99,132,1)",
                        data: count,
                    }
                ]
            };
            var option = {
                animation: {
                    duration: 5000
                }

            };


            var myBarChart = Chart.Bar(canvas, {
                data: dataSet,
                options: option
            });
        </script>
    </body>
</html>

you are creating your chart before you get the values, the creation of the chart should happen in the on success of the getJSON call other wise you are passing undefined data to your chart — Quince
– Quince, Commented Aug 23, 2016 at 12:45

Quince · Accepted Answer · 2016-08-23 12:52:39Z

2

Issue comes from the async call to get the data. You start the chart initialization after this call but because it is async name and count will be undefined at the time you create the chart.

Quick fix is to place the chart creation inside the success callback of the getJSON

https://fiddle.jshell.net/leighking2/45x1f09v/

answered Aug 23, 2016 at 12:52

Quince

15k6 gold badges63 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ymc Over a year ago

Thanks.Worked like a charm.

CodingMatters Over a year ago

found this in May 2022. the fiddle is gone :(

Collectives™ on Stack Overflow

Chart js with json file from url

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related