Table-generated Highcharts Graph

v2

by supertrue

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;}

JavaScript

var charts = [],
    defaultOptions, options;

Highcharts.visualize = function(table, options) {

    // the categories
    options.xAxis.categories = [];

    $('tbody th', table).each(function(i) {
        options.xAxis.categories.push(this.innerHTML);
    });

    // the data series
    options.series = [];
    $('tr', table).each(function(i) {
        var tr = this;
        $('th, td', tr).each(function(j) {
            if (j > 0) { // skip first column
                if (i === 0) { // get the name and init the series
                    options.series[j - 1] = {
                        name: this.innerHTML,
                        data: []
                    };
                } else { // add values
                    options.series[j - 1].data.push(parseFloat(this.innerHTML));
                }
            }
        });
    });

    charts[charts.length] = new Highcharts.Chart(options);
};

defaultOptions = {
    chart: {
        defaultSeriesType: 'line'
    },
    credits: {
        enabled: 0
    },
    xAxis: {},
    yAxis: {
        title: {
            text: 'NOK'
        }
    },
    tooltip: {
        formatter: function() {
            return '<b>' + this.series.name + '</b><br/>' + this.y + ' ' + this.x.toLowerCase();
        }
    },
    symbols: 'circle'
};

options0 = {
    chart: {
        renderTo: 'container-outcome',
        width: 600
    },
    title: {
        text: 'Outcome by month'
    }
};
options1 = {
    chart: {
        renderTo: 'container-income',
        width: 600
    },
    title: {
        text: 'Income by month'
    }
};
options2 = {
    chart: {
        renderTo: 'container-comparison',
        defaultSeriesType: 'line',
        width: 600
    },
    title: {
        text: 'Income and outcome compared'
    },
    yAxis: {
        title: {
            text: 'NOK',
            margin: 50
        },
        plotLines: [{
            color: '#FF0000',
            width: 1,
            value: 0
        }, {
           ...