Delphinidin

Interactive graphs are most often creating using Adobe Flash for dynamic graphs, such as those seen in Google Analytics. Recently, a number of developers have created jQuery plug-ins that can create comparable charts but without the dependency of Flash. The Visualize plug-in, created by Filament Group, is one of the better solutions for creating charts. The Visualize plug-in allows you to create graph, line, bar, and pie charts using tabular data. It has a number of options that can be passed into the function to set up and alter a chart on any page using data pulled from HTML tables.

- Creating a Bar Chart
In the following example, I show you just how easy it is to use the Visualize plug-in to create a bar chart based off existing data in a table.

1. Before you can apply the chart plug-in to your table, you need to make sure the table is set up correctly. If the table is not set up correctly, the plug-in won't work. You need to wrap all of the table header cells with a thead tag and all of the table cells with a tbody tag like in the following HTML example. You will also need to add the scope attribute to the columns and rows.

The scope attribute can be added to table cell, which is a table attribute used to ensure that the user either reading or using a screen reader to access the Web page recognizes the cell as a heading. Th e scope attribute accepts the following values: col, colgroup, row, and rowgroup and is mainly used for accessibility of Web pages.

2. When you use a plug-in with jQuery, you always need to include it in the top of your page. You should load plug-ins before any code that references them. Any code that doesn't reference the plug-in can happily be loaded before the plug-in, but always after the jQuery library.

<script type="text/javascript" src="js/visualize.jquery.js"></script>

3. Set up a document ready handler and, within it, add a statement that selects the .table table and applies the visualize() method to it. Apply the visualize method and pass in the following option: type:'bar'.

$(document).ready(function(){
$('table').visualize({type:'bar'});
});