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:

Chart
JSON
XML
HTML

FusionCharts will load here..

{ "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" } ] } ] }

{
    "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"
                }
            ]
        }
    ]
}

<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    id: "stockRealTimeChart",
    type: 'realtimeline',
    renderAt: 'chart-container',
    width: '500',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "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"
            }]
        }]
    },
    "events": {
        "initialized": function(e) {
            function addLeadingZero(num) {
                return (num <= 9) ? ("0" + num) : num;
            }

            function updateData() {
                // Get reference to the chart using its ID
                var chartRef = FusionCharts("stockRealTimeChart"),
                    // We need to create a querystring format incremental update, containing
                    // label in hh:mm:ss format
                    // and a value (random).
                    currDate = new Date(),
                    label = addLeadingZero(currDate.getHours()) + ":" +
                    addLeadingZero(currDate.getMinutes()) + ":" +
                    addLeadingZero(currDate.getSeconds()),
                    // Get random number between 35.25 & 35.75 - rounded to 2 decimal places
                    randomValue = Math.floor(Math.random() * 50) / 100 + 35.25,
                    // Build Data String in format &label=...&value=...
                    strData = "&label=" + label + "&value=" + randomValue;
                // Feed it to chart.
                chartRef.feedData(strData);
            }

            e.sender.chartInterval = setInterval(function() {
                updateData();
            }, 5000);
        },
        "disposed": function(evt, arg) {
            clearInterval(evt.sender.chartInterval);
        }
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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 FusionCharts](/archive/3.11.0/basic-chart-configurations/number-format.html)
Pre-defined and automatic color palette support