JSFiddle - React, Tailwind, and code Playground

by seefeld

JavaScript

$(document).ready(function() {






    var tableData = $('table th:not(:nth-child(1))').map(function(i) {

        var $th = $(this);


        var $cel = $.map(
        $('td:nth-child(' + (i + 2) + ')').each(function() {
            $(this);
        }).text().split('%').slice(0, -1), function(value) {
            return parseFloat(value);
        });

        return {
            name: $th.text(),
            data: $cel
        };


    }).get();

    console.log(tableData);
    var chart;
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'column'
        },
        title: {
            text: 'Extracts May 2012'
        },
        xAxis: {
            categories: ['Product 4', 'Product 5'],
            title: {
                text: null
            }
        },
        yAxis: {
            min: 0,
            max: 100,
            title: {
                text: '%',
                align: 'high'
            },
            labels: {
                overflow: 'justify'
            }
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                }
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -70,
            y: 10,
            floating: true,
            borderWidth: 1,
            backgroundColor: '#FFFFFF',
            shadow: true
        },
        credits: {
            enabled: false
        },
        series: tableData
    });

});