jQuery charts and Graphs - gvCharts Plugin

Create interactive charts or graph in 3 easy steps in jQuery by using data from HTML table. gvChart is a jQuert plugin which uses Google Chart API to create interactive charts. gvChat provide options to create Area Chart, Line Chart, Bar Chart, Column Chart and Pie Chart.

Include jQuery Files

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

Create your table

<table id="myTable">
<caption>Visitors Flow</caption>
<thead><tr><th></th>
<th>Jan</th><th>Feb</th><th>Mar</th><th>Apr</th><th>May</th><th>Jun</th>
<th>Jul</th><th>Aug</th><th>Sep</th><th>Oct</th><th>Nov</th><th>Dec</th>
</tr></thead>
<tbody>
<tr><th>2012</th><td>120</td><td>160</td><td>280</td><td>340</td><td>260</td>
<td>680</td><td>750</td><td>950</td><td>800</td><td>600</td><td>450</td>
<td>240</td></tr><tr>
<th>2011</th><td>500</td><td>600</td><td>700</td><td>750</td><td>800</td>
<td>800</td><td>750</td><td>600</td><td>450</td><td>350</td><td>250</td>
<td>100</td></tr></tbody></table>

The table id will used to covert the table to chart or graph. Caption will display as the graph title. In the following code chatType is used to create the type of chart. It can be either AreaChart, LineChart, BarChart, ColumnChart or PieChart as per your requirement. There is only change in case of Pie Chart that PieChart uses only first row as a data set from the table and ignore other rows.

Create a Line Chart

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

Output:

Create a Area Chart

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

Output:

Visitors Flow

	Jan	Feb	Mar	Apr	May	Jun	Jul	Aug	Sep	Oct	Nov	Dec
2012	120	160	280	340	260	680	750	950	800	600	450	240
2011	500	600	700	750	800	800	750	600	450	350	250	100

Create a Bar Chart

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

Output:

Visitors Flow

	Jan	Feb	Mar	Apr	May	Jun	Jul	Aug	Sep	Oct	Nov	Dec
2012	120	160	280	340	260	680	750	950	800	600	450	240
2011	500	600	700	750	800	800	750	600	450	350	250	100

Create a Column Chart

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

Output:

Visitors Flow

	Jan	Feb	Mar	Apr	May	Jun	Jul	Aug	Sep	Oct	Nov	Dec
2012	120	160	280	340	260	680	750	950	800	600	450	240
2011	500	600	700	750	800	800	750	600	450	350	250	100

Create a Column Chart

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

Output:

Visitors Flow

	Jan	Feb	Mar	Apr	May	Jun	Jul	Aug	Sep	Oct	Nov	Dec
2013	120	160	280	340	260	680	750	0	0	0	0	0

Chart - Graph Setting

If you want to change the colors of the chart then you can use colors option and you can change the Title by using title option.

jQuery('#myTable').gvChart({
chartType: 'LineChart',
gvSettings: {
vAxis: {title: 'No of Visitors'},
hAxis: {title: 'Month'},
width: 720,
height: 300,
colors: ['#FF0000', '#00FF00'],
title: 'Line Chart on Visitors Flow'
}
});