JSFiddle - React, Tailwind, and code Playground
by zono
HTML
<div id="visualization"/>
JavaScript
var divHolder = document.getElementById("visualization");
var jsapi = document.createElement("script");
jsapi.setAttribute("src", "http://www.google.com/jsapi");
document.body.appendChild(jsapi);
/**
* Wait for init google object
*/
(function waitForInit() {
if (typeof google != "undefined") {
initChartLogic();
} else {
setTimeout(waitForInit, 0);
}
})();
function initChartLogic() {
google.load('visualization', '1', {packages: ['corechart']});
function drawVisualization() {
// To see the data that this visualization uses, browse to
// http://spreadsheets.google.com/ccc?key=0ArBFygWDV2_PdF9BOUx2N3hyZldRVG1KT0tBcm9Dbmc
var query = new google.visualization.Query(
'http://spreadsheets.google.com/tq?key=0ArBFygWDV2_PdF9BOUx2N3hyZldRVG1KT0tBcm9Dbmc&range=B1:N35');
// 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.setColumnProperties(1, {role: 'tooltip', html: true}); // MUST come right after the domain (acronym) column
// compute tooltip
var tooltipFormat = new google.visualization.PatternFormat(
// {0} acronym, {1} start, {2} finish, {3} name, {4} logo
'<table border="0" width="500px"><tr valign="middle"><td width="200px"><img src="{4}" width="190px"/></td><td><b>{0}</b><br/>{3}<br/>'
+ '<b>Start</b> {1}, <b>Finish</b> {2}</td></tr></table>'
);
...