High Charts v2.1 Stacked Columns From HTML Table - Blowsie

High Charts Columns chart from data table for hc v2.1

HTML

<script src="http://www.highcharts.com/js/highcharts.js"></script>
<div class="WidgetContainer">
    <div style="height: 300px;" id="pie-ept">
    </div>
    
    <table id="table-ept" class="svg"><caption>Top 20 Tech Auth (Average Money Remaining)</caption><thead><tr><th scope="row">Company</th><th>Average Money £ Remaining</th><th>Count Completed Jobs</th></tr></thead><tbody><tr><th scope="row">MIT</th><td>392.7</td><td>2</td></tr><tr><th scope="row">LEA</th><td>356.15</td><td>2</td></tr><tr><th scope="row">SKA</th><td>337.45</td><td>2</td></tr><tr><th scope="row">MIT</th><td>318.75</td><td>2</td></tr><tr><th scope="row">MIT</th><td>290.7</td><td>4</td></tr><tr><th scope="row">A </th><td>278.8</td><td>1</td></tr><tr><th scope="row">MAY</th><td>248.995</td><td>2</td></tr><tr><th scope="row">ISS</th><td>246.5</td><td>2</td></tr><tr><th scope="row">SPI</th><td>239.000909090909</td><td>11</td></tr><tr><th scope="row">SOU</th><td>227.8</td><td>1</td></tr><tr><th scope="row">OSB</th><td>227.8</td><td>2</td></tr><tr><th scope="row">MOR</th><td>219.3</td><td>2</td></tr><tr><th scope="row">C W</th><td>203.46</td><td>1</td></tr><tr><th scope="row">HIL</th><td>200.6</td><td>1</td></tr><tr><th scope="row">KIE</th><td>188.275</td><td>4</td></tr><tr><th scope="row">CRO</th><td>182.466666666667</td><td>6</td></tr><tr><th scope="row">WIL</th><td>179.714285714286</td><td>7</td></tr><tr><th scope="row">SWI</th><td>173.4</td><td>1</td></tr><tr><th scope="row">TRA</th><td>171.7</td><td>1</td></tr><tr><th scope="row">BOU</th><td>168.570555555556</td><td>18</td></tr></tbody></table>
    
    <div class="clear"></div>
    
    <table id="table-ept" class="svg"><caption>Worst 20 Tech Auth (Average Money Remaining)</caption><thead><tr><th scope="row">Company</th><th>Average Money £ Remaining</th><th>Count Completed Jobs</th></tr></thead><tbody><tr><th scope="row">BUR</th><td>-83.985</td><td>2</td></tr><tr><th scope="row">EVA</th><td>24.53</td><td>1</td></tr><tr><th...

CSS

td, th{border:1px solid #666}

JavaScript

var chart;
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));
                }
            }
        });
    });

    var chart = new Highcharts.Chart(options);
}
var table = document.getElementById('datatable'),
    options = {
        chart: {
            renderTo: 'pie-ept',
            defaultSeriesType: 'column'
        },
        title: {
            text: null
        },
        xAxis: {},
        yAxis: {
            title: {
                text: 'Units'
            }
        },
        tooltip: {
            formatter: function() {
                return '<b>' + this.series.name + '</b><br/>' + this.y + ' ' + this.x.toLowerCase();
            }
        }
        // plotOptions: {
        //   column: {
        //       stacking: 'normal'
        //    }
        ///   }
    };


Highcharts.visualize(table, options);