Google charts gridlines, colors

Question

I'm trying to create a bar chart with some kind of groups. Every column is different thing, but some of them belong to the same group and I want them to be grouped by a line or something. Another thing, I would like to be able to have different colors for different values. High numbers would have green bars, low numbers red.

Then, I would like to have vertical gridlines in line chart like in the picture.

I tried vAxis: { gridlines: { count: 10 } } but it didn't work. All I get are horizontal gridlines.

Any ideas on how to do it? Or is there any other charting library that can do it? Thank you.

WhiteHat WhiteHat · Accepted Answer · 2017-03-21T16:15:49

vAxis.gridlines are displayed as horizontal lines,

to help identify where the y-axis label is placed

to get vertical lines, need to use hAxis.gridlines

however, hAxis.gridlines are only supported on a continuous axis

in other words, the data type for the first column or x-axis,
must be 'date', 'number', etc...
-- not 'string'

changing the data type of the x-axis will display hAxis.gridlines by default,
but then you can modify if needed...

as for the color range, you can use a 'style' column to control the color

see following working snippet, 'style' columns are added using a DataView

the color range is built dynamically, based on the number of colors used,
and the value range of each each series column

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['X', 'A', 'B', 'C'],
      [1, 3, 7, 3],
      [2, 1, 3, 5],
      [3, 5, 8, 2],
      [4, 4, 8, 4]
    ]);
    var view = new google.visualization.DataView(data);
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    var table = new google.visualization.Table(document.getElementById('table_div'));
    var options = {
      legend: {
        position: 'none'
      }
    };
    var colors = ['red', 'orange', 'yellow', 'green'];

    buildChart();
    window.addEventListener('resize', drawChart, false);

    function drawChart() {
      chart.draw(view, options);
      table.draw(view);
    }

    function buildChart() {
      var dataRange = [];
      var viewColumns = [0];
      $.each(new Array(data.getNumberOfColumns()), function (index) {
        if (index === 0) {
          return;
        }
        dataRange.push(data.getColumnRange(index));
        viewColumns.push(index);
        viewColumns.push({
          calc: function (dt, row) {
            var minValue = getRangeValue(0);
            var maxValue = getRangeValue(1);
            var groupValue = (maxValue - minValue) / colors.length;
            for (var i = 0; i < colors.length; i++) {
              if (dt.getValue(row, index) <= ((groupValue * (i + 1)) + minValue)) {
                return colors[i];
              }
            }
          },
          type: 'string',
          role: 'style'
        });
      });
      view.setColumns(viewColumns);

      function getRangeValue(index) {
        var rangeValue = null;
        dataRange.forEach(function (range) {
          if (index) {
            rangeValue = rangeValue || range.max;
            rangeValue = Math.max(rangeValue, range.max);
          } else {
            rangeValue = rangeValue || range.min;
            rangeValue = Math.min(rangeValue, range.min);
          }
        });
        return rangeValue;
      }

      drawChart();
    }
  },
  packages:['corechart', 'table']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="chart_div"></div>
<div id="table_div"></div>

Google charts gridlines, colors

1 Answers