gvChart is a plugin for jQuery, that uses Google Charts to create interactive visualization by using data from the HTML table tag. It is easy in use and additionally it allows you to create five types of the charts.

Check out demo Download plugin from github

Important: Download link and Demo are up to date (version 1.0.1).

Some time ago I tried to find some JavaScript libraries, which would easily create nice charts. I have found two: jQuery Visualise and Google Charts. First one was interesting because of using table HTML tag as a data source for the chart, but it isn’t interactive and there are no labels with values of every chart node. Google Charts provide useful tools for creating interactive charts, but it uses JavaScript Array() as a source of data. So I decided to create my own hybrid of these features.

Creating chart in three steps

Create HTML table

Create table with your data. The table must be well formed:

  • Table should have caption element – it will be used as a title of the chart.
  • Table should be divided into two parts: thead and tbody.
  • In the thead element create one row with th elements. They will be used as arguments presented on the x-axis.
  • In the tbody element place data rows. Each row represents one data set. The first element of the row should be th with the name of the data set.

Download gvChart

Download gvChart and place it in your HTML code.

To use this plugin you have to put script tags reffering to jQuery, gvChart and Google jsapi.

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.gvChart-0.1.min.js"></script>

Important! Google jsapi script tag must be placed before gvChart script.

Before using script you have to initialize Google Api, by using gvChartInit() function. This function may not work when placed in the external JavaScript file. It is better idea to place it inline in the head.

<script type="text/javascript">
	gvChartInit();
</script>

Connect gvChart to the table

Now you can use gvChart in your scripts. Below is a basic example of usage.

jQuery('#myTable').gvChart({
	chartType: 'ColumnChart',
	gvSettings: {
		vAxis: {title: 'No of players'},
		hAxis: {title: 'Month'},
		width: 720,
		height: 300,
		}
});

gvChart settings

chartType – You can use five different google charts, by setting chartType to one of:

hideTable [Default: true] – If set to false, it won’t hide table while creating the chart.

gvSettings – In the gvSettings variable you can place Google Charts settings, which you can find in the Google Visualization API Gallery.

swap [Default: false] – swaps table columns and rows.

Special thanks to Urszula Ciaputa, for helping me with this plugin.

UPDATE: 18/06/2012! Plugin is now placed on the github.