Real time charts are more important than ever in today's big data world. Users want to see the absolute latest numbers. To help you accommodate these users, ZingChart offers multiple solutions for building real-time data charts.
Transporting real-time data
Transporting data from your server to the client is usually done using a simple HTTP. You can do this by:
Writing a server-side program
Setting a file on your server to connect with your chart values.
Then, you configure the refresh object in ZingChart to fetch this data as often as you like.
Are you building scalable, event-driven, real-time data charts in your web applications? You may want to consider transporting your data via Websockets.
The persistent connection they create provides the two-way communication that is needed to ensure charts stay up to date. ZingChart has built-in Websocket support: just set an endpoint, and low latency updates are ready to go.
Which real-time data transport method should I choose?
If your data is already formatted and your charts will be simple, HTTP is the easiest option. Does your server have the ability to hook up to Websockets? Then you may find that to be faster than the basic HTTP.
Real-time data update intervals
Real-time data is updated in different intervals, from milliseconds, to minutes, and even to hours. You can customize the update interval to suit your data to not only improve performance, but free up network resources.
Feed intervals are set using the “interval” attribute of the “refresh” chart object. Values less than 50 will be measured in seconds, while values of 50 and above will be measured in milliseconds.
From a chart creation perspective
If the interval is set too fast, you might run into usability issues. If the interval is too slow, you may not have an accurate representation of your data. Control the number of ticks that will appear along the axis using the “max-ticks” attribute in the “refresh” object.
From a logistics perspective
If your end point only updates hourly but you request every minute or second, you are wasting resources. Graphical updates in a page are relatively taxing on the browser, so you’ll want to prevent unnecessary updates.
Real-time data and browser performance
There are two primary steps involved in updating a real-time data chart in ZingChart: parsing the data, and painting new chart elements. These steps occur at the end of every interval, as set via the “interval” attribute in the “refresh” object.
To see how this affects browser performance, let’s take a look at the performance profile for a real-time chart, as captured by Firefox’s performance tool.
The top section, the frame rate timeline, gives an overview of the browser’s responsiveness over time. The bottom section shows platform code execution, giving you an overview of code execution over time.
At each chart update, we see yellow and green bars, which refer to inputs/events, and graphics, respectively. With this tool, it’s quite easy to see how parsing and painting impacts the overall performance of the browser, so set your update interval carefully, especially if there are other elements in the page that require significant processing power (this demo uses a page that is completely devoid of content, except for the chart itself).
Now, let’s give you a glimpse of what is going on in each update. Using an unminified version of the ZingChart library for this demo, we can see exactly what is happening at each chart update action. Let’s go under the hood and take a look.
Think of parse as the author of a recipe, and paint as the chef that cooks the dish and makes it presentable.
For fun, we put a simple jQuery animation in the page (this one). Take a look at the performance report now:
FYI: We examined these results using the unminified version of ZingChart.
As made evident by the turbulent nature of this report, animations and graphics are resource intensive processes. Keep this in mind when implementing real-time charts with ZingChart!
Real-time data charts FTW
Using real-time data opens up a number of features to add to your chart. You can learn more about these options and try out all the ZingChart has to offer for real-time data in this feed chart demo.