FusionCharts Logo
v3.12.1
Demos
Beginner's Guide
Charts / Gauges / Maps Guide
Customizing Charts
API
Integrating With Your Stack
Help

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:

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:

Top