Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

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..

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.

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

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

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.

There! You have now seen how you can show historical data on real-time charts.

Top