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:
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"
}
]
}
]
}<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>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.