JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.google.com/jsapi?.js"></script>
<div id="piechart" style="width: 1100px; height: 600px; max-width:100%; overflow:scroll;">
<p id="chart_div_p1">This is the chart div</p>
</div>
<div id="chart_log" style="border: 1px solid black; height: 400px; overflow:scroll;">
<p>This is the chart_log div</p>
<p>This is paragraph #2</p>
</div>
JavaScript
function runIt() {
'use strict';
var cRH,
myChart,
myDC,
myLog;
myLog = function myLog(message){
var pElmOpen = "<p>",
pElmClose = "</p>",
cLog = "chart_log",
theDiv,
pElm;
try {
theDiv = document.getElementById(cLog);
} catch (theDivError) {
alert("catch error for theDiv: " + theDivError.message);
}
pElm = pElmOpen + "myLog: " + message + pElmClose;
if (theDiv !== null) {
theDiv.insertAdjacentHTML("beforeEnd", pElm);
} else {
alert("theDiv is null myLog: " + message);
}
};
cRH = function chartReadyHandler() {
alert("the chart is ready!!!");
};
myDC = function myDrawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]),
options = {
title: 'My Daily Activities'
};
try {
myChart = new google.visualization.PieChart(document.getElementById('piechart'));
google.visualization.events.addListener(myChart, 'ready', cRH);
} catch (addlisError) {
alert("myChart/listener failed..." + addlisError.name + ": " + addlisError.message);
}
myChart.draw(data, options);
};
alert("calling myDC");
myDC();
myLog("all done");
}
google.load('visualization', '1', {packages:['corechart'], callback: runIt});