Live Chart in JavaScript (ES5) Chart control

06 Jun 2023 / 2 minutes to read

You can update a chart with live data by using the set interval.

To update live data in a chart, follow the given steps:

Step 1:

Initialize the chart with series.

import { Chart } from '@syncfusion/ej2-charts';

// initialize Chart component
let chart: Chart = new Chart(
    //Initializing Chart Series
    series:[
               type: 'Line',
    ]
);
// render initialized Chart
chart.appendTo('#container');

Step 2:

Update the data to series, and refresh the chart at specified interval by using the set interval.

To refresh the chart, invoke the refresh method.

Source

Preview

index.js

index.html

var series1 = [];
var value = 10;
var i;
var intervalId;

for (i = 0; i < 50; i++) { // Data update
    if (Math.random() > .5) {
        value += Math.random() * 2.0;
    }
    series1[i] = { x: i, y: value };
}

var chart = new ej.charts.Chart({
    series: [
            {
                type: 'Line',
                dataSource: series1,
                xName: 'x',
                yName: 'y', animation: { enable: false }
            },
        ],
    width:'650px',
    height: '350px'
    },'#element');

    var setTimeoutValue = 100;
    intervalId = setInterval(
        function() {
if (document.getElementById('container') === null) {
        clearInterval(intervalId);
    } else {
    if (Math.random() > .5) {
        value += Math.random() * 2.0;
    }
    series1.push({ x: i, y: value });
    i++;
    series1.shift(); // Used to remove the first element
    chart.series[0].dataSource = series1;
    chart.refresh();
    }
    }, setTimeoutValue);

<!DOCTYPE html><html lang="en"><head>
            
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="https://cdn.syncfusion.com/ej2/21.2.3/material.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div class="col-sm-8">
            <div class="row">
                <div class="col-sm-4">  
                  <div id="container">
                    <div id="element" style="width:350px; height:350px;float:left">
                    </div>
                    <label id="lbl"></label>
                  </div>
                </div>
                <div class="col-sm-4" style="width:200px; height:350px;float: right">
                  <div id="Grid">
                  </div>
                </div>
            </div>
    </div>
 
<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>