My Canvasjs Chart won't updateInterval?

228 views Asked by At

I have this code I have made out of a composition of my own code and the template code of Canvasjs which uses API of Canvasjs to make the chart.

Everything is good, I debugged it nicely and the chart shows with my database data as a source. My database data reads the data from a textfile which has data from a Arduino-based Pulse Sensor.

This is my code:

<!DOCTYPE HTML>
<html>
<head>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"> </script>
<script type="text/javascript">

                $().ready(function () {

                     var dataPoints = [];

                var chart = new CanvasJS.Chart("chartContainer",{
                title :{
                text: "Patient #01"
                },          
                data: [{
                type: "line",
                dataPoints: dataPoints 
                }]
                }); 

            function updateChart( result ) { // move it here!!!
            $.getJSON("arduino_data.php", function( result ){

            var dataLength = 40; // number of dataPoints visible at any point
            var updateInterval = 20;
            var chart = new CanvasJS.Chart("chartContainer",{ // new chart Object
                title :{
                    text: "Patient #01"
                },          
                data: [{
                    type: "line",
                    dataPoints: dataPoints 
                }]
            });
            for (var i = 0; i <= result.length - 1; i++) {
                dataPoints.push({ x: Number(result[i].x), y: Number(result[i].y) });
            }
            if (dataPoints.length > dataLength){
                dataPoints.shift();             
            }        
            chart.render();   
        }); 
    }


    // First read - Start
    updateChart(); 
    // Update chart after specified time. 
    setInterval(updateChart, updateInterval); 

});




</script>
<script type="text/javascript" src="canvasjs.min.js"></script>
</head>
<body>
    <div id="chartContainer" style="height: 300px; width:100%;">
    </div>
</body>
</html>

Why do dataLength = 40; and updateInterval=20 and the last line: updateChart();

do not work? Should there be something in updateChart() like updateChart(dataPoints) ??

Why is my chart not live, though I have the right code parts?

EDIT

This is the template code that works without database data. And this is a Live Chart. It updates every second or so.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"> </script>
<script type="text/javascript">
    window.onload = function () {

        var dps = []; // dataPoints

        var chart = new CanvasJS.Chart("chartContainer2",{
            title :{
                text: "Patient #01"
            },          
            data: [{
                type: "line",
                dataPoints: dps 
            }]
        });

        var xVal = 0;
        var yVal = 100; 
        var updateInterval = 20;
        var dataLength = 500; // number of dataPoints visible at any point

        var updateChart = function (count) {
            count = count || 1;
            // count is number of times loop runs to generate random dataPoints.

            for (var j = 0; j < count; j++) {   
                yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
                dps.push({
                    x: xVal,
                    y: yVal
                });
                xVal++;
            };

            if (dps.length > dataLength)
            {
                dps.shift();                
            }

            chart.render();     

        };

        // generates first set of dataPoints
        updateChart(dataLength); 

        // update chart after specified time. 
        setInterval(function(){updateChart()}, updateInterval); 

    }

</script>

<script type="text/javascript" src="canvasjs.min.js"></script>

As you can see, it is just like my code. However this uses math.randomize data instead of real data from database.

My Question: Why won't my chart keep updating (live) so it will show changes? My chart remains static. I have to refresh it manually to show new data transmission.

0

There are 0 answers