Google Charts display options

Question

My questions (short style)

Can you customize a y-axis labeling interval ?
Can you display the extreme values of a series as an horizontal line ?

The detailed explanations

I have a combo chart made with Google Charts : the first set of data uses an area style, and the second a line style. The second one is the one that matters here :

it represents a percentage
i don't want it from 0 to 1 (or 0 to 100 in percentage), but from its min to its max (or something near)
and i want to display those min and max values

If i modify the scale so :

PHP

$min_reject_percentage = 5 * floor($min_reject_percentage / 5);
$max_reject_percentage = 5 * ceil($max_reject_percentage / 5);

JS

var options = {
    ...
    vAxes: {
        ...
        1: {
            format:"##%",
            viewWindow: {
                min: <?php echo ($min_taux_rejet / 100); ?>,
                max: <?php echo ($max_taux_rejet / 100); ?>,
            },
        },
    },
    series: {
        0: {
            targetAxisIndex: 0,
            type: 'area',
        },
        1: {
            targetAxisIndex: 1,
            type: 'line',
        },
    }
}

The vertical axis is limited to the nearest multiple of 5 for min and max values, but :

the interval shown on the axis is from 10 to 10, which is too big. Since i have a real max of 31.5 and a real min of 17.1, axis min is 15 is 15 and axis max is 35, but the only graduation labeled are 20 and 30.
i can't see the real min and max on the graph

WhiteHat WhiteHat · Accepted Answer · 2018-09-06T11:29:09

you can use config option ticks, which is an array of values to be used for the labels...

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y0', 'y1'],
    [0, 18, 0.171],
    [1, 28, 0.315],
  ]);

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

  var axisMin = 0.15;
  var axisMax = 0.35;
  var ticks = [];
  for (var i = axisMin; i <= axisMax; i = i + 0.05) {
    ticks.push(i);
  }

  var options = {
    vAxes: {
      1: {
        format: '##%',
        ticks: ticks,
        viewWindow: {
          min: axisMin,
          max: axisMax,
        },
      },
    },
    series: {
      0: {
        targetAxisIndex: 0,
        type: 'area',
      },
      1: {
        targetAxisIndex: 1,
        type: 'line',
      },
    }
  };

  chart.draw(data, options);
});

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

Google Charts display options

1 Answers