Real-Time Chart

31 Jul 20172 minutes to read

Chart can be updated dynamically with the real time data. Whenever you add a point or remove a point from the dataSource, you can call the redraw method to request the chart to redraw its content.

NOTE

You can get the chart instance using instance method.

JAVASCRIPT

//Rendering empty Chart without data

     /// <reference path="tsfiles/jquery.d.ts" />
     /// <reference path="tsfiles/ej.web.all.d.ts" />

module ChartComponent {
    $(function () 
      var chartsample = new ej.datavisualization.Chart($("#chartcontainer"), {
            
             series: [ 
                     {  points: [ ] }
              ], 
             // ...
       });
});
}

    //Using set interval to update chart dynamically
    window.setInterval(updateChart, 200);

    //Function that updates chart dynamically
    function updateChart(){

        //Creating chart instance
        var chart =  $("#chartcontainer").ejChart("instance");      
        
        if (chart.model.series[0].points.length > 10)
               chart.model.series[0].points.splice(0, 1);
        
        var point = chart.model.series[0].points;
        var xValue = point.length > 0 ? point[point.length - 1].x + 1 : 1;
        point[point.length] = { x:  xValue, y: getRandomNum( 1000 ) }
                
        //Update Chart dynamically using redraw option
        //chart.redraw() can also be used here instead of redraw option
        $("#chartcontainer").ejChart("redraw");      
       }