JSFiddle - React, Tailwind, and code Playground

by Gabriele Petrioli

HTML

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<input type='button' id='b1' value='Draw Column Chart' />
<input type='button' id='b2' value='Draw Line Chart' />

<div id="chart-div"></div>

JavaScript

// Load the Visualization API and the piechart package.
 google.load('visualization', '1.0', {
     'packages': ['corechart']
 });

 // Set a callback to run when the Google Visualization API is loaded.
 google.setOnLoadCallback(initialize);

 function initialize() {

     var chart = new google.visualization.ChartWrapper({
         containerId: 'chart-div'
     });
     var data = [];
     data[0] = new google.visualization.DataTable();

     data[0].addColumn('string', 'x');
     data[0].addColumn('number', 'A');
     data[0].addColumn('number', 'B');
     data[0].addRow(['A', 123, 40]);
     data[0].addRow(['B', 17, 20]);

     data[1] = new google.visualization.DataTable();

     data[1].addColumn('string', 'x');
     data[1].addColumn('number', 'C');
     data[1].addColumn('number', 'D');
     data[1].addRow(['C', 222, 13]);
     data[1].addRow(['D', 542, 80]);

     var options = {
         width: 400,
         height: 240,
         vAxis: {
             minValue: 0,
             maxValue: 1000
         },
         animation: {
             duration: 1000,
             easing: 'out'
         }
     };

     var barsButton = document.getElementById('b1');
     var lineButton = document.getElementById('b2');
     
     chart.setOptions(options);
     
     function drawBars() {
         chart.setChartType('ColumnChart');
         chart.setDataTable(data[0]);
         chart.draw();
     }

     function drawLine() {
         chart.setChartType('LineChart');
         chart.setDataTable(data[1]);
         chart.draw();
     }

     barsButton.onclick = function () {
         drawBars();
     }

     lineButton.onclick = function () {
         drawLine();
     }
     drawBars();
 }