ChartDirector 6.0 (ASP/COM/VB Edition)

Realtime Charts in ChartDirector


Realtime Chart Architecture For Windows Applications

For Windows applications, a realtime chart may be achieved by simply redrawing the chart periodically.

Typically, a data buffer is used to store the data to be displayed in the chart. A data update routine updates the values in the buffer in realtime. A charting routine uses the data in the buffer to create the chart.

If the data update rate is slower than once per second, then one can simply redraw the chart immediately when the data buffer is updated.

However, if the data update rate is very fast (eg. 100 times per second), a better design is to update the data buffer and the chart asynchronously. In this case, the data update routine can still update the data buffer as fast as it needs to. The charting routine updates the chart at a slower rate, such as a few times per second. Essentially, the charting routine is taking a "snapshot" of the data buffer a few times per second and display it on screen.

To facilitate creation of realtime charts with fast update rate (faster than once per second), the ChartViewer control contains built-in rate control features. It ensures there is at least 20ms (configurable using ChartViewer.UpdateInterval) between two consecutive chart updates. This allows the GUI to remain smooth and responsive even with extremely fast chart update rate.

To use the rate control features of ChartDirector, instead of updating the chart directly, ChartViewer.updateViewPort may be used to fire the ViewPortChanged event, and the chart is updated in the event handler. ChartViewer will ensure there is at least 20ms between two ViewPortChanged events, and will delay the event and merge multiple events into one event if necessary.

Realtime Chart Architecture For Web Applications

For web applications, a realtime chart may be achieved by using browser side Javascript to periodic refreshes the <IMG> tag that displays the chart.

Typically, an HTML web page is created with an <IMG> tag for displaying the chart. The URL of the <IMG> tag points to a charting page that generates the most updated chart as an image. A browser side Javascript in the HTML web page periodically refreshes the <IMG> tag. This causes the chart to update periodically without refreshing the entire web page.

The code for refreshing the <IMG> tag can easily be implemented using standard browser side Javascript without any third party library at all. The ChartDirector Javascript ChartViewer also has a special method JsChartViewer.streamUpdate to support realtime charts, providing enhanced features such as double buffering, handling of overlapping updates, error handling and cache avoidance.