Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

In most applications of real-time charts, you would want the chart to initially show historical data and then continue updating itself - instead of starting with a blank canvas and receiving data updates thereafter. You can do this by specifying the historical data in your JSON/XML data.

In this section, you will be shown how you can specify historical data on a chart.

Specifying Historical Data

A real-time chart rendered with historical data looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Harry's Supermart - Bakersfield Central", "subCaption": "Online Purchase", "showrealtimevalue": "1", "borderAlpha": "0", "yaxismaxvalue": "10", "numdisplaysets": "10", "usePlotGradientColor": "0", "canvasBorderAlpha": "20", "labeldisplay": "rotate", "slantLabels": "1", "showLegend": "0", "plotBorderAlpha": "0", "bgAlpha": "0", "showValues": "0", "numbersuffix": " Transactions", "showlabels": "1", "animation": "0", "showRealTimeValue": "0" }, "categories": [ { "category": [ { "label": "8 mins ago" }, { "label": "7 mins ago" }, { "label": "6 mins ago" }, { "label": "5 mins ago" }, { "label": "4 mins ago" }, { "label": "3 mins ago" }, { "label": "2 mins ago" }, { "label": "1 min ago" } ] } ], "dataset": [ { "seriesname": "", "alpha": "100", "data": [ { "value": "5" }, { "value": "7" }, { "value": "1" }, { "value": "5" }, { "value": "5" }, { "value": "2" }, { "value": "4" }, { "value": "3" } ] } ] }
{
    "chart": {
        "caption": "Harry's Supermart - Bakersfield Central",
        "subCaption": "Online Purchase",
        "showrealtimevalue": "1",
        "borderAlpha": "0",
        "yaxismaxvalue": "10",
        "numdisplaysets": "10",
        "usePlotGradientColor": "0",
        "canvasBorderAlpha": "20",
        "labeldisplay": "rotate",
        "slantLabels": "1",
        "showLegend": "0",
        "plotBorderAlpha": "0",
        "bgAlpha": "0",
        "showValues": "0",
        "numbersuffix": " Transactions",
        "showlabels": "1",
        "animation": "0",
        "showRealTimeValue": "0"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "8 mins ago"
                },
                {
                    "label": "7 mins ago"
                },
                {
                    "label": "6 mins ago"
                },
                {
                    "label": "5 mins ago"
                },
                {
                    "label": "4 mins ago"
                },
                {
                    "label": "3 mins ago"
                },
                {
                    "label": "2 mins ago"
                },
                {
                    "label": "1 min ago"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "",
            "alpha": "100",
            "data": [
                {
                    "value": "5"
                },
                {
                    "value": "7"
                },
                {
                    "value": "1"
                },
                {
                    "value": "5"
                },
                {
                    "value": "5"
                },
                {
                    "value": "2"
                },
                {
                    "value": "4"
                },
                {
                    "value": "3"
                }
            ]
        }
    ]
}
<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: "mychart",
    type: 'realtimecolumn',
    renderAt: 'chart-container',
    width: '600',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Harry's Supermart - Bakersfield Central",
            "subCaption": "Online Purchase",
            "showrealtimevalue": "1",
            "borderAlpha": "0",
            "yaxismaxvalue": "10",
            "numdisplaysets": "10",
            "usePlotGradientColor": "0",
            "canvasBorderAlpha": "20",
            "labeldisplay": "rotate",
            "slantLabels": "1",
            "showLegend": "0",
            "plotBorderAlpha": "0",
            "bgAlpha": "0",
            "showValues": "0",
            "numbersuffix": " Transactions",
            "showlabels": "1",
            "animation": "0",
            "showRealTimeValue": "0"
        },
        "categories": [{
            "category": [{
                "label": "8 mins ago"
            }, {
                "label": "7 mins ago"
            }, {
                "label": "6 mins ago"
            }, {
                "label": "5 mins ago"
            }, {
                "label": "4 mins ago"
            }, {
                "label": "3 mins ago"
            }, {
                "label": "2 mins ago"
            }, {
                "label": "1 min ago"
            }]
        }],
        "dataset": [{
            "seriesname": "",
            "alpha": "100",
            "data": [{
                "value": "5"
            }, {
                "value": "7"
            }, {
                "value": "1"
            }, {
                "value": "5"
            }, {
                "value": "5"
            }, {
                "value": "2"
            }, {
                "value": "4"
            }, {
                "value": "3"
            }]
        }]
    },
    events: {
        "beforeRender": function(evt, args) {
            var chartRef = evt.sender,
                //Format minutes, seconds by adding 0 prefix accordingly
                formatTime = function(time) {
                    (time < 10) ? (time = "0" + time) : (time = time);
                    return time;
                },
                updateData = function() {

                    //Get reference to the chart using its ID
                    var chartRef = FusionCharts("mychart");
                    //We need to create a querystring format incremental update, containing
                    //label in hh:mm:ss format
                    //and a value (random).
                    var currDate = new Date(),
                        label = formatTime(currDate.getHours()) + ":" + formatTime(currDate.getMinutes()) + ":" + formatTime(currDate.getSeconds()),
                        //Get random number between 1 & 4 - rounded
                        transactions = Math.round(Math.random() * 4) + 1,
                        strData = "&label=" + label + "&value=" + transactions;

                    //Feed it to chart.
                    chartRef.feedData(strData);
                };
                chartRef.intervalUpdate = setInterval(function() {
                    updateData();
                }, 5000);
        },
        "disposed": function(evt, args) {
            clearInterval(evt.sender.intervalUpdate);
        }

    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

The above chart tracks the online purchases from Bakersfield Central at Harry’s SuperMart. When the chart first renders, it shows the purchases record from 8 minutes before the chart was rendered to a minute before. Thereafter, the chart updates itself every 5 seconds.
In the data structure above, you can see that we have:

  • Added a categories > category object array to - create the x-axis labels for the historical data

  • Added a dataset > data object array to specify data values - equal to the number of x-labels specified.

Top