JSFiddle - React, Tailwind, and code Playground

by seefeld

HTML

<table id="myTable">
   <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Week 1</th>
            <th scope="col">Week 2</th>
            <th scope="col">Week 3</th>
            <th scope="col">Week 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td scope="row">Some Data 1 </td>
            <td>33.95%</td>
            <td>11.99%</td>
            <td>1.96%</td>
            <td>0.00%</td>
        </tr>
        <tr>
            <td scope="row">Some Data 1 </td>
            <td>40.68%</td>
            <td>16.66%</td>
            <td>0.93%</td>
            <td>1.21%</td>
        </tr>
    </tbody>
</table>

<div id="div"> </div>

CSS

body { padding: 20px;}
table { width: 350px;}
table th, table td {border: 1px solid #ddd; text-align: center;}

JavaScript

$(function() {



    var tableData = $('#myTable').map(function() {

        
        $('tr:first-child', this).each( function(){
        console.log("cos");
        
        });
        
        
        var RowData = $('tbody tr ', this).find('td:not(:first-child)').map(function() {
            return $(this).html();
        }).get();
        
        /*
        var HeadData = $('thead tr ', this).find('td:not(:first-child)').map(function() {
            return $(this).html();
        }).get();
        */
        
         var HeadData = "map";

        return {
            row: RowData,
            test: HeadData
        };

    }).get();
    console.log(tableData);

});


var tableData = [{
    name: 'Week 1',
    data: [17, 31]},
{
    name: 'Week 2',
    data: [13, 16]},
{
    name: 'Week 3',
    data: [9, 94]},
{
    name: 'Week 4',
    data: [93, 14]}];


$(function() {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column'
            },
            title: {
                text: 'Extracts May 2012'
            },
            xAxis: {
                categories: ['Product 1', 'Product 2', 'Product 3', '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:...