Real-time charts are those charts which automatically update themselves every n seconds by getting new data from server, but not involving any page refreshes. The chart initializes itself, loads new data every n seconds and silently updates itself to reflect the current state of data.

Potential uses of these charts are in:

  • Network monitoring applications
  • Stock/finance monitoring applications
  • Manufacturing process indicators
  • any other place where a continuous check of application/mechanism state is to be maintained

The real-time charts in FusionWidgets v3 can be divided into two categories:

  • Data streaming charts
  • Real-time gauges
Data streaming charts

Data streaming charts can update themselves in real time and show historical data for the pre-defined period, along with the latest data. For example, in a stock monitoring application showing a real-time line chart, you can see the price of a stock for say last 20 minutes, along with the latest price. Whenever a price update occurs (new price comes in), the first price data (one on the extreme left) is pushed out of the chart and the new price takes the right most position.

FusionWidgets v3 currently offers the following 6 data-streaming charts:

  • Real-time Area
  • Real-time Column
  • Real-time Line
  • Real-time Stacked Area
  • Real-time Stacked Column
  • Real-time Line (Dual Y)

These charts are used in showing data that needs to be monitored over a period of time and whose historical comparison is equally relevant. For example, monitoring stock prices, CPU temperature, number of threads/processes, network usage etc.

 
Real-time gauges

Real-time gauges show only a single (or multiple pointers with single value) in real-time. These are useful when you're just concerned with the current value of the monitored device, without any consideration for any historical values. For example, when you're monitoring temperature of a particular device and are only interested in the single value (i.e., the current temperature), the gauges are an ideal way to show that.

FusionWidgets v3 offers the following real-time gauges:

  • Real-time Angular
  • Real-time Bulb
  • Real-time Cylinder
  • Real-time Horizontal LED
  • Real-time Horizontal Linear
  • Real-time Thermometer
  • Real-time Vertical LED
 
Process flow

To setup a chart with real-time update capabilities, the following steps need to be taken:

  1. Initialize the chart with XML data. The chart necessarily needs XML data to initialize, as this XML contains the URL of the real-time data provider page (dataStreamURL) and the time interval for regular polling (to get new data).

  2. If you're using data-streaming charts and wish to show historical data on chart, you can push that data in this XML document. This enables the chart to initialize and show the data present in XML, and then initiate the method for regular polling of new data.

  3. Setup your script at dataStreamURL to provide the real-time data in the required format. The format has been explained in next section. This data is called incremental data - as each time the chart accesses this URL only, the new data (on incremental basis) is provided to it.

    You can use any scripting language like ASP, .NET, ColdFusion, PHP etc. to provide this incremental data, as the end data needs to be pure text and it doesn't matter to FusionWidgets where this data is coming from.

    However, you need to make sure that the page which provides the incremental update data to FusionWidgets must be hosted on the same sub-domain in which the chart .swf is hosted - otherwise, FusionWidgets, owing to Flash Sandbox security model, won't be able to receive updated data. Due to Flash sandbox security restrictions, you are allowed to retrieve data only from the same sub-domain in which the flash movie is residing. Data can only be loaded from a domain that is an exact match to the location of the SWF, including subdomains. For this reason a SWF residing at server1.mydomain.com will not be able to access data from a SWF at mydomain.com.

    If you wish to load data from a different domain, you can set up a proxy page at the same sub domain which would actually request data from the distant domain and then relay it to FusionWidgets. You must be able to upload and run a server-side script on a server in the same domain as the Flash movie. In this method, the Flash movie accesses the script, which loads the information, retrieves it, and returns the information back to the Flash movie. This method is best if the server hosting the data is not under your control (for example, a public source or a web service).

  4. The chart now constantly polls the given URL, reads the new data and updates itself.
 
Features offered by real-time charts

The following features are exposed by real-time charts in FusionWidgets w.r.t real-time capabilities only:

  • In data-streaming charts, you can send multiple data updates in each update i.e., a single poll to the server can come back with any number of data values update.
  • In gauges, if you've multiple pointers with defined IDs, you can update the value either using the pointer/dial index or its value.
  • Real-time data can also be fed using client JavaScript.
  • The real-time data accessed by the chart can be retrieved using client side JavaScript.
  • You can stop the real-time update of any chart either by sending a command from server, or by using client side JavaScript.
  • Context menu to help user to start and stop updates as and when he needs it. Additionally, you can opt to show/hide these menu items in the context menu.
  • In data-streaming charts, you've the option to set different refresh, update and clear interval.
  • In data-streaming charts, you can clear the historical data shown on chart by sending a command from server or using client side JavaScript.
  • Message Logger supported in all real-time charts.
  • Alert Manager supported in all real-time charts.