JSFiddle - React, Tailwind, and code Playground

by vivoid

HTML

<script src="https://www.google.com/jsapi"></script>
 

  <body>


    <div id="chart_div" style="width: auto; height: 600px;"></div>
     

      
  </body>

CSS

body{margin:20px; padding:0px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#b5b5b5;}

a{border:0px; outline:none; color:orange}

#wrapper{width:95%; margin:auto; padding:15px 0px;}

.block{padding:10px 0px; border-bottom:0px groove #b5b5b5;}

h2{font-size:24px; color:grey; margin:10px 0px; font-weight:normal; font-family: 'Quicksand',sans-serif;}

.price{font-size:18px; color:#fff; background:grey; padding:3px 5px;}

.valid{color:#000; text-decoration:underline;}

.terms{margin-bottom:0px;color:#000; text-decoration:underline;}

ul{list-style:square; margin:3px 0px; font-size:11px; font-style:italic;}

JavaScript

google.load("visualization", "1", { packages: ["corechart"] }); google.setOnLoadCallback(drawChart); function drawChart() {var data = google.visualization.arrayToDataTable([ [
                    'Date',
                    'Total Users to date',
                    'Downloads (All)',
                    'Downloads (Android)',
                    'Downloads (iOS)',
                    'Daily Users (All)',
                    'Daily Users (Android)',
                    'Daily Users (iOS)',
                    'App Opens',
                    'Bookings Made',
                    'Pushes Sent', 
                    'Referrals Made'
  
                    ],['2013-06-02',2,1,0,1,2,0,2,5,0,0,0],['2013-06-03',2,0,0,0,1,0,1,3,0,0,0],['2013-06-04',5,3,1,2,4,1,3,28,0,0,0],['2013-06-05',7,2,0,2,3,0,3,16,0,0,0],['2013-06-06',9,2,0,2,2,0,2,5,0,0,0],['2013-06-07',15,6,2,4,6,2,4,10,1,0,0],['2013-06-08',15,0,0,0,0,0,0,0,0,0,0],['2013-06-09',20,5,0,5,5,0,5,11,0,0,0],['2013-06-10',20,0,0,0,0,0,0,0,0,0,0],['2013-06-11',21,1,0,1,3,0,3,5,0,0,0] ]);var chart = new google.visualization.LineChart(document.getElementById('chart_div'));				
    var columns = [];
    var series = {};
    for (var i = 0; i < data.getNumberOfColumns(); i++) {
        columns.push(i);
        if (i > 0) {
            series[i - 1] = {};
        }
    }
  
        
    var options = {
        title: 'Analytics data for Syran John Hairdressing - click on titles to show / hide data',
        series: series
    }

    google.visualization.events.addListener(chart, 'select', function () {
        var sel = chart.getSelection();
        // if selection length is 0, we deselected an element
        if (sel.length > 0) {
            // if row is undefined, we clicked on the legend
            if (typeof sel[0].row === 'undefined') {
                var col = sel[0].column;
                if (columns[col] == col) {
                    // hide the data series
                    columns[col] = {
                    ...