Setting a hard minimum axis value in Google Charts API

Question

I'm trying to build a Google Chart to show some uptime and downtime percentages, stacked. This works great except for one small thing - I'd like the baseline of the chart to be at 99.8, and the maximum to be 100 - since downtimes are usually less than .2, this will make the chart readable.

This seemed simple enough to me. I figured this would work:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Uptime');
data.addColumn('number', 'Downtime');
data.addRows([
  ['Dec 1, 1830',   99.875, 0.125],
  ['Dec 8, 1830',   99.675, 0.325],
  ['Dec 15, 1830',  99.975, 0.025],
  ['Dec 22, 1830',  100.0,  0.0]
]);

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240, isStacked: true, vAxis: { title: "Percentage Uptime", minValue: 99.8, maxValue: 100}});

Unfortunately, the chart utterly disregards the minValue on the vAxis. This seems to be expected behaviour, according to the API, but this leaves the question - how would I accomplish this? I even went so far as to transform the data - ie, to subtract 99.8 from all the uptime values, and just have the chart go from 0 to .2, and this spits out a graph that looks okay, but I can't apply labels to the vertical axis that would say 99.8, 99.85, 99.9, whatever - the axis says, quite dutifully, 0 at the bottom, and .2 at the top, and there seems to be no way to fix it this directions, either. Either solution would be acceptable, I'm sure there's SOME way to make this work?

Nikes · Accepted Answer · 2013-11-28T18:27:19.343

87

you need to set viewWindow like this:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Uptime');
data.addColumn('number', 'Downtime');
data.addRows([
 ['Dec 1, 1830',   99.875, 0.125],
  ['Dec 8, 1830',   99.675, 0.325],
  ['Dec 15, 1830',  99.975, 0.025],
  ['Dec 22, 1830',  100.0,  0.0]

]);

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data,
           {width: 400, 
            height: 240, 
            isStacked: true,
            vAxis: { 
              title: "Percentage Uptime", 
              viewWindowMode:'explicit',
              viewWindow:{
                max:100,
                min:99.8
              }
            }
            }                 
          );

//edited for newer version of api

edited Nov 28 '13 at 18:27

answered Jul 20 '11 at 11:20

Nikes

1,094
8
13

When currently using this format, the viewport adjusts like expected but the axis labels are way off. If anyone has a solution to this let me know ;) – Joris Kroos Jun 16 '15 at 13:08
Yes for that you will have to use Axis - ticks and set the value to the viewWindow max value – Shintu Joseph Jun 30 '16 at 13:22
I've been searching for 2 hours to find how to make the `vAxis.ticks` actually work using the newer Material Design charts. They simply ignore `minValue`, and `maxValue` as well as ticks. Using this answer with the `viewWindowMode` as well as the `viewWindow` FINALLY got my chart working. Context: CPU usage is low, showing 9%. If you see the graph, it looks high... but if you change the view to 100% suddenly, it's a more realistic visual. – JesterXL Oct 19 '16 at 01:52

score 22 · Answer 2 · answered Jul 24 '13 at 12:32

22

I had a similar problem and had to specify the property as "min" not "minValue"

vAxis: { 
    viewWindowMode:'explicit',
    viewWindow: {
        max:100,
        min:99.8
    }
}

answered Jul 24 '13 at 12:32

Ahmad Abdelghany

11,983
5
41
36

1

Good Example, When testing, Make sure the max > min, otherwise it would not work. – Israel Margulies Aug 12 '13 at 15:43

Setting a hard minimum axis value in Google Charts API

2 Answers2

Linked