Stacked Area 100% Chart from External JSON - CanvasJS JavaScript Charts

Stacked Area 100% 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="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var dps1 = [], dps2 = [], dps3 = [];
var chart = new CanvasJS.Chart("chartContainer",{
  title:{
    text: "TIME vs. Movement category"
  },
  axisX:{
    title: "TIME SLOT"
  },
  axisY:{
    title: "% of Movement Category"
  },
  data: [
    {
      type: "stackedArea100",
      name: "Standstill/Tilting",
      showInLegend: "true",
      yValueFormatString: "#,##0.##\"%\"",
      dataPoints: dps1
    },
    {
      type: "stackedArea100",
      name: "On Foot",
      showInLegend: "true",
      yValueFormatString: "#,##0.##\"%\"",
      dataPoints: dps2
    },
    {
      type: "stackedArea100",
      name: "On Vehicle",
      showInLegend: "true",
      yValueFormatString: "#,##0.##\"%\"",
      dataPoints: dps3
    }
  ]
});

getData(chart);
chart.render();

function getData(chart) {
  $.when($.getJSON("https://api.myjson.com/bins/tw3zs", function(data) {
    for(var i = 0; i < data.length; i++) {
      dps1.push({
        label: data[i].label,
        y: data[i].y1
      });
      dps2.push({
        label: data[i].label,
        y: data[i].y2
      });
      dps3.push({
        label: data[i].label,
        y: data[i].y3
      });
    }
  })).done(function(){
  	if(dps1.length > 10) {
    	dps1.shift();
      dps2.shift();
      dps3.shift();
    }
    chart.render();
  });
}

setInterval(function(){
  getData();
  chart.render();
}, 100000);