NOTE: This section describes Real-Time Charts for web applications only. For Windows applications, please refer to Realtime Charts (Windows).
For web applications, a realtime chart may be achieved by using browser side Javascript using one of the following methods:
- Periodically reloads the <IMG> tag that displays the chart, using JsChartViewer.streamUpdate. This method sends a "stream update request" to the server to update the chart image without refreshing the web page. The charting code in the server always draws the chart using the most up-to-date data. By using a timer to call JsChartViewer.streamUpdate periodically, we can get a real time chart.
On the server side, WebChartViewer.IsStreamRequest (for ASP.NET Web Forms) or RazorChartViewer.IsStreamRequest (for ASP.NET MVC) is used to determine if the current request is a normal page request or is a stream update request. In the latter case, only the updated chart needs to be streamed back with WebChartViewer.StreamChart or RazorChartViewer.StreamChart.
The examples Simple Real-Time Chart (Web) and Real-Time Chart with Snapshot (Web) demonstrate using the JsChartViewer.streamUpdate method.
- Periodically sends AJAX chart update requests to the server using JsChartViewer.partialUpdate. The charting code in the server always draws the chart using the most up-to-date data. By using a timer to call JsChartViewer.partialUpdate periodically, we can get a real time chart.
On the server side, when the script starts to run, the first thing it does is to use WebChartViewer.IsPartialUpdateRequest (for ASP.NET Web Forms) or RazorChartViewer.IsPartialUpdateRequest (for ASP.NET MVC) to detect if it is handling an AJAX chart update or an initial page request. If it is an AJAX chart update, it just draws the chart and sends back an AJAX response using WebChartViewer.PartialUpdateChart or RazorChartViewer.PartialUpdateChart. If it is an initial page request, it processes the request as usual.
The examples Real-Time Chart with Track Line (Web) and Real-Time MultiChart (Web) demonstrate using the JsChartViewer.partialUpdate method.