Table-generated Highcharts Graph

v2

HTML

<script src="http://www.gingahmail.com/economics/highcharts.js"></script>
<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 21, 2005</th>
            <td>3943</td>
            <td>3049</td>
            <td>1500
            </td>
        </tr>
        <tr>
            <th>September 6, 2009</th>
            <td>3943</td>
            <td>3049</td>
            <td>1500
            </td>
        </tr>
        <tr>
            <th>October 28, 2010</th>
            <td>3943</td>
            <td>3049</td>
            <td>1500</td>
        </tr>
    </tbody>
</table>

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) {
        var date = Date.parse(this.innerHTML);
        console.log(date);
        options.xAxis.categories.push(date);
    });

    // 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: {
        type: 'datetime'
    },
    yAxis: {
        title: {
            text: 'NOK'
        }
    },
//    tooltip: {
  //      formatter: function() {
            // return '<b>' + this.series.name + '</b><br/>' + this.y + ' ' + this.x.toLowerCase();
            
    //    }
 //   },
    symbols: 'circle'
};
options1 = {
    chart: {
        renderTo: 'container-income',
        width: 600
    },
    title: {
        text: 'Income by month'
    }
};


$(document).ready(function() {
    // Outcome Graph
    options = Highcharts.merge(defaultOptions, options1);
    Highcharts.visualize($('table#income'), options);
});