Table-generated Highcharts Graph
v2
HTML
<script src="http://www.gingahmail.com/economics/highcharts.js"></script>
<div id="container-outcome"></div>
<table id="outcome" class="tablesorter">
<thead>
<tr>
<th>Month</th>
<th>Rent</th>
<th>Power</th>
<th>Common Food</th>
<th>Personal Food</th>
<th>Gym</th>
<th>Travel</th>
<th>Supplies</th>
<th>Beer</th>
<th>Clothes/Other
</th>
</tr>
</thead>
<tbody>
<tr>
<th>August, 2010</th>
<td>3250</td>
<td>0</td>
<td>600</td>
<td>500</td>
<td>200</td>
<td>150</td>
<td>280</td>
<td>1000</td>
<td>662
</td>
</tr>
<tr>
<th>September, 2010</th>
<td>4500</td>
<td>0</td>
<td>600</td>
<td>600</td>
<td>200</td>
<td>150</td>
<td>280</td>
<td>1000</td>
<td>662
</td>
</tr>
<tr>
<th>October, 2010</th>
<td>4500</td>
<td>500</td>
<td>600</td>
<td>600</td>
<td>200</td>
<td>150</td>
<td>280</td>
<td>1000</td>
<td>662
</td>
</tr>
</tbody>
</table>
<br /><br />
<div id="container-income"></div>
<table id="income" class="tablesorter">
<thead>
<tr>
<th>Month</th>
<th>Loan</th>
<th>Scholarship</th>
<th>Other
</th>
</tr>
</thead>
<tbody>
<tr>
<th>August, 2010</th>
<td>3943</td>
<td>3049</td>
<td>1500
</td>
</tr>
<tr>
<th>September, 2010</th>
<td>3943</td>
<td>3049</td>
<td>1500
</td>
</tr>
<tr>
<th>October,...
CSS
body {
background: #6e3009;
}
table.tablesorter {
font-family: arial;
background-color: #cdcdcd;
margin: 10px 0pt 15px;
font-size: 8pt;
width: 100%;
text-align: left;
color: #000000;
}
table.tablesorter thead th {
background-color: #e6eeee;
border: 1px solid #ffffff;
padding: 4px;
}
table.tablesorter tbody th {
background-color: #dadede;
border: 1px solid #ffffff;
padding: 4px;
}
table.tablesorter tbody td {
color: #3d3d3d;
padding: 4px;
background-color: #ffffff;
}
table.tablesorter tbody tr.odd td {background-color:#f0f0f6;}