How to create real time charts in JavaScript Charts?
The real time chart or dynamic chart provides the users to update the data continuously that changes over seconds or minutes using variety of data manipulation tools in JavaScript Charts.
Step-1: Adding Script file
First, we should include ej2.min.js script file in the sample. It contains all dependencies 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 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() ); |
Demo : Stackblitz sample for real time chart
Conclusion
I hope you enjoyed how to create real time charts with Syncfusion Charts.
You can refer to our JavaScript Chart feature tour page to know 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, Direct-Trac, or feedback portal. We are always happy to assist you!
