JSFiddle - React, Tailwind, and code Playground

by Jolene Oropilla

HTML

<script src="https://www.google.com/jsapi?fake=.js"></script>
<div id="vis_div1"></div>
<div id="vis_div2"></div>

JavaScript

function drawVisualization() {
    var query = new google.visualization.Query('http://spreadsheets.google.com/tq?key=0AtmXhru0xxu6dGJ1Mllaejg2V1BLbDRJeE1FamdRZ0E&usp=drive_web&gid=8');
    query.setQuery('SELECT E,F,G,AI,AL,AM,AN,AP');
    query.send(function (response) {
        if (response.isError()) {
            alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
            return;
        }
        
        var data = response.getDataTable();
        
        var wrapper = new google.visualization.ChartWrapper({
            chartType: 'Table',
            dataTable: data,
            options: {
                'title': 'Testing'
            },
            containerId: 'vis_div1',
            view: {
                columns: [0, 1, 2, 3, 4, 5, 6, 7]
            }
        });
        wrapper.draw();
        var wrapper2 = new google.visualization.ChartWrapper({
            chartType: 'ComboChart',
            dataTable: data,
            options: {
                'title': 'Overall Score',
                'seriesType': 'bars',
                'series': {5: {type: 'line'}} 
            },
            containerId: 'vis_div2',
            view: {
                columns: [0, 3, 4, 5, 6, 7]
            }
        });
        wrapper2.draw();
    });
}
google.load('visualization', '1', {'packages': ['table','corechart'], callback: drawVisualization});