JSFiddle - React, Tailwind, and code Playground

by cgtrman

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

<table id="datatable" border=1>
    <thead>
        <tr>
            <th>Status</th>
            <th>Qty</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Writing</th>
            <td>3</td>
        </tr>
        <tr>
            <th>Editing</th>
            <td>2</td>
        </tr>
        <tr>
            <th>Pink Team</th>
            <td>5</td>
        </tr>
        <tr>
            <th>Gold Team</th>
            <td>1</td>
        </tr>
        <tr>
            <th>Final</th>
            <td>2</td>
        </tr>
    </tbody>
</table>

JavaScript

/**
 * Visualize an HTML table using Highcharts. The top (horizontal) header
 * is used for series names, and the left (vertical) header is used
 * for category names. This function is based on jQuery.
 * @param {Object} table The reference to the HTML table to visualize
 * @param {Object} options Highcharts options
 */
Highcharts.visualize = function (table, options) {
    // the categories
	var statusNames = [];
	$('tbody th', table).each(function (i) 
	{
    	statusNames.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({name: statusNames[i - 1], y: parseFloat(this.innerHTML)});
                }
            }
        });
    });

    var chart = new Highcharts.Chart(options);
}

var table = document.getElementById('datatable'),
    options = {
        chart: {
            renderTo: 'container',
            type: 'pie'
        },
        title: {
            text: 'Data extracted from a HTML table in the page'
        },
        xAxis: {},
        yAxis: {
            title: {
                text: 'Units'
            }
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' + this.y + ' ' + this.point.name;
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                   ...