JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.google.com/jsapi?.js"></script>
<div id="visualization" style="height: 3000px; width: 1200px;"></div>
JavaScript
function drawVisualization() {
// To see the data that this visualization uses, browse to
// http://spreadsheets.google.com/ccc?key=pCQbetd-CptGXxxQIG7VFIQ
var query = new google.visualization.Query(
'https://docs.google.com/spreadsheet/pub?key=0AjzReSa2qEsadG1HV0k5ZHVncGx0NDFrTkx4cENlRHc');
// Apply query language.
query.setQuery('SELECT A,CO,D ORDER BY CO DESC');
// Send the query with a callback function.
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
data.setColumnProperty(2, 'role', 'tooltip');
var visualization = new google.visualization.BarChart(document.getElementById('visualization'));
visualization.draw(data, {
legend: 'bottom',
chartArea: {
height: '98%',
width: '70%',
left: '25%'
}
});
}
google.load('visualization', '1', {packages:['corechart'], callback: drawVisualization});