CODEWITHSUNDEEP
javascriptgoogle-visualization
alain.janinm
alain.janinm

Reputation: 20065

How to set Axis step in Google Chart?

I'm wondering how to set axis step in a google chart built from JavaScript? I use this to set min and max:

vAxis: {
title: 'temps (ms)',
    viewWindowMode: 'explicit',
    viewWindow: {
        max: 180,
        min: 0
    },
}

And I need to add an other constraint to fix vertical step to 0.1 for example.

Upvotes: 14

Views: 33794

Answers (3)

Paul Chris Jones
Paul Chris Jones

Reputation: 2917

You can do it with ticks:

vAxis: {
    title: 'temps (ms)',
    viewWindow: {
        min: 0,
        max: 180
    },
    ticks: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180] // display labels every 10
}

Upvotes: 5

Benjamin Kaiser
Benjamin Kaiser

Reputation: 2227

I essentially did what alain did, calculating the max value, multiplying it by 1.1 (to account for the padding above the max element on the chart) and dividing it by the steps I wanted to give me the steps I needed.

vAxis: {
  title: 'vAxis',
  minValue: 0,
  gridlines: {
    count: Math.ceil(max * 1.1 / interval) // try to pick the correct number to create intervals of 50000 
  }
}

where max is the max value and interval is the desired interval. This has not been thoroughly tested, so the constant of 1.1 and using Math.ceil may need to be tweaked.

Upvotes: 2

alain.janinm
alain.janinm

Reputation: 20065

Finally I found a trick using :

     vAxis: {
        title: 'temps (ms)',
        viewWindowMode: 'explicit',
        viewWindow: {
          //max: 180,
          min: 0,
        },
        gridlines: {
          count: 10,
        }
      }

It don't set steps but instead, tell that

max / (nb steps) = count (here it's 10)

So for example with max set to 180, each steps will have a value of 18 using count: 10.

Upvotes: 30

Related Questions