JSFiddle - React, Tailwind, and code Playground

by Michel Penke

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div id="chart_box" style="align: center; width: 100%; height: 500px; background-image: url(http://www.gruenderszene.de/wp-content/uploads/2016/10/Gruenderszene_logo-1.png); background-repeat:no-repeat; background-position: 38% 190px;"></div>

<div id="chart_div" style="align: center; width: 100%; height: 500px; background-image: url(http://www.gruenderszene.de/wp-content/uploads/2016/10/Gruenderszene_logo-1.png); background-repeat:no-repeat; background-position: 38% 190px;"></div>

CSS

body{ 
    background-color: #fff;
}

JavaScript

google.charts.load('current', {'packages': ['corechart', 'table', 'bar']});
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawStacked);
function drawStacked() {
      var data = new google.visualization.DataTable();
      data.addColumn('timeofday', 'Time of Day');
      data.addColumn('number', 'Motivation Level');
      data.addColumn('number', 'Energy Level');

      data.addRows([
        [{v: [8, 0, 0], f: '8 am'}, 1, .25],
        [{v: [9, 0, 0], f: '9 am'}, 2, .5],
        [{v: [10, 0, 0], f:'10 am'}, 3, 1],
        [{v: [11, 0, 0], f: '11 am'}, 4, 2.25],
        [{v: [12, 0, 0], f: '12 pm'}, 5, 2.25],
        [{v: [13, 0, 0], f: '1 pm'}, 6, 3],
        [{v: [14, 0, 0], f: '2 pm'}, 7, 4],
        [{v: [15, 0, 0], f: '3 pm'}, 8, 5.25],
        [{v: [16, 0, 0], f: '4 pm'}, 9, 7.5],
        [{v: [17, 0, 0], f: '5 pm'}, 10, 10],
      ]);

      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" },
                       2]);

      var options = {
        title: "Density of Precious Metals, in g/cm^3",
        width: 600,
        height: 400,
        bar: {groupWidth: "95%"},
        legend: { position: "none" },
      };
      var chart = new   google.visualization.ColumnChart(document.getElementById('chart_box'));

      chart.draw(data, options);
    }
 
 

      google.charts.setOnLoadCallback(initialize);
      function initialize() {
        var query = new google.visualization.Query(           'https://docs.google.com/spreadsheets/d/1vxXJCeuXL2pLrdcxDMGETqLFKazPib4-rHByHh6uQdM/edit?usp=sharing?&range=A1:AI');
        query.send(draw);
      }
      function draw(response) {
        if (response.isError()) {
          alert('Error in query');
        }
        var ticketsData = response.getDataTable();
        var...