Dynamic Line Chart from JSON that updates every 5 seconds - CanvasJS JavaScript Charts

Dynamic Line Chart from JSON that updates every 5 seconds - 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="chartContainer" style="height: 360px; width: 100%;"></div>

CSS

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
    border-right:1px solid #bbb;
}

li:last-child {
    border-right: none;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #004299;
}

JavaScript

var dataPoints = [];
var chart;
$.getJSON('https://api.myjson.com/bins/14imny', function(data) {  
  $.each(data, function(key, value){
    dataPoints.push({x:(value)["x"], y:(value["y"])});
  });
  chart = new CanvasJS.Chart("chartContainer",{
    title:{
      text:"Live Chart with dataPoints from External JSON"
    },
    zoomEnabled: true,
    axisX:{
       scaleBreaks:{
        autoCalculate: true,
        maxNumberOfAutoBreaks: 5,
        collapsibleThreshold: "15%"
      },
    },
    zoomType: "xy",
    //backgroundColor: "#bdcfed",
    animationEnabled: true,
    animationDuration: 5000,
    exportEnabled: true,
    theme: "dark1",
    data: [{
      showInLegend: true,
      legendText: "Temperature",
      markerType: "circle",
      markerSize: "3",
      markerColor: "red",
      xValueType: "dateTime",
      xValueFormatString: "YYYY-MM-DD HH:mm:ss",
      toolTipContent: "x:{x}, y: {y}",
      type: "line",
      dataPoints : dataPoints,
    }]
  });
  chart.render();
  updateChart();
});

function updateChart() {
  $.getJSON('https://api.myjson.com/bins/14imny', function(data) {
  	dataPoints = [];
    $.each(data, function(key, value) {
      dataPoints.push({
        x:(value["x"]),
        y:(value["y"]),

      });
    });
    console.log(chart.options)
    chart.render();
  });
}

setTimeout(function(){updateChart()}, 5000);