Listening to Events
The FusionCharts JavaScript Class API provides a number of events for real-time charts. These events are categorized into two broad groups - simple events and advanced events. Each event provides arguments to the event-listeners.
In the advanced model, two event parameters are passed to the event listener function. The first parameter, eventObject is is structurally common for all events. The second parameter, argumentsObject contains event specific properties.
In this section, you will be introduced to the:
Event Parameters in the Simple Model
In the simple events model, most events (except the FC_Exported and the FC_Resized events) provide the DOM Id of the source chart - the chart that raised the event.
Event Parameters in the Advanced Model
In the advanced model, two event parameters are passed to the event listener function. The first parameter, eventObject is is structurally common for all events. The second parameter, argumentsObject contains event specific properties.
The details of these objects are explained below:
-
eventObject, the first argument, provides details of the event. This object has the following three properties: -
eventId : An unique id given to the event.
-
eventType : A string containing the name or the event type e.g. “rendered” etc.
-
sender : A FusionCharts JavaScript Object reference to the chart that has raised the event.
-
argumentsObject, the second argument, contains details of the event fired. Depending on the type of event raised, the properties of the object vary.
For more information on simple and advanced events and the argumentsObject for each event, refer to the FusionCharts Events API page.
Real-time Events
The realtimeUpdateComplete Event
The FusionCharts JavaScript Class API realTimeUpdateComplete event is raised every time a real-time chart or gauge updates itself with new data.
A real-time column chart configured to listen to the realTimeUpdateComplete event is shown below:
{
"chart": {
"caption": "Harry's Supermart - Bakersfield Central",
"subCaption": "Footfalls",
"showrealtimevalue": "1",
"paletteColors": "#008ee4,#9b59b6",
"borderAlpha": "0",
"yaxismaxvalue": "20",
"numdisplaysets": "10",
"usePlotGradientColor": "0",
"plotBorderAlpha": "0",
"canvasBorderAlpha": "20",
"labeldisplay": "rotate",
"slantLabels": "1",
"showLegend": "0",
"bgAlpha": "0",
"showValues": "0",
"numbersuffix": " Customers",
"showlabels": "1",
"animation": "0",
"showRealTimeValue": "0"
},
"categories": [
{
"category": [
{
"label": "Start"
}
]
}
],
"dataset": [
{
"seriesname": "Footfall",
"alpha": "100",
"data": [
{
"value": "5"
}
]
}
]
}<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: "realtimechart-1",
type: 'realtimecolumn',
renderAt: 'chart-container',
width: '600',
height: '210',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Harry's Supermart - Bakersfield Central",
"subCaption": "Footfalls",
"showrealtimevalue": "1",
"paletteColors": "#008ee4,#9b59b6",
"borderAlpha": "0",
"yaxismaxvalue": "20",
"numdisplaysets": "10",
"usePlotGradientColor": "0",
"plotBorderAlpha": "0",
"canvasBorderAlpha": "20",
"labeldisplay": "rotate",
"slantLabels": "1",
"showLegend": "0",
"bgAlpha": "0",
"showValues": "0",
"numbersuffix": " Customers",
"showlabels": "1",
"animation": "0",
"showRealTimeValue": "0"
},
"categories": [{
"category": [{
"label": "Start"
}]
}],
"dataset": [{
"seriesname": "Footfall",
"alpha": "100",
"data": [{
"value": "5"
}]
}]
},
events: {
'beforeRender': function(evt, arg) {
var controllers = document.createElement('div');
controllers.setAttribute('id', 'tableCont');
controllers.innerHTML = "<div id='tableView' style='width:275px;margin-left:150px;height:110px;overflow-y:auto;display:none;'></div>";
//Display container div and write table
arg.container.parentNode.insertBefore(controllers, arg.container.nextSibling);
},
'realtimeUpdateComplete': function(event, parameter) {
var dataArr = event && event.sender.getData(),
dataTable = document.getElementById("tableView"),
str = "";
//Creating the table format
str += '<table border="1" cellpadding="1" cellspacing="0" borderolor="#cccccc" width="100%">';
str += ' <tr>';
str += ' <th width="50%" style="padding:3px;font-weight:bold;font-size: 14px;">Time</th>';
str += ' <th width="50%" style="padding:3px;font-weight:bold;font-size: 14px;">Customers</th>';
str += ' </tr>';
//Preparing html string to create the table with data
for (i = 0; i < dataArr.length; i++) {
if (dataArr[i][0] !== null) {
str += ' <tr>';
str += ' <td width="50%" style="padding:3px">' + dataArr[i][0] + '</td>';
str += ' <td width="50%" style="padding:3px">' + dataArr[i][1] + '</td>';
str += ' </tr>';
}
}
str += '</table>';
//Showing the table
dataTable.style.display = "block";
//Adding html string in the div container
dataTable.innerHTML = str;
},
'rendered': function(evt, arg) {
var dataTable = document.getElementById("tableView");
//Format minutes, seconds by adding 0 prefix accordingly
function formatTime(time) {
(time < 10) ? (time = "0" + time) : (time = time);
return time;
}
function updateData() {
//Get reference to the chart using its ID
var chartRef = evt && evt.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 = formatTime(currDate.getHours()) + ":" + formatTime(currDate.getMinutes()) + ":" + formatTime(currDate.getSeconds()),
//Get random number between 5 & 20 - rounded
footfall = Math.round(Math.random() * 15) + 5,
strData = "&label=" + label + "&value=" + footfall;
//Feed it to chart.
chartRef.feedData(strData);
}
evt.sender.chartInterval = setInterval(function() {
updateData();
}, 5000);
},
'disposed': function(evt, arg) {
clearInterval(evt.sender.chartInterval);
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>The above chart shows the real-time statistics of footfalls at the Bakersfield Central outlet. The chart is updated with new data every five seconds. Whenever there is a data update, the realTimeUpdateComplete event is fired. The event is configured to then retrieve the last data updated and display it in an HTML table rendered below the chart.
More details pertaining to this event are given in the table below:
| Name (Advanced model) | Name (Simple model) | When is it raised? | Event parameters |
|---|---|---|---|
|
FC_ChartUpdated |
This event is raised whenever data is updated in real-time using: |
The event argument provided by The event arguments provided in the advanced model are: |
The realtimeUpdateError Event
The realTimeUpdateError event is raised when an error occurs while performing a real-time update from the data provider page specified using the dataStreamURL attribute.
A real-time column chart configured to listen to the realTimeUpdateError event is shown below:
{
"chart": {
"caption": "Harry's Supermart - Bakersfield Central",
"subCaption": "Footfalls",
"showrealtimevalue": "1",
"dataStreamURL": "explore/data.php",
"paletteColors": "#008ee4,#9b59b6",
"borderAlpha": "0",
"yaxismaxvalue": "20",
"numdisplaysets": "10",
"usePlotGradientColor": "0",
"plotBorderAlpha": "0",
"canvasBorderAlpha": "20",
"labeldisplay": "rotate",
"slantLabels": "1",
"showLegend": "0",
"bgAlpha": "0",
"showValues": "0",
"numbersuffix": " Customers",
"showlabels": "1",
"animation": "0",
"showRealTimeValue": "0"
},
"categories": [
{
"category": [
{}
]
}
],
"dataset": [
{
"seriesname": "Footfall",
"alpha": "100"
}
]
}<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: "realtimechart-2",
type: 'realtimecolumn',
renderAt: 'chart-container',
width: '600',
height: '210',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Harry's Supermart - Bakersfield Central",
"subCaption": "Footfalls",
"showrealtimevalue": "1",
"dataStreamURL": "explore/data.php",
"paletteColors": "#008ee4,#9b59b6",
"borderAlpha": "0",
"yaxismaxvalue": "20",
"numdisplaysets": "10",
"usePlotGradientColor": "0",
"plotBorderAlpha": "0",
"canvasBorderAlpha": "20",
"labeldisplay": "rotate",
"slantLabels": "1",
"showLegend": "0",
"bgAlpha": "0",
"showValues": "0",
"numbersuffix": " Customers",
"showlabels": "1",
"animation": "0",
"showRealTimeValue": "0"
},
"categories": [{
"category": [{
}]
}],
"dataset": [{
"seriesname": "Footfall",
"alpha": "100"
}]
},
events: {
'beforeRender': function(evt, arg) {
var controllers = document.createElement('div');
controllers.setAttribute('id', 'tableCont-2');
controllers.innerHTML = "<div id='errorView' style='width: 475px;border: 2px solid #666666;background-color:#9b545b; color:#ffffff;display:none;padding: 3px;margin-left: 60px;margin-top: 10px;'></div>";
//Display container div and write table
arg.container.parentNode.insertBefore(controllers, arg.container.nextSibling);
},
'RealtimeUpdateError': function(event, parameter) {
var dispBox = document.getElementById("errorView");
dispBox.style.display = "block";
dispBox.innerHTML = "Problem occurred while updating real-time data. The error status code is" + parameter.httpStatus;
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>In the above data, the URL to a fake data provider page has passed as value to the dataStreamURL attribute. We have done this to trigger the realTimeUpdateError event. When this event is raised, a custom error message and the error status code are displayed.
More details pertaining to this event are given in the table below:
| Name (Advanced model) | Name (Simple model) | When is it raised? | Event parameters |
|---|---|---|---|
|
Not available |
This event is raised when an error occurs while performing real-time update using |
The event arguments provided in the advanced model are:
|