JSFiddle - React, Tailwind, and code Playground

by damiantt

HTML

<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="drawChart()" />

<div id="chartsContainer"></div>
<div id="info_div" style="margin-top: 15px; font-size: 12px; "></div>

JavaScript

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

$('#info_div').empty();
var imgData;
var chart0;

function drawChart() {
  $('#chartsContainer').empty();
  $('#info_div').empty();
  var colors = [];
  var data0 = new google.visualization.DataTable();
  data0.addColumn('number', 'x');
  colors.push('00DA58');
  data0.addColumn('number', 'lowerGoal');
  colors.push('00DA58');
  data0.addColumn('number', 'upperGoal');
  colors.push('0899E7');
  data0.addColumn('number', 'Min');
  data0.addColumn({
    'type': 'string',
    'role': 'tooltip',
    'p': {
      'html': true
    }
  });
  colors.push('0899E7');
  data0.addColumn('number', 'Max');
  data0.addColumn({
    'type': 'string',
    'role': 'tooltip',
    'p': {
      'html': true
    }
  });
  colors.push('000000');
  data0.addColumn('number', 'nazwaSerii');
  data0.addColumn({
    type: 'number',
    role: 'annotation'
  });
  data0.addColumn({
    'type': 'string',
    'role': 'tooltip',
    'p': {
      'html': true
    }
  });
  data0.addRow([0, 6.27292639215936, -0.778963858913318, -36.49441121358882, '<div class="tooltip">-36.49441121358882</div>', 45.40391151549615, '<div class="tooltip">45.40391151549615</div>', -7.393863066606159, -7.393863066606159, '<div class="tooltip">TOOOOOOLTYP</div>', ]);
  data0.addRow([1, 6.27292639215936, -0.778963858913318, -36.49441121358882, '<div class="tooltip">-36.49441121358882</div>', 45.40391151549615, '<div class="tooltip">45.40391151549615</div>', -4.836317839963695, -4.836317839963695, '<div class="tooltip">TOOOOOOLTYP</div>', ]);
  data0.addRow([2, 6.27292639215936, -0.778963858913318, -37.483854662784665, '<div class="tooltip">-37.483854662784665</div>', 45.40391151549615, '<div class="tooltip">45.40391151549615</div>', -3.301790703978217, -3.301790703978217, '<div class="tooltip">TOOOOOOLTYP</div>', ]);
  data0.addRow([3, 6.27292639215936, -0.778963858913318, -37.483854662784665, '<div class="tooltip">-37.483854662784665</div>',...