Real-time Data Format
The format of real-time data for real-time charts depends on:
-
the number of incremental updates you want to pass to the chart in one attempt
-
the attributes you want to update for each dataset - like
label,color,link,toolText, etc.
In this section, you will be shown how the data format changes depending on the above factors.
Number of Datasets to Update
Let’s say you want to update two datasets plotted on a line chart. To do this, you need to output the data in the following format:
Here, the two output values, 23 and 43, are separated by the | (pipe character). The value specified first, 23, is set for the first dataset and the value specified second, 43, is set for the second dataset.
Similarly, if you had three datasets to update, the data will be passed in the following format:
Here, the third value, 45, is set for the third dataset.
Number of Incremental Updates
Real-time charts let you pass multiple values for one dataset in each update.
Assume that you are working over HTTP and need to ensure that you utilize the bandwidth efficiently. Considering this, it will not be feasible to set your chart, with three datasets, to update itself every second, because this may create a strain on the server. However, you also do not want to skip the data values that you missed by not updating the data every second. To avoid this, you can provide data to the chart in the following format:
Here, the values 23, 25, and 24 correspond to the first dataset, 43, 47, and 45 correspond to the second dataset, and 45, 47, and 49 correspond to the third dataset. All values for one dataset are separated by a comma, all datasets are separated by the | (pipe character)
Attributes to Update for the Chart
Assume that you plot a real-time line chart to monitor stock prices for Harry’s SuperMart. On this monitoring chart, the stock price is checked at every seventh instance of data update. You want to add a vertical trend-line that helps you keep track of every instance when the price is checked.
To do this, you can provide data to the chart in the following format
&label=11:45&value=753|345&vline=0&vLineLabel=vLine&vLineColor=#666666&vLineThickness=2&vLineDashed=1The real-time line chart thus rendered is shown below:
{
"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) {
var flag = 0;
function addLeadingZero(num) {
return (num <= 9) ? ("0" + num) : num;
}
function updateData() {
// Get reference to the chart using its ID
var chartRef = e.sender,
// 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;
flag = flag + 1;
if (flag % 7 === 0) {
strData = "&label=" + label + "&value=" + randomValue + "&vline=1&vLineLabel=Price Checked&vLineColor=#666666&vLineThickness=2&vLineDashed=1";
}
// Feed it to chart.
chartRef.feedData(strData);
}
e.sender.chartInterval = setInterval(function() {
updateData();
}, 5000);
},
"disposed": function(evt, args) {
clearInterval(evt.sender.chartInterval);
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Attributes to Update for Each Dataset
The label Attribute
Updating the Label as a Part of Real-time Data
Consider that you are plotting a real-time multi-series line chart that indicates the load on three servers. The time is plotted on the x-axis and the corresponding load for all three servers is plotted on the y-axis. With each incremental data, you will now also have to provide the label for the x-axis along with the data value for the y-axis.
To do this, you can provide data to the chart in the following format:
When the chart receives this data, it shifts all existing data and labels one position to the left. Next it plots the new label on the x-axis and the three new data values on the y-axis.
Hiding the Label
For charts plotting a large number of data points, you may not want to render all labels on the chart to avoid cluttering. Instead you may want to show alternate labels, while updating your data every minute.
For the data label that you want to hide, you can provide your incremental data to the chart in the following format:
The showLabel attribute, when set to 0, hides the data label from the x-axis.
The link Attribute
For real-time charts, you can render a data plot as a clickable link that opens in a new window, a pop-up window, in a frame, etc.
To do this, you can provide the incremental data to the chart in the following format:
&label=11:45&value=23|43|45&link=showdetail.asp?server=1%26time=1145|showdetail.asp?server=2%26time=1145|showdetail.asp?server=3%26time=1145The link has to be specified in the FusionCharts link format. The link in the above data has been URL Encoded because it contains special characters like &, %, etc.
The toolText Attribute
To update the tool-text, you can provide the corresponding incremental data to the chart in the following format:
The color Attribute
To update the color, you can provide the corresponding incremental data to the chart in the following format:
The colors for each dataset are separated by the | (pipe character). The colors specified for real-time updates will always be filled as solid colors and not gradients.
Providing Empty Data to the Chart
To provide empty data to the chart, so that a break in the data plot (column/line/area) shows, you can provide the incremental data to the chart in the following format:
Commands sent to the Chart
The clearChart Command
To clear the historical data displayed on the chart, you can send the clearChart command to the server in the following format:
The stopUpdate Command
To stop the chart from the polling the server for real-time updates, you can send the stopUpdate command in the following format:
After you have stopped updates for a chart, you can restart updates either by user interaction or by using client-side JavaScript API.
Sending Messages Pertinent to the Message Logger
For real-time charts that show the message logger, you can update various parameters for the message logger in real-time. All these parameters and their data format have been explained in the Message Logger section.