JSFiddle - React, Tailwind, and code Playground

by damiantt

HTML

<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<input id="Draw" type="button" value="Draw" onclick="initialDraw();" />
<input id="Draw" type="button" value="Scale" onclick="scaleG();" />

<div id="chart_div_container" style="overflow-x: auto;min-height:0%;position: relative;">
  <div id="chart_div" style="overflow: visible;min-height:0%;"></div>
  <div id="chart_div_overlay" style="overflow: visible;min-height:0%;position: absolute;top: 0px;left: 0px;"></div>
</div>

<div id="tooltipDivHard" class="google-visualization-tooltip" style="left: 20px; top: 20px; display:table;pointer-events: none; border:solid 5px black;background-color:black;opacity:0.8;color:white;visibility: hidden;"></div>

CSS

.test {
  position: absolute;
  top: 0px;
}

JavaScript

google.charts.load('current', {
  'packages': ['timeline', 'table']
});

var onlyOnce = true;
var onlyOnceTemp = true;
var createdBoxWidth;
var initWidth = $('#chart_div').innerWidth();
var colorMap;
var data;
var beginDate, endDate;
var scale = 1;
var zoom = 1000;
var zoomTemp = 0;

function initialDraw() {
  data = google.visualization.arrayToDataTable([
    ['Maszyna', 'Kolor', {
      type: 'string',
      role: 'tooltip',
      'p': {
        'html': true
      }
    }, 'Start Time', 'End Time'],

    ['one', 'pi1', 'brr',
      new Date(2014, 10, 15, 12, 30, 0),
      new Date(2014, 10, 15, 12, 30, 20)
    ],
    ['one', 'pu3', 'brr',
      new Date(2014, 10, 15, 12, 30, 20),
      new Date(2014, 10, 15, 12, 30, 45)
    ],
    ['one', 'pu3', 'brr',
      new Date(2014, 10, 15, 12, 30, 45),
      new Date(2014, 10, 15, 12, 30, 55)
    ],
    ['two', 'g2', 'brr1',
      new Date(2014, 10, 15, 12, 30, 35),
      new Date(2014, 10, 15, 12, 30, 55)
    ],

    ['two', 'pi1', 'brr2',
      new Date(2014, 10, 15, 12, 30, 55),
      new Date(2014, 10, 15, 14, 31, 55)
    ],

    ['three', 'pu3', 'brr',
      new Date(2014, 10, 15, 12, 29, 30),
      new Date(2014, 10, 15, 14, 30, 0)
    ],
    ['three', 'pi1', 'brr',
      new Date(2014, 10, 15, 14, 30, 0),
      new Date(2014, 10, 15, 14, 35, 0)
    ],
    ['three', 'g2', 'Zbrr',
      new Date(2014, 10, 15, 14, 35, 0),
      new Date(2014, 10, 15, 15, 25, 10)
    ],
    ['three', 'pu3', 'KR1',
      new Date(2014, 10, 15, 15, 25, 10),
      new Date(2014, 10, 15, 15, 26, 00)
    ],
    ['three', 'g2', 'KR2',
      new Date(2014, 10, 15, 15, 26, 00),
      new Date(2014, 10, 15, 15, 26, 45)
    ],
    ['three', 'pi1', 'KR3',
      new Date(2014, 10, 15, 15, 26, 45),
      new Date(2014, 10, 15, 15, 27, 15)
    ],
    ['three', 'pu3', 'brr',
      new Date(2014, 10, 15, 15, 27, 15),
      new Date(2014, 10, 15, 20, 30, 1)
    ],
    ['three', 'pi1', 'brr',
      new Date(2014, 10, 15, 20, 30, 1),
      new...