jquery on the use of graphical reports implementation code _jquery

Effect chart

Online Demo http://demo.jb51.net/js/jquery_baobiao/index.html
Package Download Http://xiazai.jb51.net/201101/yuanma/jquery_baobiao.rar

Copy Code code as follows:

<script type= "Text/javascript" >
$ (function () {
$ ("#tabs"). tabs ();
});
</script>

<script type= "Text/javascript" >
Gvchartinit ();
JQuery (document). Ready (function () {
JQuery (' #myTable1 '). Gvchart ({
ChartType: ' AreaChart ',
Gvsettings: {
Vaxis: {title: ' Amount '},
Haxis: {title: ' Month '},
width:720,
height:300
}
});

JQuery (' #myTable2 '). Gvchart ({
ChartType: ' Linechart ',
Gvsettings: {
Vaxis: {title: ' Amount '},
Haxis: {title: ' Month '},
width:720,
height:300
}
});
JQuery (' #myTable3 '). Gvchart ({
ChartType: ' Barchart ',
Gvsettings: {
Vaxis: {title: ' Amount '},
Haxis: {title: ' Month '},
width:720,
height:300
}
});

JQuery (' #myTable4 '). Gvchart ({
ChartType: ' Columnchart ',
Gvsettings: {
Vaxis: {title: ' Amount '},
Haxis: {title: ' Month '},
width:720,
height:300
}
});
JQuery (' #myTable5 '). Gvchart ({
ChartType: ' Piechart ',
Gvsettings: {
Vaxis: {title: ' Amount '},
Haxis: {title: ' Month '},
width:720,
height:300
}
});
});
</script>

CSS Styles

Copy Code code as follows:

<style type = "Text/css" >
Body
{
Text-align:center;
Font-family:arial, Sans-serif;
font-size:12px;
}
A
{
Text-decoration:none;
Font-weight:bold;
Color: #555;
}
A:hover
{
Color: #000;
}
Div.easyui-tabs
{
Margin:auto;
Text-align:left;
width:720px;
}
Div.clean
{
border:1px solid #850000;
}
. clean TD,. Clean TH
{
border:2px solid #bbb;
Background: #ddd;
padding:5px 10px;
Text-align:center;
border-radius:2px;
}
. Clean table
{
Margin:auto;
margin-top:15px;
margin-bottom:15px;
}
. Clean Caption
{
Font-weight:bold;
}
. Gvchart,. Clean
{
border:2px solid #850000;
border-radius:5px;
-moz-border-radius:10px;
width:720px;
Margin:auto;
margin-top:20px;
}
Pre
{
Background: #eee;
padding:10px;
border-radius:10px;
-moz-border-radius:10px;
}
</style>

Html

Copy Code code as follows:

<div class= "Easyui-tabs" fit= "true" plain= "true" style= "height:500px;width:800px;" >
<div title= "Title1" style= "padding:10px;" >
&LT;H2 id= "Area" >
Regional reports <table id= ' MyTable1 ' >
<caption>
Report Analysis </caption>
<thead>
<tr>
<th>
</th>
<th>
January
</th>
<th>
February
</th>
<th>
March
</th>
<th>
April
</th>
<th>
May
</th>
<th>
June
</th>
<th>
July
</th>
<th>
August
</th>
<th>
September
</th>
<th>
October
</th>
<th>
November
</th>
<th>
December
</th>
</tr>
</thead>
<tbody>
<tr>
<th>
Actually completed
</th>
<td>
900
</td>
<td>
600
</td>
<td>
327
</td>
<td>
359
</td>
<td>
376
</td>
<td>
398
</td>
<td>
60</td>
<td>
50</td>
<td>
404</td>
<td>
700</td>
<td>
200</td>
<td>
500</td>
</tr>
<tr>
<th>
Planning tasks
</th>
<td>
1167
</td>
<td>
1110
</td>
<td>
691
</td>
<td>
165
</td>
<td>
135
</td>
<td>
157
</td>
<td>
139
</td>
<td>
136
</td>
<td>
938
</td>
<td>
1120
</td>
<td>
55
</td>
<td>
55
</td>
</tr>
</tbody>
</table>
</div>
<div title= "Title2" style= "padding:10px;" >
&LT;H2 id= "line" >
Linechart<table id= ' MyTable2 ' >
<caption>
Report Analysis </caption>
<thead>
<tr>
<th>
</th>
<th>
January
</th>
<th>
February
</th>
<th>
March
</th>
<th>
April
</th>
<th>
May
</th>
<th>
June
</th>
<th>
July
</th>
<th>
August
</th>
<th>
September
</th>
<th>
October
</th>
<th>
November
</th>
<th>
December
</th>
</tr>
</thead>
<tbody>
<tr>
<th>
Actually completed
</th>
<td>
900
</td>
<td>
600
</td>
<td>
327
</td>
<td>
359
</td>
<td>
376
</td>
<td>
398
</td>
<td>
60</td>
<td>
50</td>
<td>
404</td>
<td>
700</td>
<td>
200</td>
<td>
500</td>
</tr>
<tr>
<th>
Planning tasks
</th>
<td>
1167
</td>
<td>
1110
</td>
<td>
691
</td>
<td>
165
</td>
<td>
135
</td>
<td>
157
</td>
<td>
139
</td>
<td>
136
</td>
<td>
938
</td>
<td>
1120
</td>
<td>
55
</td>
<td>
55
</td>
</tr>
</tbody>
</table>
</div>
<div title= "Title3" style= "padding:10px;" >

