FusionCharts and YUI 3 custom events

Fusion Charts
FusionChartsModule.js

Yahoo YUI 3 JavaScript library has some really cool features, but this blog I would like to focus upon Fusion Charts and YUI 3 custom events. Although YUI 3 already has a chart module in beta, those charts cannot save an image of itself on a server. Fusion Charts can export an image to a server with one caveat; the chart must first be rendered on the user’s computer. (This is due to the nature of the charts relying on Adobe Flash to render.)

The Fusion Charts JavaScript API defines two event models : advanced and simple. While the simple model allows one to easily define a function for each event, a problem arises when multiple charts are rendered on one page. The event functions are written like:


function FC_Loaded(DOMId) {
var chart = FusionCharts(DOMId);

if (DOMId == "chart1") {
// Do something here.
}
else {
// Do something here.
}
}

Increasing the amount of charts on the page translates to more if-conditions created in the event functions in order to specify functionality on certain charts. The solution to this problem is to use the advanced event model instead of the simple event model to specify which chart should run a function.


// Fusion Charts object
var o = { ... };
var chart = new FusionCharts(o);

// Adds the listener
chart.addEventListener("Loaded", function (e, args) {
// Do something here.
});

This advance event model is quite rigid because the only method of adding an event to a chart is referencing the chart object. The charts may be stored as global variables, but we know that Global variables are evil. Another way is to access it through the FusionCharts(ID goes here); function, but this implies that we already know the ID.

On the other hand, we can take advantage of the custom event model YUI 3 through object extending. Below I have given three methods of access the events using YUI 3.



// Remember to define the fusioncharts module in the YUI() configuration parameter.
YUI().use('fusioncharts', function(Y) {

/*
* Based on the advance event model where the HTML DOM object is referenced.
*/
var o1 = {id : 'chart1', ... };
var chart1 = new Y.FusionCharts(o1);
chart1.render('chart1Div');
Y.one('#chart1Div>*').on('fc:rendered', function(o) {
// Do something when chart is rendered.
});

/*
* Based on the advance event model where the chart object is referenced.
*/
var o2 = {id : 'chart2', ... };
var chart2 = new Y.FusionCharts(o2);
chart1.render('chart2Div');
chart2.on('fc:rendered', function(o) {
// Do something when chart is rendered.
});

/*
* Based on the simple event model.
*/
var o3 = {id : 'chart3', ... };
var chart3 = new Y.FusionCharts(o3);
chart1.render('chart3Div');
Y.on('fc:rendered', function(o) {
if(o.id == 'chart3') {
// Do something when chart is rendered.
}
});
});

Y.FusionCharts extends the FusionCharts object so the method of using the object has not changed. Rather, the Y.FusionCharts implements the YUI 3 event model through the ‘on’ function.

I have added a prefix to the FusionCharts event such as ‘fc:rendered’ in order to minimize any conflict with current custom events.

Basically, this custom module allows transparency between YUI 3 and Fusion Charts event model. Transparency is great for supporting the power of the YUI 3 framework.

Not sold? Please watch this video: YUI 3 Events Evolved

Edit 10/24/2011:
Unfortunately, I have found that the ‘fc:exported’ event fails to fire. This is due to the FusionCharts addEventListener function not working properly. Whether that means I am using it wrong, or there is a bug in FusionCharts, I do not know. Hopefully, this post receives an answer. Fusion Charts Forum

Advertisements