Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

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

  • Event parameters in the advanced model

  • Real-time events

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:

FusionCharts will load here..
{ "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" } ] } ] }
{
    "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

realtimeUpdateComplete

FC_ChartUpdated

This event is raised whenever data is updated in real-time using:

the data provider page specified in the datastreamURL attribute

JavaScript API (using setData, feedData, setDataForId functions)

The event argument provided by FC_ChartUpdated function (simple event model) is the DOMId of the chart raising the event.

The event arguments provided in the advanced model are:

eventObject : This object contains the eventId, eventType, and sender properties.


argumentsObject: This is passed as a blank object.

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:

FusionCharts will load here..
{ "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" } ] }
{
    "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

realtimeUpdateError

Not available

This event is raised when an error occurs while performing real-time update using datastreamURL.

The event arguments provided in the advanced model are:

eventObject : This object contains eventId, eventType and sender properties.


argumentsObject: This object contains the property listed below:

httpStatus: The HTTP Error status value is specified as a number (e.g., 404)

Top