Home › Forums › Chart Support › Dynamic chart with CanvasJs doesn't get update while reading from a file › Reply To: Dynamic chart with CanvasJs doesn't get update while reading from a file

August 4, 2017 at 11:32 am #15749

Indranil

@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