JSFiddle - React, Tailwind, and code Playground

by MrTest

HTML

<script src="https://www.google.com/jsapi"></script>
 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Year');
        data.addColumn('number', 'Sales');
        data.addColumn('number', 'Expenses');
        data.addRows(4);
        data.setValue(0, 0, '2004');
        data.setValue(0, 1, 1000);
        data.setValue(0, 2, 400);
        data.setValue(1, 0, '2005');
        data.setValue(1, 1, 1170);
        data.setValue(1, 2, 460);
        data.setValue(2, 0, '2006');
        data.setValue(2, 1, 860);
        data.setValue(2, 2, 580);
        data.setValue(3, 0, '2007');
        data.setValue(3, 1, 1030);
        data.setValue(3, 2, 540);

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, title: 'Company Performance'});
      }
    </script>


<table border="0">
    <caption>2009 Employee Sales by Department</caption>
    <thead>
        <tr>
            <th scope="row" class="n-1">Month</th>
            <th class="n-2">N.o.L.</th>
            <th class="n-3">Val.</th>
            <th class="n-4">Total</th>
            <th class="n-5">Num.o.Val.Total</th>
        </tr>
    </thead>
    <tbody> <tr><td class="n-1">1</td><td class="n-2">125</td><td class="n-3">0</td><td scope="col" class="n-4">125</td><td class="n-5">0</td></tr><tr><td class="n-1">2</td><td class="n-2">125</td><td class="n-3">48.75</td><td scope="col" class="n-4">173.75</td><td class="n-5">5</td></tr><tr><td class="n-1">3</td><td class="n-2">125</td><td class="n-3">97.5</td><td scope="col" class="n-4">222.5</td><td class="n-5">10</td></tr><tr><td class="n-1">4</td><td class="n-2">125</td><td...

CSS

table { display: block; width: 96%; border-collapse: collapse; height: auto !important;}
table thead, .data table thead tr, table tbody, .data table tbody tr { width: 100%;}
table thead tr th, table tbody tr td { width: 23%; text-align: center; padding: 3px; border: 1px solid #ccc}

#chart_div { margin: 10px; width: 400px; height: 240px;}

JavaScript

/* fetch the data from the table 
   hAxis = Total Column
   vAxis = Month

*/