Loading
Adding Historical Data
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:
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"
}
]
}
]
}In the data structure above, you can see that we have:
-
Added a
categories>categoryobject array to - create the x-axis labels for the historical data -
Added a
dataset>dataobject 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.