Question

123

Loading an external JSON into ChartJs

rated 0 times [ 128] [ 5] / answers: 1 / hits: 42428 / 9 Years ago, tue, october 6, 2015, 12:00:00

I am a newbie when it comes to using libraries for drawing charts in JavaScript/ I just started experimenting with Chartjs and I have been unable to how to use getJson or anything else to load my json object and replace the labels and data. I have used HighCharts before and its quite simple compared to this. Also, how would I go about putting this into a directive in Angular and displaying it.

https://jsfiddle.net/0u9Lpttx/1/

index.html

<!DOCTYPE html>

<html lang=en>

<head>

    <meta charset=UTF-8>

    <title></title>

</head>

<body>

<div style=width: 100%; height: 100%;>

    <canvas id=myChart style=width: 100%; height: auto;></canvas>

</div>

<div id=js-legend class=chart-legend></div>

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js></script>

<script src=http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js></script>

<script src=http://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js></script>

<script src=js/chartJsControl.js></script>

</body>

</html>

data.json

[

  {

    timestamp: Monday,

    original_tweet: 756,

    retweets: 345,

    shared: 34,

    quoted: 14

  },

  {

    timestamp: Tuesday,

    original_tweet: 756,

    retweets: 345,

    shared: 34,

    quoted: 14

  },

  {

    timestamp: Wednesday,

    original_tweet: 756,

    retweets: 345,

    shared: 34,

    quoted: 14

  }

]

chartJsControl.js

var test = [];

$.getJSON(data.json, function (json) {

    test.push(json[i].timestamp);



});

var data = {

    labels: test,

    datasets: [

        {

            label: My First dataset,

            fillColor: rgba(220,220,220,0.5),

            strokeColor: rgba(220,220,220,0.8),

            highlightFill: rgba(220,220,220,0.75),

            highlightStroke: rgba(220,220,220,1),

            data: [65, 59, 80, 81, 56, 55, 40]

        },

        {

            label: My Second dataset,

            fillColor: rgba(151,187,205,0.5),

            strokeColor: rgba(151,187,205,0.8),

            highlightFill: rgba(151,187,205,0.75),

            highlightStroke: rgba(151,187,205,1),

            data: [28, 48, 40, 19, 86, 27, 90]

        }

    ]

};





var ctx = document.getElementById(myChart).getContext(2d);

ctx.canvas.width = 1000;

ctx.canvas.height = 800;



var myChart = new Chart(ctx).Bar(data);

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

monica

Add To Favorites

Follow

Total Points: 308

Total Questions: 102

Total Answers: 109

Location: Saudi Arabia

Member since Sat, Aug 20, 2022

2 Years ago

answered 9 Years ago jaleelh · Accepted Answer

If you want to use the returned JSON from data.json you need to do this in the callback function like this:

$.getJSON(data.json, function (json) {

  // will generate array with ['Monday', 'Tuesday', 'Wednesday']

  var labels = json.map(function(item) {

    return item.timestamp;

  });



  var data = {

    labels: labels,

    datasets: [

    {

      label: My First dataset,

      fillColor: rgba(220,220,220,0.5),

      strokeColor: rgba(220,220,220,0.8),

      highlightFill: rgba(220,220,220,0.75),

      highlightStroke: rgba(220,220,220,1),

      data: [65, 59, 80, 81, 56, 55, 40]

    },

    {

      label: My Second dataset,

      fillColor: rgba(151,187,205,0.5),

      strokeColor: rgba(151,187,205,0.8),

      highlightFill: rgba(151,187,205,0.75),

      highlightStroke: rgba(151,187,205,1),

      data: [28, 48, 40, 19, 86, 27, 90]

    }

    ]

  };



  var ctx = document.getElementById(myChart).getContext(2d);

  ctx.canvas.width = 1000;

  ctx.canvas.height = 800;



  var myChart = new Chart(ctx).Bar(data);

});

If you are using it with Angular I would recommend using the angular chart.js version, see: http://jtblin.github.io/angular-chart.js/

Then you already have an angular directive, which you can use!