Home › Forums › Chart Support › STATIC TO DYNAMIC CONVERSION › Reply To: STATIC TO DYNAMIC CONVERSION

July 30, 2018 at 3:24 pm #22042

Hemel619619

if (dps.length > 10 )
{
dps.shift();
}

One more question, Where do I need to put these above code in the coding?? For your convenience I am posting this code for you. Also, Make the whole coding in one single HTML file please.

CODING

<!DOCTYPE HTML>
<html>
<head>
<script>

window.onload = function () {

var dps1 = [], dps2 = [], dps3 = [];
var chart = new CanvasJS.Chart("chartContainer",{
  title:{
    text: "TIME SLOT vs. MOVEMENT CATEGORY"
  },
  axisX:{
    title: "TIME SLOT"
  },
  axisY:{
    title: "Percentage of movement category"
  },
  data: [
    {
      type: "stackedArea100",
      name: "STANDSTILL",
      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.render();

function getData(chart) {
  
  $.when($.getJSON("https://api.myjson.com/bins/a98dm", 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(){
    chart.render();
  });
}

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


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

THANK YOU!!