Chartjs-Html5 web page with chartjs: loading an external json file and create a line chart

by

0👍

Here’s the fiddle which loads data from ajax and creates a line chart -> http://jsfiddle.net/oxgm493z/9/

Hope it helps! 

$(document).ready(function() {
  var labels = [];
  var dataXXX = [];
  var dataYYY = [];

  $.ajax({
    type: 'GET',
    url: 'https://api.myjson.com/bins/1igag',
    dataType: 'json',
    success: function(field) {
      for (var i = 0; i < field.length; i++) {
        labels.push(field[i].time);
        dataXXX.push(field[i].xxx);
        dataYYY.push(field[i].yyy);
      }

      var ctx = document.getElementById("myChart").getContext('2d');
      var myChart = new Chart(ctx, {
        type: 'line',        
        data: {
          labels: labels,
          datasets: [{
              label: 'xxx',
              data: dataXXX,
              fill: false,
              backgroundColor: 'red',
              borderColor: 'red',
            },
            {
              label: 'yyy',
              data: dataYYY,
              fill: false,
              backgroundColor: 'green',
              borderColor: 'green',
            },
          ]
        },
        options: {
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero: true
              }
            }]
          }
        }
      });
    }
  });
})

Leave a comment