jQuery Plugin for FusionCharts 1.0 Beta Released

Yesterday, jQuery Plugin for FusionCharts Free was released as a beta release candidate. With it’s release, FusionCharts has bridged certain parts of the gap that lay between FusionCharts and popular JavaScript libraries.

This plugin allows you to integrate FusionCharts Free in your web application using popular jQuery syntax.

You can insert FusionCharts Free anywhere within a web page, manipulate the chart data, chart cosmetics and even provide data to the chart from simple HTML tables. With the jQuery Plugin for FusionCharts Free, your code becomes concise but coherent.

jQuery Plugin for FusionCharts Free is meant for web designers, jQuery enthusiasts, FusionCharts addicts and anybody who is interested in a simplified jQuery enabled charting solution. Even those, who are unfamiliar with both JavaScript as well as jQuery, can use this solution and easily display stunning animated Flash charts.

What this plugin achieves

Though FusionCharts can be easily integrated on any website using simple JavaScript codes, the ability to create charts using simple jQuery syntax is a bonus.

The plugin itself is written in a scalable architecture. What this implies is that other developers can easily build upon the existing codebase of this plugin. Looking into the source code of this plugin will reveal the ability to add your own data-handlers ((data-handlers are functions that allows users to convert one type of data to FusionCharts compatible XML data. The ability of converting simple HTML table into FusionCharts is one example of such functions.)) and filter-functions ((Filter functions are functions that affects the way FusionCharts HTML is rendered.)).

It strives to fix cross-browser JavaScript related issues using the power of jQuery. It even aims towards superior performance of the JavaScript codes used to render charts.

The ability to convert simple HTML table into FusionCharts, with one line of code, is something that shows how easy it is to integrate FusionCharts onto websites.

Installing the plugin

Installation of the plugin is as easy as copying the extracted contents of the downloadable pack onto your website root. The plugin documentation contains a step-by-step guide to install the plugin. You can check out the documentation at http://www.fusioncharts.com/jquery/docs/.

Sample code to create FusionCharts using jQuery plugin

Those who are familiar with jQuery, will find it extremely at home while using this plugin. There are insertFusionCharts(), appendFusionCharts() and prependFusionCharts() functions that are similar to jQuery html(), append() and prepend() functions respectively.

Once you have included the plugin files within the section of your page, writing the following piece of code within the of your web-page will render FusionCharts at the location where you inserted this code.

<div id="myChartContainer">Loading FusionCharts!</div>

<script type="text/javascript">
$('myChartContainer').insertFusionCharts({
    data: '<graph caption="Quarterly Sales Summary"' +
            '<set name="Q1" value="562" />' +
            '<set name="Q2" value="706" />' +
            '<set name="Q3" value="623" />' +
            '<set name="Q4" value="694" /></graph>',
    dataFormat: 'XMLData'
});
</script>

In case the above code does not work, you would require to provide a value to the swfPath option that points to the location where your FusionCharts swf files are saved.

Using this plugin with FusionCharts v3

FusionCharts v3 users can use this plugin with their existing SWF files as well. All that they need to do is point to the correct swfPath and add a parameter called product: 'v3' to the functions that generate FusionCharts.

<div id="myChartContainer">Loading FusionCharts!</div>

As of now, all of the basic features common to FusionCharts Free and FusionCharts v3 are available in this plugin. Down the line, we expect the plugin to support advanced features like exporting and event-handling.

Download jQuery Plugin for FusionCharts Free

You can download your copy of the jQuery Plugin for FusionCharts Free by visiting http://www.fusioncharts.com/jquery/.

This is a beta release, submit bugs at http://www.fusioncharts.com/forum/Forum73-1.aspx

3 Replies to “jQuery Plugin for FusionCharts 1.0 Beta Released”

  1. Really nice plugin although it doesn’t seam to work that well with *.xhtml documents. Would be nice if there was a option to insert the chart in a valid xhtml way.

  2. so this plugin and fusioncharts are both pretsy f***ing stupid if you’re neglecting to include support for dynamically updating a chart. how could one not think about such an obvious feature. go back to your 90s non-dynamic internet…

Leave a Reply