JSFiddle - React, Tailwind, and code Playground

by heennkkee

HTML

<script src="https://www.google.com/jsapi?ext.js"></script>
<div id="test"></div>

JavaScript

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

// Create data
function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Date', 'Tickets'],
        ['11/05/15', 1],
        ['10/05/15', 0],
        ['09/05/15', 2],
        ['08/05/15', 0],
        ['07/05/15',10],
        ['06/05/15', 0],
        ['05/05/15', 20],
        ['04/05/15', 0], ]);

    //Get all distinct ticketsales, sorted ascending by default, so you have to get the last value to get the highest one.


    var maxValue = data.getDistinctValues(1)[data.getDistinctValues(1).length - 1]
    // Specify gridCount to null, so if it doesn't enter any of the if's below, it will still be null
    var gridCount = maxValue + 1

    var columnChartOptions = {
        title: "",
        legend: {
            position: 'none'
        },
        width: '100%',
        height: '100%',
        colors: ["#27ae60", "#2980b9", "#e67e22", "#e74c3c", "#e74c3c"],
        chartArea: {
            left: '8%',
            top: '8%',
            width: "85%",
            height: "70%"
        },
        vAxis: {
            gridlines: {
                //specify the amount of gridlines to var gridCount, if it's still specified as null, it will use googles automatic generation.
                count: gridCount
            },
        }
    };

    new google.visualization.ColumnChart(document.getElementById('test')).draw(data, columnChartOptions);
}