Honey I Shrunk the Codes

3–4 minutes

The new FusionCharts JavaScript library was built keeping in mind the modern JavaScript paradigm: Scalable, Flexible and Extensible. So much so, that there are three different ways to construct and render FusionCharts. Coding for any charting component couldn’t have been simpler.

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 swfobject1 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 based 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 four-fold advantage:

  1. Allows a lot of flexibility for developers.
  2. Reduces the scope of coding 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, etc.

Making your codes slicker

The new object-style construction allows you to specify entire information required to render FusionCharts during construction 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 finicky about the cleanliness of their codes.

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

Note in above the usage of 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. 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("myChart") function call is much simpler, cleaner and also performance optimized.

More roads to Rome

And did we forget the no-brainer FusionCharts Tag (FusionCharts DOM) way of rendering charts? Charts can be rendered just as simply as writing HTML documents.

<html>
 ... Your HTML Code here ....
  <p>
 <fusioncharts chartType="MSCombi2D" dataUrl="profit_revenue.xml" width="100%">
 </fusioncharts>
 </p>
 ... Your HTML Code here ....
 </html>

When the FusionCharts DOM JavaScript is included in a page, just writing the above HTML anywhere within the page body, renders FusionCharts at that location.

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.

  1. More on swfObject https://github.com/swfobject/swfobject ↩︎

Leave a comment