Google chart group bars

Question

I have a similar graphic to this one. Each column has its own color, ie the color is duplicated in each column. But in the legend that would only appear: Green, Blue, Red.

var datainfo = [['Hora', 'Inicio', {role:'style'}], ['-4:00', 10, 'blue'], ..., ['-3:00', 10, 'blue'], ..., ['0:00', 10, 'green'], ..., ['3:00', 10, 'red']];
google.charts.setOnLoadCallback(function(){
                    var data = google.visualization.arrayToDataTable(datainfo);
                    var options = {
                        legend:{
                            position:'none'
                        },
                        width: obj.clientWidth,
                        height: 400,
                        title: 'Modulos quirurgicos',
                        chartArea: {
                            width: '90%'
                        },
                        hAxis: {
                            title: 'Hora',
                            minValue: 0
                        },
                            vAxis: {
                            title: 'Numero de modulos'
                        },
                    };

                    var chart = new google.visualization.ColumnChart(document.getElementById("chart"));
                    chart.draw(data, options);
                });

Is there any way to do it? Thank you

WhiteHat · Accepted Answer

sounds like you want to create a series for each
to do so, each set of values needs to be in it's own column in the data table

something like...

var data = google.visualization.arrayToDataTable([
  ['Hora', 'Region not exceeded', 'Accepted Region', 'Region exceeded'],
  ["-04:00", 1, null, null],
  ["00:00", null, 1902, null],
  ["+13:30", null, null, 0],
  ...

then you could assign colors using the colors chart option...

colors: ['#00f', '#0f0', '#f00']

you could also use a data view to transform the data table into this format
see following working snippet...

here, i wasn't sure how to determine when the color should change,
so the color provided in the data table is used to determine which column gets the value

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  window.addEventListener('resize', drawChart, false);
  drawChart();
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Hora', 'Inicio', {role: 'style'}],
    ["-04:00",1,"color:#00f"],
    ["-03:30",1,"color:#00f"],
    ["-03:00",5,"color:#00f"],
    ["-02:30",9,"color:#00f"],
    ["-02:00",12,"color:#00f"],
    ["-01:30",48,"color:#00f"],
    ["-01:00",65,"color:#0f0"],
    ["-00:30",663,"color:#0f0"],
    ["00:00",1902,"color:#0f0"],
    ["+00:30",996,"color:#0f0"],
    ["+01:00",755,"color:#0f0"],
    ["+01:30",296,"color:#f00"],
    ["+02:00",172,"color:#f00"],
    ["+02:30",114,"color:#f00"],
    ["+03:00",83,"color:#f00"],
    ["+03:30",65,"color:#f00"],
    ["+04:00",45,"color:#f00"],
    ["+04:30",40,"color:#f00"],
    ["+05:00",31,"color:#f00"],
    ["+05:30",32,"color:#f00"],
    ["+06:00",23,"color:#f00"],
    ["+06:30",20,"color:#f00"],
    ["+07:00",6,"color:#f00"],
    ["+07:30",1,"color:#f00"],
    ["+08:00",1,"color:#f00"],
    ["+08:30",1,"color:#f00"],
    ["+09:00",2,"color:#f00"],
    ["+09:30",0,"color:#f00"],
    ["+10:00",0,"color:#f00"],
    ["+10:30",0,"color:#f00"],
    ["+11:00",0,"color:#f00"],
    ["+11:30",1,"color:#f00"],
    ["+12:00",0,"color:#f00"],
    ["+12:30",0,"color:#f00"],
    ["+13:00",1,"color:#f00"],
    ["+13:30",0,"color:#f00"]
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0,
    {
      label: 'Region not exceeded',
      calc: function (dt, row) {
        var value = null;
        if (dt.getValue(row, 2) === 'color:#00f') {
          value = dt.getValue(row, 1);
        }
        return value;
      },
      type: 'number'
    },
    {
      label: 'Accepted Region',
      calc: function (dt, row) {
        var value = null;
        if (dt.getValue(row, 2) === 'color:#0f0') {
          value = dt.getValue(row, 1);
        }
        return value;
      },
      type: 'number'
    },
    {
      label: 'Region exceeded',
      calc: function (dt, row) {
        var value = null;
        if (dt.getValue(row, 2) === 'color:#f00') {
          value = dt.getValue(row, 1);
        }
        return value;
      },
      type: 'number'
    }
  ]);

  var options = {
    colors: ['#00f', '#0f0', '#f00'],
    bar: {
      groupWidth: '100%'
    },
    legend: {
      alignment: 'end',
      position: 'top'
    },
    width: '100%',
    height: 400,
    title: 'Modulos quirurgicos',
    chartArea: {
      height: '100%',
      width: '100%',
      top: 48,
      left: 72,
      right: 16,
      bottom: 72
    },
    hAxis: {
      title: 'Hora',
      minValue: 0
    },
    vAxis: {
      title: 'Numero de modulos'
    }
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(view, options);
}

