Home › Forums › Chart Support › How to update chart data every second

How to update chart data every second

Viewing 3 posts - 1 through 3 (of 3 total)
  • March 3, 2015 at 4:59 am #8281

    Elvinas

    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 9 years, 8 months ago by Elvinas. Reason: update
    • This topic was modified 9 years, 8 months ago by Elvinas.
    March 4, 2015 at 7:22 pm #8295

    Anjali

    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);

    Also, you can checkout this example which updates chart data every 1500 milliseconds.

    Dynamic Line Chart

    __
    Anjali
    Team CanvasJS

    March 5, 2015 at 1:39 am #8300

    Elvinas

    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.