High Charts v2.1 Pie Chart From HTML Table - Blowsie

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

by blowsie

HTML

<script src="http://www.highcharts.com/js/highcharts.js"></script>
    <div class="WidgetContainer">
        <div style="width: 40%; height: 120px; float: left;" id="pie-ept">
        </div>
        <table id="table-ept" class="svg" style="width: 60%; float: right;">
            <caption>
                Distribution Board Test Status</caption>
             <tbody>
                <tr class="svg-green">
                    <th scope="row"><a href="#" id="table-ept-one"><span>Complete</span></a></th>
                    <td>3</td>
                    <td class="none">green</td>
                    <td class="none">table-ept-one</td>
                </tr>
                <tr class="svg-orange">
                    <th scope="row"><a href="#" id="table-ept-two"><span>Date not set</span></a></th>
                    <td>38</td>
                    <td class="none">#FFA500</td>
                    <td class="none">table-ept-two</td>
                </tr>
                <tr class="svg-red">
                    <th scope="row"><a href="#" id="table-ept-three"><span>Late</span></a></th>
                    <td>6</td>
                    <td class="none">red</td>
                    <td class="none">table-ept-three</td>
                </tr>
            </tbody>
        </table>
        <div class="clear">
        </div>
    </div>

CSS

td{border:1px solid #666}

JavaScript

var chart;
Highcharts.visualize = function (table, options) {

    // the data series
    options.series = [];
    var l = options.series.length;
    options.series[l] = {
        name: $('thead th:eq(' + (l + 1) + ')', table).text(),
        data: []
    };
    $('tbody tr', table).each(function (i) {
        var tr = this;
        var th = $('th', tr).text();
        var td0 = parseFloat($('td:eq(0)', tr).text());
        var td1 = $('td:eq(1)', tr).text();
        var td2 = $('td:eq(2)', tr).text();

        options.series[0].data.push({ name: th, y: td0, color: td1, id: td2 });
    });
    chart = new Highcharts.Chart(options);
}

function draw() {

    var table = document.getElementById('table-ept'),
   options = {
       chart: {
           renderTo: 'pie-ept',
            margin: [0, 0, 0, 0],
           defaultSeriesType: 'pie',
             plotBackgroundColor: {
                    linearGradient: [0, 0, 50, 120],
                    stops: [
                                                   [0, '#CDCDCD'],
                                                   [1, '#FFFFFF']
                                                ]
                }
       },
      credits: { enabled: false },
            title: {
                text: 'Data extracted from a HTML table in the page',
                style: { display: 'none' }
            },
            plotArea: {
                shadow: null,
                borderWidth: null,
                backgroundColor: null
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    dataLabels: {
                        enabled: false
                    }
                }
            },
            legend: { enabled: false },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.point.name + '</b>: ' + this.y;
                },
                style: {
                    //     font: 'Tahoma',
       ...