Google chart, set minimum range on axis

Question

I have an line/area chart, I want to set a minimum range on the y-axis. Let's say my points are [0,300],[1,270],[2,230],[3,260] (those are retrieved through ajax, so they're not static). I want the y-axis range to be at least 100, but by default google will set maximum as maximum value (300 in this case), and minimum at minimum value (230 in this case), so range in this case would be (and it is actually) 70, I want it to be at least 100, so the chart maximum should be (300+230)/2+50 and minimum (300+230)/2-50, so that I have a 100 range and the chart i vertically center aligned.

I want the range to have a minimum but not a maximum, if my points are [0,100],[1,240],[5,160] then range should match the data range (140 in this case) also if the optimum is smaller (100).

Basically I don't want the chart to show a big difference when the actual difference in data is small. I know how to set fixed maximum and minimum on axis, but that doesn't solve my problem. This is my actual code:

$.fn.createChart = function(url,options){
var obj = $(this);
console.log('CREATING CHART: '+url);
// Load the Visualization API and the linechart package.
if(!$.canAccessGoogleVisualization()){
    google.charts.load('current', {packages: ['corechart', 'line']});
}


// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var jsonData = $.ajax({
      url: url ,
      dataType: "json",
      async: false
      }).responseText;

  // Create our data table out of JSON data loaded from server.
  var data = new google.visualization.DataTable(jsonData);

//Default options
var def = {
        width: obj.width(),
        height: obj.height(),
      curveType: 'function',
      legend: { position: 'bottom' },
      hAxis: {
                format: 'dd/MM'
            },

            animation:{
                "startup": true,
    duration: 1000,
    easing: 'out',
  }
    };

//Overwrite default options with passed options
    var options = typeof options !== 'undefined' ? $.mergeObjects(def,options) : def;  

  // Instantiate and draw our chart, passing in some options.
  var chart = new google.visualization.AreaChart(obj.get(0));
  chart.draw(data, options);
}

}
$.mergeObjects = function(obj1,obj2){
for (var attrname in obj2) { obj1[attrname] = obj2[attrname]; }
return obj1;
}
$.canAccessGoogleVisualization = function() 
{
    if ((typeof google === 'undefined') || (typeof google.visualization === 'undefined')) {
   return false;
    }
    else{
     return true;
   }
}

WhiteHat WhiteHat · Accepted Answer · 2016-07-28T12:41:17

you can use the getColumnRange method on the DataTable to find the min and max

then apply you're logic to set the viewWindow on the vAxis

see following working snippet...

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['X', 'Y'],
      [0, 300],
      [1, 270],
      [2, 230],
      [3, 260]
    ]);

    var yMin;
    var yMax;
    var columnRange = data.getColumnRange(1);
    if ((columnRange.max - columnRange.min) < 100) {
      yMin = ((columnRange.max + columnRange.min) / 2) - 50;
      yMax = ((columnRange.max + columnRange.min) / 2) + 50;
    } else {
      yMin = columnRange.min;
      yMax = columnRange.max;
    }

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    chart.draw(data, {
      vAxis: {
        viewWindow: {
          min: yMin,
          max: yMax
        }
      }
    });
  },
  packages: ['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Google chart, set minimum range on axis

1 Answers