You must be logged in to post your query.
Home › Forums › Chart Support › Dynamic chart with CanvasJs doesn't get update while reading from a file
Tagged: CanvasJs; JavaScript; JQuery
I’ve been trying to get a dynamic chart working with CanvasJs. I have a file that gets updated (by another program) and I would like to update my chart each time I have a new record.
I’ve seen this example (: https://canvasjs.com/docs/charts/how-to/creating-dynamic-charts/) (last chart) and I tried to do the same but I’m actually reading from a file.
Here is my code :
<!DOCTYPE HTML> <html> <head> <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script> <script type="text/javascript"> window.onload = function () { var dps = [{x: new Date(2017, 04, 20, 07, 20, 00 ), y: 30}]; //dataPoints. var chart = new CanvasJS.Chart("chartContainer",{ title:{ text: " Cooling Machine Status " }, axisX:{ valueFormatString: "DD-MM-YY HH:mm:ss" , labelAngle: -50 }, axisY:{ title: "Cooling Temperature (F)" }, data: [{ type: "line", showInLegend: true, name: "Temperature", dataPoints : dps }] }); chart.render(); var updateChart = function () { var rawFile = new XMLHttpRequest(); rawFile.open("GET","/analyticResults/coolingMachine.csv", true); rawFile.onreadystatechange = function () { if(rawFile.readyState === 4) { if(rawFile.status === 200 || rawFile.status == 0) { var dps = csvLines = points = []; csvLines = rawFile.responseText.split(/[\r?\n|\r|\n]+/); for (var i = 0; i < csvLines.length; i++) if (csvLines[i].length > 0) { points = csvLines[i].split(","); var dateTime = points[0].split(" ");//dateTime[0] = date, dateTime[1] = time var date = dateTime[0].split("-"); var time = dateTime[1].split(":"); dps.push({ x: new Date(date[2], date[1], date[0], time[0], time[1], time[2]), y: parseFloat(points[1]) }); } } } }; rawFile.send(null); if (dps.length > 10 ) { dps.shift(); } chart.render(); }; setInterval(function(){updateChart()}, 1000); } </script> <script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script> </head> <body> <div id="chartContainer" style="height: 300px; width: 70%;"> </div> </body> </html>
When I debug the javascript I can see that the values are getting pushed in dps but the chart is not updating…
Did I miss someting ?
Thank you for your time
@AsmaaM,
You seem to be facing issue because of the scope of variable – dps. The variable dps has been declared both globally and locally, please remove the local variable and the chart would work fine. Kindly take a look at the below code snippet –
<!DOCTYPE HTML> <html> <head> <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script> <script type="text/javascript"> window.onload = function () { var dps = [{x: new Date(2017, 04, 20, 07, 20, 00 ), y: 30}]; //dataPoints. var chart = new CanvasJS.Chart("chartContainer",{ title:{ text: " Cooling Machine Status " }, axisX:{ valueFormatString: "DD-MM-YY HH:mm:ss" , labelAngle: -50 }, axisY:{ title: "Cooling Temperature (F)" }, data: [{ type: "line", showInLegend: true, name: "Temperature", dataPoints : dps }] }); chart.render(); var updateChart = function () { var rawFile = new XMLHttpRequest(); rawFile.open("GET","/analyticResults/coolingMachine.csv", true); rawFile.onreadystatechange = function () { if(rawFile.readyState === 4) { if(rawFile.status === 200 || rawFile.status == 0) { var csvLines = points = []; csvLines = rawFile.responseText.split(/[\r?\n|\r|\n]+/); for (var i = 0; i < csvLines.length; i++) if (csvLines[i].length > 0) { points = csvLines[i].split(","); var dateTime = points[0].split(" ");//dateTime[0] = date, dateTime[1] = time var date = dateTime[0].split("-"); var time = dateTime[1].split(":"); dps.push({ x: new Date(date[2], date[1], date[0], time[0], time[1], time[2]), y: parseFloat(points[1]) }); } } } }; rawFile.send(null); if (dps.length > 10 ) { dps.shift(); } chart.render(); }; setInterval(function(){updateChart()}, 1000); } </script> <script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script> </head> <body> <div id="chartContainer" style="height: 300px; width: 70%;"> </div> </body> </html>
___________ Indranil Deo Team CanvasJS
@Indranil Deo,
Thank you sir ! It works just like you said
You must be logged in to reply to this topic. Login/Register