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

Dynamic chart with CanvasJs doesn't get update while reading from a file

Viewing 3 posts - 1 through 3 (of 3 total)
  • August 4, 2017 at 2:31 am #15745

    AsmaaM

    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

    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

    August 4, 2017 at 1:09 pm #15752

    AsmaaM

    @Indranil Deo,

    Thank you sir ! It works just like you said

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.