JSFiddle - React, Tailwind, and code Playground

by ravindra_50

HTML

<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="chart_div"></div>
<div id="chart_div2"></div>
<input class='btn btn-large btn-primary pagination-center' style='width:100px;height:40px;' type="button" value="State" id="state" /> 
        <input class='btn btn-large btn-primary pagination-center' style='width:100px;height:40px;' type="button" value="Town" id="town" /> 
        <input class='btn btn-large btn-primary pagination-center' style='width:100px;height:40px;' type="button" value="Locality" id="area" /> 
        <input class='btn btn-large btn-primary pagination-center' style='width:100px;height:40px;' type="button" value="Pin" id="pin" />

JavaScript

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Value');
    data.addRows([
        ['Germany', 700],
        ['USA', 300],
        ['Brazil', 400],
        ['Canada', 500],
        ['France', 600],
        ['Russia', 800]
    ]);
    
    var data2 = new google.visualization.DataTable();
    data2.addColumn('string', 'Country');
    data2.addColumn('string', 'Year');
    data2.addColumn('number', 'Value');
    
    data2.addRows([
        ['Germany', '2008', 37],
        ['Germany', '2009', 45],
        ['Germany', '2010', 72],
        ['Germany', '2011', 67],
        ['Germany', '2012', 62],
        ['Germany', '2013', 81],
        ['USA', '12008', 76],
        ['USA', '12009', 32],
        ['USA', '12010', 52],
        ['USA', '12011', 77],
        ['USA', '12012', 82],
        ['USA', '12013', 51],
        ['Brazil', '22008', 27],
        ['Brazil', '22009', 55],
        ['Brazil', '22010', 92],
        ['Brazil', '22011', 27],
        ['Brazil', '22012', 52],
        ['Brazil', '22013', 61],
        ['Canada', '2008', 67],
        ['Canada', '2009', 25],
        ['Canada', '2010', 32],
        ['Canada', '2011', 97],
        ['Canada', '2012', 52],
        ['Canada', '2013', 11],
        ['France', '2008', 27],
        ['France', '2009', 35],
        ['France', '2010', 52],
        ['France', '2011', 87],
        ['France', '2012', 82],
        ['France', '2013', 61],
        ['Russia', '2008', 17],
        ['Russia', '2009', 95],
        ['Russia', '2010', 32],
        ['Russia', '2011', 77],
        ['Russia', '2012', 92],
        ['Russia', '2013', 91]
    ]);
    
    var chart = new google.visualization.ChartWrapper({ 
        chartType: 'ColumnChart',
        containerId: 'chart_div',
        dataTable: data,
        options: {
            // setting the "isStacked" option to true fixes the spacing problem
            'title': 'countries',
           ...