Google Bar chart bars & axis do not correlate to data

Question

https://i.imgur.com/qKcSRjS.png

The values of the bars, from top to bottom, are 66, 77, 91, 0

As you can see, the labels on the X axis are not to scale and seem to simply indicate the value of each bar, and the bars are also not scaled to their value they seem to simply stack in a staircase fashion. The bottom bar should be 'empty' as it is 0.

The data is dynamically generated but here is the resulting code:

 function drawRightY() {
    var data = google.visualization.arrayToDataTable([ ['Date', 'Received'], ['1/15/2018', '66'],['1/22/2018', '77'],['1/29/2018', '91'],['2/5/2018', '0'] ]);

    var materialOptions = {
        chart: {

        hAxis: {
            title: 'Date',
            minValue: 0,
    scaleType: 'log'
        },
        vAxis: {
            title: 'Received'
        },
        bars: 'horizontal',
        legend: {
            position: 'none'
        },
        axes: {
            y: {
                0: { side: 'left' }
            }
        }
    };

WhiteHat WhiteHat · Accepted Answer · 2018-02-05T15:34:40

the values in the data should be numbers, not strings (remove single quotes)

['1/15/2018', '66'] // <-- string

['1/15/2018', 66] // <-- number

see following working snippet...

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
    var data = google.visualization.arrayToDataTable([ ['Date', 'Received'], ['1/15/2018', 66],['1/22/2018', 77],['1/29/2018', 91],['2/5/2018', 0] ]);

    var materialOptions = {
        hAxis: {
            title: 'Date',
            minValue: 0,
            scaleType: 'log'
        },
        vAxis: {
            title: 'Received'
        },
        bars: 'horizontal',
        legend: {
            position: 'none'
        },
        axes: {
            y: {
                0: { side: 'left' }
            }
        }
    };

    var chart = new google.visualization.BarChart(document.getElementById('chart'));
    chart.draw(data);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

Google Bar chart bars & axis do not correlate to data

1 Answers