Convert HTML Tables to Animated Charts

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:

Jan-Mar Apr-Jun Jul-Sep Oct-Dec
Toilet Papers: 1205 892 654 781
Hand Sanitizers: 567 776 882 632

Table 1

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
Jan-Mar: 1205 567
Apr-Jun: 892 776
Jul-Sep: 654 882
Oct-Dec: 781 632

Table 2

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.

<script type="text/javascript">
$("mySalesData").convertToFusionCharts({type: "MSColumn3D"}).hide();
</script>

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:

<script type="text/javascript">
$("mySalesData").convertToFusionCharts({
    type: "MSColumn3D",
    dataOptions: {
        chartAttributes: {
            caption: "Quarterly Sales",
            xAxisName: "Quarter",
            yAxisName: "Revenue"
        }
    }
}).hide();
</script>

To know about the full list of chart attributes you can use, look up the documentation of FusionCharts and FusionCharts Free.

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 ignoreRows attribute.

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 labelSourceIndex and legendSourceIndex.

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

<head>
<html>
<title>convert2FusionCharts Sample | jQuery Plugin for FusionCharts Free</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="FusionChartsFree/JS/jquery-1.4.2.js"></script>
<script type="text/javascript" src="FusionChartsFree/JS/jquery.fusioncharts.js"></script>
</head>
<body>
    <center>
    
    <table id="myHTMLTable" border="1" align="center">
    <tr> <th> </th> <th>2005</th> <th>2006</th>   <th>2007</th> </tr>
    <tr> <th>Product 1</th> <td>23</td> <td>34</td>   <td>45</td> </tr>
    <tr> <th>Product 2</th> <td>31</td>   <td>24</td> <td>46</td> </tr>
    </table>

    <script type="text/javascript">
    $('#myHTMLTable').convertToFusionCharts({
        type: "MSColumn3D",
        data: "#myHTMLTable",
        dataFormat: "HTMLTable"
    }).hide();
    </script>

    </center>
</body>
</html>

Download FusionCharts jQuery HTMLTable Mini Sample demonstrating certain aspects of this discussion.

2 Replies to “Convert HTML Tables to Animated Charts”

  1. Just a friendly reminder to ppl that are going to use this. ( 2 hours to find this out )
    You can not structur your html table td in multiple lines  like so.
    <td>
    value
    </td>

     
    It will return invalid xml
    the html needs to be formated in one line per td
    <td>value</td>

Leave a Reply