How to create real time charts in JavaScript Charts?
This article explains how to create real-time charts in JavaScript Charts. The real-time chart, or dynamic chart, allows users to continuously update data that changes over seconds or minutes using a variety of data manipulation tools in JavaScript Charts.
Step-1: Adding Script file
First, we should include the ej2.min.js script file in the sample. It contains all the dependencies required to render the chart.
<html> <head> // Adding ej2.min.js CDN link <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script> </head> </html>
Step-2: Creating Chart Container
Create a container for the chart to get render.
<html> <body> // Chart container <div id="container"></div> </body> </html>
Step-3: Creating the chart
Here are the steps to create the chart:
- Create new chart instance by using new ej.charts.Chart().
- Assign the data using dataSource property in series.
- Bind the x and y values of data source with xName and yName properties
- You can select chart types (like line, column, area etc..) using type property in series.
- Now append the chart instance to the container to render the chart.
Creating Live data
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.
// Creating live data
var count = 51;
intervalId = parseInt(
setInterval(function () {
if (document.getElementById("container") === null) {
clearInterval(intervalId);
} else {
if (count % 2 == 0) {
value = Math.sin(count) / (count % 10 == 0 || count % 4 == 0 ? 5 : 1);
} else {
value = Math.cos(count) / (count % 5 == 0 || count % 3 == 0 ? 2 : 1);
}
series1.push({ x: count, y: value });
count++;
series1.shift();
chart.series[0].dataSource = series1;
chart.refresh();
}
}, 100).toString()
);Screenshot:
Refer to the working sample for additional details and implementation: Stackblitz sample for real time chart
Conclusion
We hope you enjoyed how to create real time charts with Syncfusion Charts.
You can refer to our JavaScript Chart feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Chart example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!
