Live Chart in JavaScript Chart control

17 Mar 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.ts

index.html

import { Chart, LineSeries, getElement } from '@syncfusion/ej2-charts';
Chart.Inject(LineSeries);
let series1: Object[] = [];
let value: number = 10;
let i: number;
let intervalId: number;

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

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

    let setTimeoutValue: number = 100;
    intervalId = setInterval(
        (): void => {
if (getElement('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/20.4.48/material.css" rel="stylesheet" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <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>
</body> 
</html>