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:


Visitors Flow
JanFebMarAprMayJun JulAugSepOctNovDec
2012120160280340260 680750950800600450 240
2011500600700750800 800750600450350250 100

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
JanFebMarAprMayJun JulAugSepOctNovDec
2012120160280340260 680750950800600450 240
2011500600700750800 800750600450350250 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
JanFebMarAprMayJun JulAugSepOctNovDec
2012120160280340260 680750950800600450 240
2011500600700750800 800750600450350250 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
JanFebMarAprMayJun JulAugSepOctNovDec
2012120160280340260 680750950800600450 240
2011500600700750800 800750600450350250 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
JanFebMarAprMayJun JulAugSepOctNovDec
2013120160280340260 6807500000 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'
}
});
Download File

Total Downloads: 1975
Top