JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.google.com/jsapi?.js"></script>
<div id="chart"></div>
JavaScript
function drawChart() {
var data = new google.visualization.DataTable();
// Create and populate the data table.
var option = {
title: "",
width: 600,
height: 400,
animation: {
duration: 1000,
easing: 'out'
},
vAxis: {
title: "Year",
minValue: 0,
maxValue: 500
},
hAxis: {
title: "Cups"
},
legend: 'none',
is3D: true,
};
data.addColumn('string', 'N');
data.addColumn('number', 'Value');
data.addRow(['Detractors', 0]);
data.addRow(['Passives', 0]);
data.addRow(['Promoters', 0]);
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(data, option);
data.setValue(0, 1, 400);
data.setValue(1, 1, 300);
data.setValue(2, 1, 400);
chart.draw(data, option);
setTimeout(continueExecution, 1000);
}
function continueExecution () {
flag= 1;
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Value');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn({type: 'string', role: 'style'});
data.addRows([
['Detractors', 400, 'a%', 'color: #e0440e'],
['Passives', 300, 'b%', 'color: #e6693e'],
['Promoters', 400, 'c%', 'color: #ec8f6e']
]);
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
var option = {
title: "Here is Title",
height: 400,
width: 600,
is3D: true,
tooltip: {
isHtml: true
},
legend: 'none',
series: {
0: {
type: 'bars'
}
},
hAxis: {
title: "Cups"
},
vAxis: {
title: "Year",
minValue: 0,
maxValue: 500
...