Setting a hard minimum axis value in Google Charts API

JavascriptGoogle Visualization

Javascript Problem Overview


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?

Javascript Solutions


Solution 1 - Javascript

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

Solution 2 - Javascript

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

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionjasonpgignacView Question on Stackoverflow
Solution 1 - JavascriptNikesView Answer on Stackoverflow
Solution 2 - JavascriptAhmad AbdelghanyView Answer on Stackoverflow