Barchart<table id= ' MyTable3 ' >
<caption>
Report Analysis </caption>
<thead>
<tr>
<th>
</th>
<th>
January
</th>
<th>
February
</th>
<th>
March
</th>
<th>
April
</th>
<th>
May
</th>
<th>
June
</th>
<th>
July
</th>
<th>
August
</th>
<th>
September
</th>
<th>
October
</th>
<th>
November
</th>
<th>
December
</th>
</tr>
</thead>
<tbody>
<tr>
<th>
Actually completed
</th>
<td>
900
</td>
<td>
600
</td>
<td>
327
</td>
<td>
359
</td>
<td>
376
</td>
<td>
398
</td>
<td>
60</td>
<td>
50</td>
<td>
404</td>
<td>
700</td>
<td>
200</td>
<td>
500</td>
</tr>
<tr>
<th>
Planning tasks
</th>
<td>
1167
</td>
<td>
1110
</td>
<td>
691
</td>
<td>
165
</td>
<td>
135
</td>
<td>
157
</td>
<td>
139
</td>
<td>
136
</td>
<td>
938
</td>
<td>
1120
</td>
<td>
55
</td>
<td>
55
</td>
</tr>
</tbody>
</table>
</div>
<div title= "Title4" style= "padding:10px;" >
&LT;H2 id= "column" >
Columnchart<table id= ' myTable4 ' >
<caption>
Report Analysis </caption>
<thead>
<tr>
<th>
</th>
<th>
January
</th>
<th>
February
</th>
<th>
March
</th>
<th>
April
</th>
<th>
May
</th>
<th>
June
</th>
<th>
July
</th>
<th>
August
</th>
<th>
September
</th>
<th>
October
</th>
<th>
November
</th>
<th>
December
</th>
</tr>
</thead>
<tbody>
<tr>
<th>
Actually completed
</th>
<td>
900
</td>
<td>
600
</td>
<td>
327
</td>
<td>
359
</td>
<td>
376
</td>
<td>
398
</td>
<td>
60</td>
<td>
50</td>
<td>
404</td>
<td>
700</td>
<td>
200</td>
<td>
500</td>
</tr>
<tr>
<th>
Planning tasks
</th>
<td>
1167
</td>
<td>
1110
</td>
<td>
691
</td>
<td>
165
</td>
<td>
135
</td>
<td>
157
</td>
<td>
139
</td>
<td>
136
</td>
<td>
938
</td>
<td>
1120
</td>
<td>
55
</td>
<td>
55
</td>
</tr>
</tbody>
</table>
</div>
<div title= "Title5" style= "padding:10px;" >
&LT;H2 id= "Pie" >
Piechart<table id= ' myTable5 ' >
<caption>
Report Analysis </caption>
<thead>
<tr>
<th>
</th>
<th>
January
</th>
<th>
February
</th>
<th>
March
</th>
<th>
April
</th>
<th>
May
</th>
<th>
June
</th>
<th>
July
</th>
<th>
August
</th>
<th>
September
</th>
<th>
October
</th>
<th>
November
</th>
<th>
December
</th>
</tr>
</thead>
<tbody>
<tr>
<th>
2010
</th>
<td>
125
</td>
<td>
185
</td>
<td>
327
</td>
<td>
359
</td>
<td>
376
</td>
<td>
398
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
<td>
0
</td>
</tr>
</tbody>
</table>
</div>
</div>

Add Styles and Frames Gallery

Copy Code code as follows:

<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<script type= "Text/javascript" src= "Http://www.google.com/jsapi" ></script>
<script src= "Jquery-1.4.4.min.js" type= "Text/javascript" ></script>
<script src= "Jquery.gvchart-1.0.1.min.js" type= "Text/javascript" ></script>
<link href= ". /demo/js/themes/default/tabs.css "rel=" stylesheet "type=" Text/css "/>"
<link href= ". /demo/js/themes/icon.css "rel=" stylesheet "type=" Text/css "/>"
<script src= ". /demo/js/jquery.easyui.min.js "type=" Text/javascript "></script>

Later I will share more good things with you, thank you for your support.
Code package download in the text