Charting Data
The table below will be used to generate rich graphs and charts on-the-fly.
All you need to do is apply the class of chart you want to generate to your table and voila!
|
Jan |
Feb |
Mar |
Apr |
May |
| Data row 1 |
12 |
31 |
40 |
61 |
72 |
| Data row 2 |
3 |
5 |
33 |
64 |
21 |
| Data row 3 |
20 |
41 |
10 |
50 |
22 |
Area chart
|
Jan |
Feb |
Mar |
Apr |
May |
| Data row 1 |
12 |
31 |
40 |
61 |
72 |
| Data row 2 |
3 |
5 |
33 |
64 |
21 |
| Data row 3 |
20 |
41 |
10 |
50 |
22 |
<table class="areachart">
Line chart
|
Jan |
Feb |
Mar |
Apr |
May |
| Data row 1 |
12 |
31 |
40 |
61 |
72 |
| Data row 2 |
3 |
5 |
33 |
64 |
21 |
| Data row 3 |
20 |
41 |
10 |
50 |
22 |
<table class="linechart">
Bar Chart
|
Jan |
Feb |
Mar |
Apr |
May |
| Data row 1 |
12 |
31 |
40 |
61 |
72 |
| Data row 2 |
3 |
5 |
33 |
64 |
21 |
| Data row 3 |
20 |
41 |
10 |
50 |
22 |
<table class="barchart">
Pie chart
|
Jan |
Feb |
Mar |
Apr |
May |
| Data row 1 |
12 |
31 |
40 |
61 |
72 |
| Data row 2 |
3 |
5 |
33 |
64 |
21 |
| Data row 3 |
20 |
41 |
10 |
50 |
22 |
<table class="piechart">
Using Tabs
The Tab system is also very easy to use. Simply add a link to the tab list and create a div with the tab ID to get the ball rolling.
<ul>
<li class="current"><a href="#tabone">Tab One</a></li>
<li><a href="#tabtwo">Tab Two</a></li>
<li><a href="#tabthree">Another Tab</a></li>
</ul>
<div id="tabone" class="panel">
Content
</div>
<div id="tabtwo" class="panel hidden">
Content
</div>
<div id="tabthree" class="panel hidden">
Content
</div>