High Charts v1.25 Pie Chart From HTML Table - Blowsie

High Charts pie chart from data table for hc v1.25

by blowsie

HTML

<script src="http://www.abuilding.co.uk/Scripts/highcharts.js"></script>
    <div class="WidgetContainer">
        <div style="width: 40%; height: 120px; float: left; background:yellow;padding:1px" id="pie-ept">
        </div>
        <table id="table-ept" class="svg" style="width: 50%; float: right;">
            <caption>
                Distribution Board Test Status</caption>
            <tfoot>
                <tr>
                    <th scope="row">Total</th>
                    <td colspan="3">171</td>
                </tr>
            </tfoot>
            <tbody>
                <tr class="svg-green">
                    <th scope="row"><a href="#" id="table-ept-one"><span>Complete</span></a></th>
                    <td>90</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>20</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>61</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

function draw() {
    if ($('#pie-ept').length > 0) {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'pie-ept',
                margin: [0, 0, 0, 0],
                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',
                    padding: '5px 0px 5px 5px',
                    fontSize: '11px'
                },
                borderRadius: 3
            },
            series: [{
                type: 'pie',
                name: 'Value',
                data: 'table-ept',
                // define a custom data parser function for both series
                dataParser: function (data) {
                    var table = document.getElementById(data),
                    // get the data rows from the tbody element
                            rows = table.getElementsByTagName('tbody')[0].getElementsByTagName('tr'),
                    // define the...