Most of us already have data on our web-pages in form of tables. With the release of the jQuery Plugin for FusionCharts, giving life to tabular data couldn’t have been easier. With just one line of code, one can convert HTML tables into animated FusionCharts.
Installing the plugin
Installation of the plugin is as easy as copying the extracted contents of the downloaded 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/.
Know your HTML table
Pertaining to this post, data in a table can be expressed in two ways: vertically (row-major) or horizontally (column-major). Say, you have a table that displays information regarding the annual sale of toilet-papers and hand-sanitizers in a departmental store. The table would somewhat look as below:
Here, we can see that the quarters are placed horizontally and the products are placed vertically. When this table is traversed horizontally, it conveys that we are comparing the sales of each product over a period of one year. However, the same when followed vertically, compares the sale of two products in each quarter.
The above table can be transposed and re-written as below:
|Toilet Papers||Hand Sanitizers|
Thus, what type of comparison we want to convey depends on how we arrange items in tables.
Here, we are treating the first row as labels and for categorizing (as legends), we are using the first column. Interestingly, in the same table, if we apparently treat the first row for categorising, the very table changes from row-major to column-major!
What can be done with FusionCharts jQuery plugin
If you have data in your website or blog in form of tables, (somewhat like above,) you may simply write one line of code to convert it to life-like charts.
Just add a unique id to the table (say: id=”mySalesData”) and add the following lines of code below the table.
This will convert the table into a 3D column chart and hide the table itself. In case you do not want to hide the table, remove
.hide() from the above code.
Now, if your table is in column-major format and you want to convert it to row-major and vice-versa, you can do it easily by specifying
major: 'row' or
major: 'col' respectively.
The FusionCharts jQuery plugin documentation contains detailed information regarding customizing your data and charts. The download pack contains samples that can be used for reference.
Which chart-type should be chosen
For depicting categorical deviation, one may choose to use column-charts and for conveying a trend, one may choose line-charts. If one is interested in depicting the volume of data compared over various items, an area-chart is more suitable.
Tables having multiple rows or columns of data are defined by FusionCharts as multi-series data. Multi-series data is supported by multi-series charts such as “MSColumn2D”, “MSClumn3D”, “Area2D”, etc. The complete list of chart-types that support “HTMLTable” as data format is mentioned in plugin documentation.
To specify a chart type, you need to send the value of its alias to the attribute called “type”. The above example demonstrates the use of “MSColumn3D” as chart-type.
How can charts be customized
The default look-and-feel of the charts can be changed by sending chartAttributes to the convertToFusionCharts function. Say you want to add caption to the chart and give names to the x-axis and y-axis; the code to do the same would be:
What if tables have blank rows or columns
In case you already have data in form of tables and they contain empty rows or empty columns, the plugin provides you with options to select rows and columns that are to be ignored.
Let us assume that we have the 2nd, 4th and 6th columns that we want to ignore. We would simple pass
ignoreCols: [2,4,6] to the
convertToFusionCharts() method. Similarly for ignoring rows, there is the
What if labels and legends are not the first row and column
Thankfully the FusionCharts jQuery plugin foresaw the fact that your existing HTML table may have its labels and legends in places other than the first row or column. Thus, to select any other row or column as labels or legends, simply provide the appropriate values for
In case your major value is set to ‘row’, labels are picked up from a row and legends are picked up from a column. This is reversed when major value is set to ‘col’.
Complete Sample Code
A complete code that shows all aspects of this FusionCharts jQuery plugin’s ability to convert HTML tables to charts
Download FusionCharts jQuery HTMLTable Mini Sample demonstrating certain aspects of this discussion.