Rendering

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

<The script type="text/javascript" >
gvChartInit ();
jQuery(document).ready(function() {
jQuery('#myTable1').gvChart({
chartType: 'AreaChart',
gvSettings: {
vAxis: { title: '金额' },
hAxis: { title: '月份' },
width: 720,
height: 300
}
});

jQuery('#myTable2').gvChart({
chartType: 'LineChart',
gvSettings: {
vAxis: { title: '金额' },
hAxis: { title: '月份' },
width: 720,
height: 300
}
});
jQuery('#myTable3').gvChart({
chartType: 'BarChart',
gvSettings: {
vAxis: { title: '金额' },
hAxis: { title: '月份' },
width: 720,
height: 300
}
});

jQuery('#myTable4').gvChart({
chartType: 'ColumnChart',
gvSettings: {
vAxis: { title: '金额' },
hAxis: { title: '月份' },
width: 720,
height: 300
}
});
jQuery('#myTable5').gvChart({
chartType: 'PieChart',
gvSettings: {
vAxis: { title: '金额' },
hAxis: { title: '月份' },
width: 720,
height: 300
}
});
});
</script>

CSS

<Style type="text/CSS" >
body
{
text - align: center;
the font-family: Arial, sans-serif.
the font - size: 12px;
}

{a
text - decoration: none.
the font - weight: bold;
color: #555;
}
a: hover
{
color: #000;

} div. Easyui - tabs
{
margin: auto;
text - align: left;
width: 720px;

} div. The clean
{
border: 1px solid #850000;

}. The clean td, the clean th
{
border: 2px solid #BBB;
background: #DDD;
the padding: 5px 10px;
text - align: center;
border - the radius: 2px;

}. The clean table
{
margin: auto;
margin - top: 15px;
margin - bottom: 15px;

}. The clean caption
{
the font - weight: bold;

} gvChart,. The clean
{
border: 2px solid #850000;
border - the radius: 5px;
- moz - border - the radius: 10px;
width: 720px;
margin: auto;
margin - top: 20px;

} pre
{
background: #eee;
the padding: 10px;
border - the radius: 10px;
- moz - border - the radius: 10px;

} </style>

Html

<Div class="easyui - tabs fit"="true" plain="true" style="height: 500px; width: 500px;" >
<Div title="Title1" style="padding: 10px;" >
<The h2 id="area" >
regional report </h2 >
<The table id='myTable1 >
<Caption>
statement analysis </caption>
<Thead>
<Tr>
<Th>
</th>
<Th>

</th>
<Th>

February </th>
<Th>

march </th>
<Th>

April </th>
<Th>

may </th>
<Th>

in June </th>
<Th>

July </th>
<Th>

August </th>
<Th>

September </th>
<Th>

in October </th>
<Th>

in 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> Plan

task </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;" >
<The h2 id="line" >
LineChart <The table id='myTable2 >
<Caption>
statement analysis </caption>
<Thead>
<Tr>
<Th>
</th>
<Th>

</th>
<Th>

February </th>
<Th>

march </th>
<Th>

April </th>
<Th>

may </th>
<Th>

in June </th>
<Th>

July </th>
<Th>

August </th>
<Th>

September </th>
<Th>

in October </th>
<Th>

in 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> Plan

task </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;" >
<The h2 id="bar" >
BarChart <The table id='myTable3 >
<Caption>
statement analysis </caption>
<Thead>
<Tr>
<Th>
</th>
<Th>

</th>
<Th>

February </th>
<Th>

march </th>
<Th>

April </th>
<Th>

may </th>
<Th>

in June </th>
<Th>

July </th>
<Th>

August </th>
<Th>

September </th>
<Th>

in October </th>
<Th>

in 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> Plan

task </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;" >
<The h2 id="column" >
ColumnChart <The table id='myTable4 >
<Caption>
statement analysis </caption>
<Thead>
<Tr>
<Th>
</th>
<Th>

</th>
<Th>

February </th>
<Th>

march </th>
<Th>

April </th>
<Th>

may </th>
<Th>

in June </th>
<Th>

July </th>
<Th>

August </th>
<Th>

September </th>
<Th>

in October </th>
<Th>

in 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> Plan

task </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;" >
<The h2 id="pie" >
PieChart <The table id='myTable5 >
<Caption>
statement analysis </caption>
<Thead>
<Tr>
<Th>
</th>
<Th>

</th>
<Th>

February </th>
<Th>

march </th>
<Th>

April </th>
<Th>

may </th>
<Th>

in June </th>
<Th>

July </th>
<Th>

August </th>
<Th>

September </th>
<Th>

in October </th>
<Th>

in 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 style and framework library

<Meta HTTP - equiv="content-type" Content="text/HTML; charset=utf-8"/>
<The script type="text/javascript" SRC="http://www.google.com/jsapi" ></script>
<Script SRC="http://www.script-home.com//article/jquery-1.4.4.min.js" type="text/javascript" ></script>
<Script SRC="http://www.script-home.com//article/jquery.gvChart-1.0.1.min.js" type="text/javascript" ></script>
<The link href="http://www.script-home.com//Demo/js/themes/default/tabs.css" rel="stylesheet" type="text/CSS"/>
<The link href="http://www.script-home.com//Demo/js/themes/icon.css" rel="stylesheet" type="text/CSS"/>
<Script SRC="http://www.script-home.com//Demo/js/jquery.easyui.min.js" type="text/javascript" ></script>

I will share with you more good things later, thank you for your support.
the code download


This concludes the body part