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://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>

<input id="generuj" type="button" value="Generuj" onclick="drawChart();" />
<p id="chartNote"></p>
<div id="chart_div_container" style="overflow-x: auto;min-height:0%;">
  <div id="chart_div" style="overflow: visible;min-height:0%;"></div>
</div>
<div id="png">
  <input id="chartToPng" type="button" value="" style="display: none;" />
</div>
<div id="focusedChart"></div>
<div id="table_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>

JavaScript

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

var initWidth = $('#chart_div').innerWidth();
var eventsGroups = []; //[startFromRowOfDataAll][rowCounter]
var data3;
var colorMap;
var beginDate, endDate;

function toImg() {
  var chartArea = document.getElementById('chart_div').getElementsByTagName('svg')[0].parentNode;
  var svg = new XMLSerializer().serializeToString(document.getElementById('chart_div').getElementsByTagName('svg')[0]);
  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);

  function isIE() {
    var myNav = navigator.userAgent.toLowerCase();
    return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
  }
  var ua = window.navigator.userAgent;
  //Internet Explorer | if | 9-11

  if (isIE() == 9 || isIE() == 8) {
    $('#table_div').empty().append($('<img/>', {
      src: imgData
    }));
  } else if (isIE() == 10 || ua.indexOf("Trident/7.0") > 0) {
    //alert("Shut down this junk! | IE 10");
    var blob = canvas.msToBlob();
    window.navigator.msSaveBlob(blob, 'wykres.png');
  } else {
    //alert("Thank god it's not IE!");
    var download = document.createElement('a');
    download.href = imgData;
    download.download = 'wykres.png';

    function fireEvent(obj, evt) {
      var fireOnThis = obj;
      if (document.createEvent) {
        var evObj = document.createEvent('MouseEvents');
        evObj.initEvent(evt, true, false);
        fireOnThis.dispatchEvent(evObj);
      } else if (document.createEventObject) {
 ...