JSFiddle - React, Tailwind, and code Playground

by damiantt

HTML

<script type="text/javascript" src="https://gabelerner.github.io/canvg/rgbcolor.js"></script>
<script type="text/javascript" src="https://gabelerner.github.io/canvg/canvg.js"></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>

<div id="chart_div" style="overflow-x: auto; overflow-y: hidden;"></div>
<div id="png"></div>
<div id="table_div"></div>

JavaScript

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

function toImg() {
  var chartArea = document.getElementById('chart_div').getElementsByTagName('svg')[0].parentNode;
  var svg = '<svg>' + document.getElementById('chart_div').getElementsByTagName('svg')[0].innerHTML + '</svg>'
  var doc = document.getElementById('chart_div').ownerDocument;
  var canvas = doc.createElement('canvas');
  canvas.setAttribute('width', chartArea.offsetWidth);
  canvas.setAttribute('height', chartArea.offsetHeight);

  canvas.setAttribute(
    'style',
    'position: absolute; ' +
    'top: ' + (-chartArea.offsetHeight * 2) + 'px;' +
    'left: ' + (-chartArea.offsetWidth * 2) + 'px;');
  doc.body.appendChild(canvas);
  canvg(canvas, svg);
  var imgData = canvas.toDataURL("image/png");
  canvas.parentNode.removeChild(canvas);

  window.location.href = imgData;
}

function drawChart() {
  var activ = {
    // should contain a map of category -> color for every category
    1: 'jeden',
    2: 'dwa',
    3: 'trzy',
    4: 'cztery'
  }
  var data = google.visualization.arrayToDataTable([
    ['Maszyna', 'Kolor', {
      type: 'string',
      role: 'tooltip',
      'p': {
        'html': true
      }
    }, 'Start Time', 'End Time'],

    [activ[1], 'c1', 'Zlecenie brak(operacja: brak, detal: brak)<br />Od: 15/02/2016 14:00:00.000<br />Do: 16/02/2016 14:00:00.000{br}Czas realizacji: 24h {br}Liczba cykli: 1{br}Maszyna: M308  ',
      new Date(2014, 10, 15, 12, 30, 0, 120),
      new Date(2014, 10, 15, 14, 30, 20, 550)
    ],

    [activ[2], 'c2', 'brr',
      new Date(2014, 10, 15, 12, 30, 55),
      new Date(2014, 10, 15, 14, 31, 55)
    ],

    ['Commute Home', 'c3', 'brr',
      new Date(2014, 10, 15, 12, 29, 30),
      new Date(2014, 10, 15, 14, 30, 0)
    ],
    ['Commute Home', 'c4', 'brr',
      new Date(2014, 10, 15, 14, 30, 0),
      new Date(2014, 10, 15, 14, 30, 1)
    ],
    ['Commute Home', 'c2', 'brr',
      new...