Php MySqL Dynamic Data from External JSON File - CanvasJS JavaScript Charts

Php MySqL Dynamic Data from External JSON File - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<body>
  <div id="chartContainer" style="width:100%; height:300px;"></div>
</body>

JavaScript

$(document).ready(function() {
  var dataPoints = []
  var data = [];
  var dataPoints;
  var chart;
  $.getJSON("https://api.myjson.com/bins/y0w1", function(result) {
    //Formatting JSON data
    for (var i = 0; i < result.length; i++) {
      dataPoints = [];
      for (var dataPoint in result[i]) {
        dataPoints.push({
          label: dataPoint,
          y: result[i][dataPoint]
        });
      }
      data.push({
        dataPoints: dataPoints
      });
    }

    chart = new CanvasJS.Chart("chartContainer", {
      zoomEnabled: true,
      title: {
        text: "Update Chart Data from External JSON"
      },
      axisY: {
        includeZero: false
      },
      data: [{
        type: "line",
        dataPoints: dataPoints
      }]
    });
    chart.render();
  })

  var updateInterval = 5000; //Interval inwhich the  new json should be called
  var updateChart = function() {
    $.getJSON("https://api.myjson.com/bins/1061t", function(result) {
      //Formatting JSON data    
      for (var i = 0; i < result.length; i++) {
        for (var dataPoint in result[i]) {
          dataPoints.push({
            label: dataPoint,
            y: result[i][dataPoint]
          });
        }
        data.push({
          dataPoints: dataPoints
        });
      }
      chart.render();
    });
  };
  setInterval(function() {updateChart()}, updateInterval);
})