CODEWITHSUNDEEP
javascriptchartsgoogle-visualizationmax
adrianTNT
adrianTNT

Reputation: 4082

Modifying max value in Google Charts

I want to make a chart of email click trough rate, and this CTR will have very small values from 0.5 to 100, but when I display it next to bars with 10 000 values (emails sent per day), the small CTR bar/line is too low in chart and not visible.

I need to specify a min/max value for this CTR value, so that at the very top of the chart it will be 100, what would I need to modify in this default google code for example, where that average line can be my CTR rate ? So I make that line go to 0.5 to 100

https://jsfiddle.net/6mn4typ0/

Upvotes: 2

Views: 2336

Answers (1)

WhiteHat
WhiteHat

Reputation: 61212

place the CTR on a secondary axis,
and set the min & max values there 

series: {
  5: {
    targetAxisIndex: 1,  // <-- set as secondary axis
    type: 'line'
  }
},
vAxes: {  // <-- use vAxes for secondary axis options
  1: {
    title: 'Average',
    viewWindow: {  // <-- set view window
      min: 0,
      max: 100
    }
  }
}

see following working snippet... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'],
    ['2004/05', 10165, 12938, 10522, 15998, 14450, 0.6],
    ['2005/06', 10135, 13120, 11599, 11268, 12288, 20.6],
    ['2006/07', 11157, 10167, 12587, 12807, 13397, 40.9],
    ['2007/08', 12139, 11110, 11615, 10968, 12215, 80.4],
    ['2008/09', 13136, 11691, 10629, 11026, 13366, 90.6]
  ]);

  var options = {
    title : 'Monthly Coffee Production by Country',
    vAxis: {title: 'Cups'},
    hAxis: {title: 'Month'},
    seriesType: 'bars',
    series: {
      5: {
        targetAxisIndex: 1,
        type: 'line'
      }
    },
    vAxes: {
      1: {
        title: 'Average',
        viewWindow: {
          min: 0,
          max: 100
        }
      }
    }
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
  chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 1

Related Questions