How To Create A Stacked Bar Chart For Three Sets Of Data?

I'm using Google Charts to visualize some metrics and I've ran into a bit of a snag. Right now I have a bar graph that looks like this (code below) and the code behind it is Javas

Solution 1:

to have 2 bars with only 1 segment and then a 3rd bar with 5 or so...

use the series option on the first two series to isolate each bar

use the hAxes option to hide the additional axis' labels

see following working snippet...

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Branch Office', 'DataSet 1', 'DataSet 2', 'DataSet 3-0', 'DataSet 3-1', 'DataSet 3-2', 'DataSet 3-3', 'DataSet 3-4'],
      ['Chicago', 400, 500, 200, 200, 200, 200, 200],
      ['New York', 400, 500, 200, 200, 200, 200, 200],
      ['Seattle', 400, 500, 200, 200, 200, 200, 200],
      ['Average', 400, 500, 200, 200, 200, 200, 200]
    ]);

    var options = {
      hAxes: {
        1: {
          textStyle: {
            color: 'transparent'
          }
        },
        2: {
          textStyle: {
            color: 'transparent'
          }
        }
      },
      bars: 'horizontal',
      colors: ['#1b9e77', '#d95f02', '#7570b3'],
      hAxis: {
        format: 'decimal'
      },
      height: 400,
      isStacked: true,
      series: {
        0: {
          targetAxisIndex: 1
        },
        1: {
          targetAxisIndex: 2
        }
      }
    };

    var chart = new google.charts.Bar(document.getElementById('chart_div'));
    chart.draw(data, google.charts.Bar.convertOptions(options));
  },
  packages: ['bar']
});

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

EDIT

using a core chart is another option, the following config option will get the chart close to the look & feel of material

theme: 'material'

however, core charts don't group the same as material

so have to create the groups manually, within the data, including rows for spacing

nor will it adjust the last color automatically

see following working snippet...

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Branch Office', 'DataSet 1', 'DataSet 2', 'DataSet 3-0', 'DataSet 3-1', 'DataSet 3-2', 'DataSet 3-3', 'DataSet 3-4'],
      [' ', 400, null, null, null, null, null, null],
      ['Chicago', null, 500, null, null, null, null, null],
      [' ', null, null, 200, 200, 200, 200, 200],
      [' ', null, null, null, null, null, null, null],
      [' ', 400, null, null, null, null, null, null],
      ['New York', null, 500, null, null, null, null, null],
      [' ', null, null, 200, 200, 200, 200, 200],
      [' ', null, null, null, null, null, null, null],
      [' ', 400, null, null, null, null, null, null],
      ['Seattle', null, 500, null, null, null, null, null],
      [' ', null, null, 200, 200, 200, 200, 200],
      [' ', null, null, null, null, null, null, null],
      [' ', 400, null, null, null, null, null, null],
      ['Average', null, 500, null, null, null, null, null],
      [' ', null, null, 200, 200, 200, 200, 200],
    ]);

    var options = {
      colors: ['#1b9e77', '#d95f02', '#4a148c', '#7b1fa2', '#9c27b0', '#ba68c8', '#e1bee7'],
      bar: {
        groupWidth: '90%'
      },
      hAxis: {
        format: 'decimal'
      },
      height: 400,
      isStacked: true,
      theme: 'material'
    };

    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  },
  packages: ['corechart']
});

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