Home forums Using CanvasJS How to update chart data every second

This topic contains 2 replies, has 2 voices, and was last updated by  Elvinas 1 year, 9 months ago.

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

    Elvinas
    Participant

    Hello everyone, I’m a beginner in JavaScript and I’m trying to edit this code that I found on CanvasJS forums:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title></title>
        <script src="jquery.js"></script>
        <script src="canvasjs.js"></script>
    
        <script type="text/javascript">
            $(document).ready(function () {
    
                $.getJSON("data.php", function (result) {
    
                    var chart = new CanvasJS.Chart("chartContainer", {
                        data: [
                            {
                                dataPoints: result
                            }
                        ]
                    });
    
                    chart.render();
                });
            });
        </script>
    </head>
    <body>
    
        <div id="chartContainer" style="width: 800px; height: 380px;"></div>
    
    </body>
    </html>
    

    It works correctly but I’d like to update my chart every second. I tried to write a function that updates chart every second using setInterval() but what I found impractical is that I have to recreate chart everytime, how’s it possible to only pass new data to existing chart in updateChart function without recreating chart every second, cause it looks inneficient to me.

    This is what I tried:

    $(document).ready(function() {
                
                var updateChart = function() {
                
                   $.getJSON("chart.php", function (result) {
    
                    var chart = new CanvasJS.Chart("chartContainer", {
                        data: [
                            {
                                dataPoints: result
                            }
                        ]
                    });
    
                    chart.render();
               });
               
               }
                
                setInterval(function(){updateChart()},1000);
    
                    
    });
    

    As you see chart is created every second, how should I update only dataPoints:result second time, because once chart is created there’s no point to recreate everything again.

    Thank you in advance for the help you can provide me.

    • This topic was modified 1 year, 9 months ago by  Elvinas. Reason: update
    • This topic was modified 1 year, 9 months ago by  Elvinas.
    #8295

    Anjali
    Participant

    elvinas,

    For every update you shouldn’t recreate the chart. Instead you should create chart only once and later updated only its values as shown below:

    var chart = new CanvasJS.Chart("chartContainer", {
    	data: [
    		{
    			dataPoints: null
    		}
    	]
    });

    and don’t render the chart here. Inside getJSON access the chart’s options and assign the result’s data to dataPoints and render the chart. Below is the code snippet:

    $.getJSON("data.php", function (result) {
    	
    	chart.options.data[0].dataPoints = result;
    	chart.render();	
    });

    and update the dataPoint’s data at a given interval.

    var updateChart = function() {
                
    	$.getJSON("chart.php", function (result) {
    	
    		chart.options.data[0].dataPoints = result;
    		chart.render();	
    	
    	});   
    }            
    setInterval(function(){updateChart()},1000);

    __
    Anjali

    #8300

    Elvinas
    Participant

    Thank you so much Anjali for your clear explanations and examples, it works perfectly 🙂
    The thing that I didn’t know was how to access dataPoints property outside of CanvasJs.Chart object.

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

You must be logged in to reply to this topic.