CODEWITHSUNDEEP
chart.js
Ymc
Ymc

Reputation: 23

Chart js with json file from url

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>

Upvotes: 1

Views: 2270

Answers (1)

Quince
Quince

Reputation: 15000

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/

Upvotes: 2

Related Questions