gvChart - jQuery plugin demo

Below you can see example of the table with data about number of a new players on the page on every month. I have created two data sets, each for one year: 2009 and 2010. They can be shown as a separate datas on the chart (see below).

General use

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>

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,
		}
});

Settings

chartType

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

• AreaChart
• LineChart
• BarChart
• ColumnChart
• PieChart

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.

AreaChart

Game players count

	Jan	Feb	Mar	Apr	May	Jun	Jul	Aug	Sep	Oct	Nov	Dec
2010	125	185	327	359	376	398	0	0	0	0	0	0
2009	1167	1110	691	165	135	157	139	136	938	1120	55	55

LineChart

Game players count

	Jan	Feb	Mar	Apr	May	Jun	Jul	Aug	Sep	Oct	Nov	Dec
2010	125	185	327	359	376	398	0	0	0	0	0	0
2009	1167	1110	691	165	135	157	139	136	938	1120	55	55

BarChart

Game players count

	Jan	Feb	Mar	Apr	May	Jun	Jul	Aug	Sep	Oct	Nov	Dec
2010	125	185	327	359	376	398	0	0	0	0	0	0
2009	1167	1110	691	165	135	157	139	136	938	1120	55	55

ColumnChart

Game players count

	Jan	Feb	Mar	Apr	May	Jun	Jul	Aug	Sep	Oct	Nov	Dec
2010	125	185	327	359	376	398	0	0	0	0	0	0
2009	1167	1110	691	165	135	157	139	136	938	1120	55	55

PieChart

Note that PieChart uses only first table row as a data set. Next data rows are ignored.

Game players count

	Jan	Feb	Mar	Apr	May	Jun	Jul	Aug	Sep	Oct	Nov	Dec
2010	125	185	327	359	376	398	0	0	0	0	0	0

Credits

Special thanks to Urszula Ciaputa for her help in creating this plugin.