JSFiddle - React, Tailwind, and code Playground

by blineberry

HTML

<script src="https://www.google.com/jsapi"></script>
<script src="https://www.google.com/jsapi#.js"></script>
<table border="0" class="chart chart-pie" data-chart-is3D="false" data-chart-pieHole="0.4" data-chart-pieStartAngle="100">
    <caption>My Daily Activities</caption>
    <tbody>
        <tr>
            <td>Task</td>
            <td>Hours per Day</td>
        </tr>
        <tr>
            <td>Work</td>
            <td>11</td>
        </tr>
        <tr>
            <td>Eat</td>
            <td>2</td>
        </tr>
        <tr>
            <td>Commute</td>
            <td>2</td>
        </tr>
        <tr>
            <td>Watch TV</td>
            <td>2</td>
        </tr>
        <tr>
            <td>Sleep</td>
            <td>7</td>
        </tr>
    </tbody>
</table>

JavaScript

google.load("visualization", "1", {
    packages: ['corechart']
});
google.setOnLoadCallback(drawCharts);

function drawCharts() {
    $('.chart').each(function () {
        var table = $(this);

        switch (true) {
            case table.hasClass('chart-pie'):
                drawPieChart(table[0]);
                break;
            default:
                break;
        }
    });
}

function drawPieChart(table) {
    var data = google.visualization.arrayToDataTable(tableToArray(table));
    var options = {};
    var caption = $(table).find('caption')


    if (caption.length > 0) {
        options.title = caption.text();
    }
    options.is3D = $(table).data('chartIs3d');
    options.pieHole = $(table).data('chartPiehole');
    options.pieStartAngle = $(table).data('chartPiestartangle');
    console.log(options);

    $(table).wrap('<div id="table" />').remove();
    var chart = new google.visualization.PieChart($('#table')[0]);
    chart.draw(data, options);
}

function tableToArray(table) {
    var data = [];

    $(table).find('tr').each(function (i) {
        data[i] = [];

        $(this).find('th,td').each(function (j) {
            var item = $(this).text();
            if (j % 2 !== 0) {
                item = parseFloat(item);
            }

            data[i].push(item);
        });
    });

    return data;
}