Line Chart from External JSON - CanvasJS JavaScript Charts

Line Chart from External JSON - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="wtChart" style="height: 360px; width: 100%;"></div>

JavaScript

var wtData = null, wtChart = null;

$.getJSON("https://api.myjson.com/bins/tfv79", function(chartData) {
  wtData = chartData;

	wtChart = new CanvasJS.Chart("wtChart", {
    theme: "theme2",
    zoomEnabled: true,
    exportEnabled: true,
    animationEnabled: true,
    backgroundColor: "#E0E0E0",
    title: {
      text: "Mixer 18 Weight"
    },
    legend: {
      horizontalAlign: "center",
      verticalAlign: "bottom",
      fontSize: 12
    },
    toolTip: {
      contentFormatter: function (e) {
        return e.entries[0].dataSeries.name + ": " + e.entries[0].dataPoint.y + ", Time: " + CanvasJS.formatDate(e.entries[0].dataPoint.x, "hh:mm:ss TT");
      }
    },
    axisY: {
      title: "Weight (lbs)"
    },
    axisX: {
      intervalType: "second",
      title: "Time"
    },
    data: [
      {
        type: "line",
        name: "Pump Weight",
        showInLegend: true,
        legendText: "Pump Weight (lbs)",
        color: "#9259c1",
        xValueType: "dateTime",
        dataPoints: wtData
      }
    ]
  });

  wtChart.render();
});

//updateWtChart();

function updateWtChart() {
  $.getJSON("http://intranet.uniseal.com/includes/app_scada/mimic_iot.php?mixer=18", function (data) {
    $.each(data, function () {
      wtData.push({
        "x": Date.parse(data['timestamp']),
        "y": parseInt(data['weight'])
      });
    });
    
    wtChart.render();
    setTimeout(function () {
      updateWtChart()
    }, 5000);
  });
}