Honey I Shrunk the Codes

The shiny new FusionCharts JavaScript chart Library was built keeping in mind the modern JavaScript paradigm: scalable, flexible and extensible. So much so, that there are now three different ways to construct and render FusionCharts. Coding for this charting component is definitely simple, easy, intuitive and full of versatility.

The Very Old swfobject Style Construction

Since the very beginning of FusionCharts, tracing its roots to Flash-only charting component, it used a morphed version of the trusted swfobject JavaScript library. We used to (and still do) write the famous three-line code:

// Create FusionCharts JavaScript object.
var myChartObj = new FusionCharts('/Charts/Column2D.swf', 'myChart', '400', '300', '0', '1');
// Set the source data xml.
myChartObj.setXMLData('data.xml');
// Provide instruction to render the chart within a container
// HTML element.
myChartObj.render('containerDivId');

The above example involves creating a FusionCharts JS object, then setting the source data file and finally rendering the chart’s HTML mark-up inside a pre-coded container division.
The New Object-Style Construction
With the evolution of usage of JavaScript as a robust web application development language, FusionCharts JavaScript library upgraded itself into a more contemporary and future ready JavaScript library.

The latest FusionCharts JS library incorporates the ability to render pure JavaScript charts. Consequently, the style of the API had to become more flexible to cater to a wider range of developers and development needs.
// Create new FusionCharts object
var myChartObj = new FusionCharts({
id: 'myChart',
swfUrl: '/Charts/Column2D.swf',
width: '400', height: '300'
});

// Provide data source and render the chart. myChartObj.setXMLData(‘data.xml’); myChartObj.render(‘containerDivId’); The above codes demonstrate the ability of FusionCharts to accept an object as parameter to construct a new FusionCharts object. This has a five-fold advantage:

1. Allows a lot of flexibility for developers.
2. Reduces the possibility of errors by reducing the headache of remembering parameter order.
3. Makes codes more readable.
4. Brings about coding style similar to popular JavaScript libraries like jQuery charts, etc.
5. The code looks sexier! 😛

Making Your Codes Slicker

The new object-style construction allows you to specify entire information required to render FusionCharts during construction ((By “construction”, we mean on the line where you do new FusionCharts(...))) itself. This reduces the number of lines of code and makes the code more manageable.

var myChartObj = new FusionCharts({
id: 'myChart'
swfUrl: '/Charts/Column2D.swf',
width: '400', height: '300',
// Provide data source
dataSource: 'data.xml',
dataFormat: 'xmlurl',
// Provide the container HTML node's id
renderAt: 'containerDivId'
});
// Render the chart
myChartObj.render();

In the above code, all information required to render the chart has been specified during construction itself. This is definitely more readable and manageable.

Bending the Limits – Shrinking Things Further

Finally, we cater to the needs of those who are minimalist and are very conscious about the cleanliness of their codes.

var myChartObj = FusionCharts.render({
swfUrl: '/Charts/Column2D.swf',
width: '400', height: '300',
dataSource: 'data.xml',
dataFormat: 'xmlurl',
renderAt: 'containerDivId'
});

Note in above the usage of the static FusionCharts.render() method to render a FusionCharts object using the construction parameter alone. Also note the ability to create a FusionCharts object in the absence of an explicit “id” of the chart. This is quite a nifty feature. In the new FusionCharts JS library, if the chart’s id is undefined, an id is auto-generated ((The generated chart id looks like “chartobject-n” where n stands for an incremental integer)). This saves the additional overhead of maintaining and accessing the charts with a unique ID. Just having a reference to the myChartObj JavaScript variable instead of repeated getChartFromId('myChartId') function call is much simpler, cleaner and also performance optimized ((The getChartFromId()function has been deprecated since FusionCharts 3.2 JS Library. Instead, we recommend you maintain a reference to the JavaScript variable of your chart. You can also use the new FusionCharts('my-chart-id') way to get a reference back to your chart variable. Read more on retrieving chart reference in JavaScript )).

Enlighten Me!

So, the new FusionCharts JavaScript library is definitely living up to its expectation as a library that is flexible, scalable and developer friendly. Friendliest of the lot. It definitely offloads the overhead of coding for a charting solution so that you can concentrate more on building your data source than to bother about how to render FusionCharts and the various other quirks related to it.