UPDATE

using the style column for color,
you can select multiple bars by using chart method --> getSelection
which takes an array of the rows that should be selected

use data table method getFilteredRows to determine which rows to select

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  window.addEventListener('resize', drawChart, false);
  drawChart();
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Hora', 'Inicio', {role: 'style'}],
    ["-04:00",1,"#00f"],
    ["-03:30",1,"#00f"],
    ["-03:00",5,"#00f"],
    ["-02:30",9,"#00f"],
    ["-02:00",12,"#00f"],
    ["-01:30",48,"#00f"],
    ["-01:00",65,"#0f0"],
    ["-00:30",663,"#0f0"],
    ["00:00",1902,"#0f0"],
    ["+00:30",996,"#0f0"],
    ["+01:00",755,"#0f0"],
    ["+01:30",296,"#f00"],
    ["+02:00",172,"#f00"],
    ["+02:30",114,"#f00"],
    ["+03:00",83,"#f00"],
    ["+03:30",65,"#f00"],
    ["+04:00",45,"#f00"],
    ["+04:30",40,"#f00"],
    ["+05:00",31,"#f00"],
    ["+05:30",32,"#f00"],
    ["+06:00",23,"#f00"],
    ["+06:30",20,"#f00"],
    ["+07:00",6,"#f00"],
    ["+07:30",1,"#f00"],
    ["+08:00",1,"#f00"],
    ["+08:30",1,"#f00"],
    ["+09:00",2,"#f00"],
    ["+09:30",0,"#f00"],
    ["+10:00",0,"#f00"],
    ["+10:30",0,"#f00"],
    ["+11:00",0,"#f00"],
    ["+11:30",1,"#f00"],
    ["+12:00",0,"#f00"],
    ["+12:30",0,"#f00"],
    ["+13:00",1,"#f00"],
    ["+13:30",0,"#f00"]
  ]);

  var options = {
    legend: {
      position: 'none'
    },
    width: '100%',
    height: 400,
    title: 'Modulos quirurgicos',
    chartArea: {
      height: '100%',
      width: '100%',
      top: 48,
      left: 72,
      right: 16,
      bottom: 72
    },
    hAxis: {
      title: 'Hora',
      minValue: 0
    },
    series: {
      0: {targetAxisIndex: 0},
      1: {targetAxisIndex: 1},
      2: {targetAxisIndex: 2}
    },
    vAxis: {
      title: 'Numero de modulos',
      viewWindow: {
        min: 0,
        max: 2000
      }
    }
  };

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

  google.visualization.events.addOneTimeListener(chart, 'ready', function () {
    document.getElementById('btn-select-blue').addEventListener('click', selectSeries, false);
    document.getElementById('btn-select-green').addEventListener('click', selectSeries, false);
    document.getElementById('btn-select-red').addEventListener('click', selectSeries, false);
  });

  chart.draw(data, options);

  function selectSeries(sender) {
    var colorSelected = sender.target.getAttribute('data-color');
    var colorRows = data.getFilteredRows([{
      column: 2,
      value: colorSelected
    }]);
    var selection = [];
    colorRows.forEach(function (rowIndex) {
      selection.push({
        row: rowIndex
      });
    });
    chart.setSelection(selection);
  }
}

Google chart group bars

Answers (1)

Related Questions