JSFiddle - React, Tailwind, and code Playground

by navyflower

HTML

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

JavaScript

google.load("visualization", '1', {
    packages: ['corechart']
});
google.setOnLoadCallback(drawChart);

function drawChart() {

    var query = new google.visualization.Query(
        'https://docs.google.com/a/google.com/spreadsheet/ccc?key=1TSCCAJEGI9ZXy38xse354DTLy4cDbphGcoERJu4BjXI&range=A3:B42');
    query.setQuery('select A, B order by B');
    query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
    if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
    }

    var data = response.getDataTable();
    debugger;
    var opts = {
        width: 800,
        height: 900,
        vAxis: {title: 'Product name',  titleTextStyle: {color: 'red'}},    
        hAxis: {title: 'Price',  titleTextStyle: {color: 'green'}},       
        colors: ['red'],        
        
        title: 'Herbs and Vegetables Prices'
    };
    var chart = new google.visualization.BarChart(document.getElementById('columnchart'));
    chart.draw(data, opts);
}