Question

Im trying to learn javascript and, having some basic programming experience already (from C++), I decided to do so by jumping right in and trying to make something useful.

Im trying to make a simple custom chart using Google Chart Tools

That link leads to the reference page for one type of chart this library provides. I am just messing around with the provided example. If you scroll down to configuration options, you’ll see the vAxis.maxValue config. option.

The issue is, the max value on my V-axis still seems to be rounding up to the nearest hundreds value rather than to the specif value input. See the releven code and comment below:

        var options = {
          width: 500, height: 300,
          title: 'Your "LifeScore"',
          hAxis: {title: 'Goals', titleTextStyle: {color: 'black'}},
          vAxis: {title: 'Days', maxValue: 365} // v axis is showing up to 400, not 365
        };

The full version of the program can be found here: http://jsbin.com/ifuhuk/edit#html,live

Anyone familiar with this library know how I can fix this?

Answer 1

I think it’s because vAxis.gridlines.count defaults to 5 (i.e. 0, 100, 200, 300, 400 axis labels) – the description of vAxis.maxValue in the page you linked to suggests the actual maximum can be rounded up.

It seems the chart control wants nice round numbers on the axis, which is generally appropriate. If you increase vAxis.gridlines.count, the chart control will be able to set a lower maximum than 400 but you probably won’t be able to get exactly 365 against the top tick mark.