Real-Time Chart

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