Table-generated Highcharts Graph

v2

by supertrue

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container-outcome"></div>
<table id="outcome" class="tablesorter">
    <thead>
<tr>
<th scope="col"></th>
<th scope="col">Asian American</th>
<th scope="col">White</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Less than High School</th>
<td>10.9%</td>
<td>15.0%</td>
</tr>
<tr>
<th scope="row">High School diploma or GED</th>
<td>7.7%</td>
<td>9.0%</td>
</tr>
<tr>
<th scope="row">Some College</th>
<td>8.1%</td>
<td>7.4%</td>
</tr>
<tr>
<th scope="row">Bachelor's Degree</th>
<td>6.8%</td>
<td>4.7%</td>
</tr>
<tr>
<th scope="row">Advanced degree</th>
<td>3.7%</td>
<td>3.2%</td>
</tr>
</tbody>
</table>

CSS

body {
    font-size: 10pt;
}

table.tablesorter {
    background-color: #cdcdcd;
}

td, th {
  padding: 4px;  
}

table.tablesorter thead th {
    background-color: #e6eeee;
    border: 1px solid #ffffff;
}
table.tablesorter tbody th {
    background-color: #dadede;
    border: 1px solid #ffffff;
}

table.tablesorter tbody td {
    color: #3d3d3d;
    background-color: #ffffff;
}

JavaScript

var charts = [],
    defaultOptions, options;

Highcharts.setOptions({
    chart: {
        style: {
            fontFamily: 'Georgia, Myriad Pro',
        }
    },
    colors: [
'#12334e', // mso dark navy
'#265e8b', // mso dark blue
'#5f96c4', // mso medium blue
'#a5c2dc', // mso light blue
            '#4572A7', 
    '#AA4643', 
    '#89A54E', 
    '#80699B', 
    '#3D96AE', 
    '#DB843D', 
    '#92A8CD', 
    '#A47D7C', 
    '#B5CA92'
]
});

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 = {
        style: {
            fontFamily: 'Georgia, Myriad Pro',
        },

    plotOptions: {
        series: {
            pointPadding: 0,
            groupPadding: .1,
            borderWidth: 1, 
            shadow: true
        }
    },

    chart: {
        defaultSeriesType: 'column'
    },
    credits: {
        enabled: 0
    },
        legend: {
            borderWidth: 0,
            layout: 'vertical',
            backgroundColor: '#fff',
            itemStyle: {
                cursor: 'pointer',
                padding: '8px',
                // color: '#3E576F'
            },
        align: 'right',
        verticalAlign: 'top',
       ...