Home › Forums › Chart Support › STATIC TO DYNAMIC CONVERSION › Reply To: STATIC TO DYNAMIC CONVERSION
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://canvasjs.com/assets/script/canvasjs.min.js"></script> </body> </html>
THANK YOU!!