Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Chart hAxis.gridlines.count does not work as expected

I have a google Chart with percentage values from 0 to 100% (i.e. 0 to 1) When I set hAxis.gridlines.count to 10 expecting to get gridlines at 0, 10, 20, ... 90, 100 I get gridlines at 0, 12, 24, 36, ..., 96, 108

I could not find any solution by now.

Here is my Code:

function getData() {

    // Create the data table.
    var data = new google.visualization.arrayToDataTable([
      ['Category', 'Fulfillment (%)'],
      ['A', .75],
      ['B', .50],
      ['C', .50],
      ['D', .30],
      ['E', 0]
    ]);

    // Set chart options
    var options = {
        'title': 'My Title',
        'height': 300,
        'backgroundColor': 'none',
        'hAxis': {
            'maxValue': 1,
            format: '#%',
            gridlines: {
                count: 10
            }
        },
        'colors': ['#F5821E'],
        legend: { position: "none" }
    };

    var formatter = new google.visualization.NumberFormat({ pattern: '#%' });
    formatter.format(data, 1);

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}
like image 496
Dominik G Avatar asked Aug 28 '14 15:08

Dominik G


1 Answers

Reading the documentation, you can see that hAxis.gridlines.count specifies how many lines to draw, not where to draw them. What you're looking for is probably hAxis.ticks instead.

like image 192
Etheryte Avatar answered Sep 18 '22 12:09

Etheryte