Home forums Using CanvasJS Dynamic chart with CanvasJs doesn't get update while reading from a file

This topic contains 2 replies, has 2 voices, and was last updated by  AsmaaM 2 months, 2 weeks ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #15745

    AsmaaM
    Member

    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://canvasjs.com/assets/script/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://canvasjs.com/assets/script/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

    #15749

    Indranil Deo
    Member

    @asmaam,

    The variable dps has been declared both globally and locally, please remove the local variable and the chart would work fine.

    ————-
    Indranil Deo
    Team CanvasJS

    #15752

    AsmaaM
    Member

    @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.