JSFiddle - React, Tailwind, and code Playground

by multiformeingegno

HTML

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="geochart-colors" style="width: 100%; height: 100%;"></div>

JavaScript

google.charts.load('current', {
	  callback: drawRegionsMap,
	  packages: ['geochart']
	});

	function drawRegionsMap() {

	  /* MANUAL */
	  var query = new google['visualization'].Query('https://docs.google.com/spreadsheets/d/1tBQnF22GeQomQsptcvF8Cnq4SZAGQ7t66Cx08jw5zYs/edit?gid=0&headers=1&range=A1:F')

	  /* IMPORTRANGE */
	  /* 
	  var query = new google['visualization'].Query('https://docs.google.com/spreadsheets/d/1jtL0Xhsz43F2LpK_Vk9Wi4DRU0NCAxvrzzvBLk8Mr7w/edit?gid=2089470486&headers=1&range=A1:F')
	  */

	  query.send(handleQueryResponseTR);
	}

	function handleQueryResponseTR(response) {
	  if (response.isError()) {
	    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
	    return;
	  }

	  var data = response.getDataTable();

	  var view = new google.visualization.DataView(data);
	  view.setColumns([4, 5, 2, {
	    calc: function(dt, row) {
	      return '<span style="font-size:16px;font-family:\'brandon_grotesque_regularRg\',\'Arial\',sans-serif"><strong>' + dt.getValue(row, 3) + '</strong><br>' + dt.getFormattedValue(row, 1) + ' value</span>';
	    },
	    role: 'tooltip',
	    properties: {
	      html: true
	    },
	    type: 'string'
	  }]);

	  var options = {
	    displayMode: 'markers',
	    sizeAxis: {
	      minValue: 1,
	      maxValue: 30
	    },
	    colorAxis: {
	      colors: ['#76CBC0', '#76CBC0']
	    },
	    width: 100 + "%",
	    height: 100 + '%',
	    backgroundColor: 'transparent',
	    datalessRegionColor: '#dddddd',
	    defaultColor: '#dddddd',
	    legend: 'none',
	    tooltip: {
	      isHtml: 'true',
	      showTitle: false,
	      textStyle: {
	        color: '#444'
	      },
	      trigger: 'focus',
	    }
	  };

	  var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
	  google.visualization.events.addListener(chart, 'select', function() {
	    var selection = chart.getSelection();
	  });
	  chart.draw(view, options);

	  go();

	 ...