Introduction to Real-time Charts

Real-time charts, also known as data streaming charts, are charts that automatically update themselves after every n seconds, without any page refreshes, by getting new data from the server.

FusionCharts Suite XT currently offers the following six real-time charts:

• Real-time Area

• Real-time Column

• Real-time Line

• Real-time Stacked Area

• Real-time Stacked Column

• Real-time Line (Dual Y)

Charts used in live stock monitoring are real-time charts. These charts first present the historical data for a given period of time. When new data is available, the charts update automatically and display the new data after discarding the previous value.

A real-time line chart used for stock price monitoring at Harry’s SuperMart looks like this:

The data structure needed to render the above chart is given below:

• JSON
• XML

{
    "chart": {
        "caption": "Real-time stock price monitor",
        "subCaption": "Harry's SuperMart",
        "xAxisName": "Time",
        "yAxisName": "Stock Price",
        "numberPrefix": "$",
        "refreshinterval": "5",
        "yaxisminvalue": "35",
        "yaxismaxvalue": "36",
        "numdisplaysets": "10",
        "labeldisplay": "rotate",
        "showValues": "0",
        "showRealTimeValue": "0",
        "theme": "fint"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Day Start"
                }
            ]
        }
    ],
    "dataset": [
        {
            "data": [
                {
                    "value": "35.27"
                }
            ]
        }
    ]
}

Features Supported by Real-time Charts

Real-time charts support the following features:

• Multiple datasets with real time update for each of them

• Multiple data updates in each update i.e., a single poll to the server can come back with any number of data values updated.

• Multiple update and refresh intervals for the chart. Update interval fetches the new data but does not change the view of chart. Refresh interval applies the updated data on chart’s view.

• Message logger

• Alert manager

• Annotations can be used to render custom objects

• JavaScript API can be used to set data, retrieve data, start/stop updates, clear chart.

• JavaScript events can be raised when the chart is initialized and rendered as well as when the data is updated.

• Clearing chart view

• Stopping real-time updates from server

• Interactive legend to show/hide datasets in line/area/column charts

• Real-time vertical divisional lines and trend-lines are supported

• Context menu to help users to enable/disable real-time updates

• Number Format

• Pre-defined and automatic color palette support

There! You have now been introduced to the basics and features of real-time charts.