fastread homefastrread library fastread menu

jQuery : jQuery charts and Graphs - gvCharts Plugin

Tutorial by:Sweta      Date: 2016-04-14 03:13:49

❰ Previous Next ❱

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 Flow20122011JanFebMarAprMayJunJulAugSepOctNovDec02505007501,000MonthNo of Visitors
X labels 2012 2011
Jan 120 500
Feb 160 600
Mar 280 700
Apr 340 750
May 260 800
Jun 680 800
Jul 750 750
Aug 950 600
Sep 800 450
Oct 600 350
Nov 450 250
Dec 240 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 Flow20122011JanFebMarAprMayJunJulAugSepOctNovDec02505007501,000MonthNo of Visitors
X labels 2012 2011
Jan 120 500
Feb 160 600
Mar 280 700
Apr 340 750
May 260 800
Jun 680 800
Jul 750 750
Aug 950 600
Sep 800 450
Oct 600 350
Nov 450 250
Dec 240 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 Flow2012201102505007501,000JanFebMarAprMayJunJulAugSepOctNovDecMonthNo of Visitors
X labels 2012 2011
Jan 120 500
Feb 160 600
Mar 280 700
Apr 340 750
May 260 800
Jun 680 800
Jul 750 750
Aug 950 600
Sep 800 450
Oct 600 350
Nov 450 250
Dec 240 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 Flow20122011JanFebMarAprMayJunJulAugSepOctNovDec02505007501,000MonthNo of Visitors
X labels 2012 2011
Jan 120 500
Feb 160 600
Mar 280 700
Apr 340 750
May 260 800
Jun 680 800
Jul 750 750
Aug 950 600
Sep 800 450
Oct 600 350
Nov 450 250
Dec 240 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 FlowJanFebMarAprMayJunJul10.8%13.1%10%29%26.3%
X labels 2013
Jan 120
Feb 160
Mar 280
Apr 340
May 260
Jun 680
Jul 750
Aug 0
Sep 0
Oct 0
Nov 0
Dec 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'
}
});

❰ Previous Next ❱


jQuery

Submit Your Thought, Tutorial, Articls etc.

Submit Your Information India's Number one online promotion website