Google Charts - Dashboard ComboChart not stacking bars

Question

I am trying to get a stacked bar chart. The example below should stack two values for 2017-W30. Instead it's giving me 2017-W30 twice on the x axis.

I'm using isStacked in the options and it's not working.

'options': {
      width: '100%',
      height: 'auto',
      seriesType: 'bars',
      isStacked: true
    }

Side note: I will later try to get a goal line to work. This is why I am using 'chartType': 'ComboChart',.

Here is my working code:

// Load the Visualization API and the corechart package.
google.charts.load('current', {
  'packages': ['corechart', 'table', 'gauge', 'controls']
});

// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(gChart0);

function gChart0() {
  drawChart();
};

function drawChart() {

  var divID_suffixFunction = '_TEMPLATE';
  var divID_suffixParameter1 = '';

  //var urlString = '../Logs/clnLogsCountingEvents?grade=All&SC=1&CauseSC=3';
  //var urlString_temp = 'https://jsonplaceholder.typicode.com/users';
  var urlString_temp = 'https://httpbin.org/get'; //source: https://resttesttest.com/

  $.ajax({
    type: 'GET',
    dataType: 'json',
    contentType: "application/json",
    //url: urlString,
    url: urlString_temp,
    success: function(result) {

      //Manually loaded "result" with JSON that normally comes from "urlString".   
      result = [{
          "prodID": 2,
          "calendarWeek": "2017-W29",
          "qty": 1,
          "goal": 5
        },
        {
          "prodID": 2,
          "calendarWeek": "2017-W30",
          "qty": 3,
          "goal": 5
        },
        {
          "prodID": 1,
          "calendarWeek": "2017-W30",
          "qty": 2,
          "goal": 5
        }
      ];

      //Create DataTable
      var data = new google.visualization.DataTable();

      //Add Columns
      data.addColumn('number', 'prodID');
      data.addColumn('string', 'calendarWeek');
      data.addColumn('number', 'qty');
      data.addColumn('number', 'goal');

      //Add Rows
      var dataArray = [];
      $.each(result, function(i, obj) {
        dataArray.push([
          obj.prodID,
          obj.calendarWeek,
          obj.qty,
          obj.goal
        ]);
      });
      data.addRows(dataArray);

      //Create Data View
      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1, 2, 3]);

      // Create a dashboard.
      var dashboard = new google.visualization.Dashboard(
        document.getElementById('div_dashboard' + divID_suffixFunction + divID_suffixParameter1));

      var categoryPicker1 = new google.visualization.ControlWrapper({
        'controlType': 'StringFilter',
        'containerId': 'div_dashboard_categoryPicker1' + divID_suffixFunction + divID_suffixParameter1,
        'options': {
          'filterColumnIndex': 0, //Column used in control
          'ui': {
            //'label': 'Storage Bin',
            'labelStacking': 'vertical',
            'labelSeparator': ':'
          }
        }
      });

      var categoryPicker2 = new google.visualization.ControlWrapper({
        'controlType': 'StringFilter',
        'containerId': 'div_dashboard_categoryPicker2' + divID_suffixFunction + divID_suffixParameter1,
        'options': {
          'filterColumnIndex': 1, //Column used in control
          'ui': {
            //'label': 'Storage Bin',
            'labelStacking': 'vertical',
            'labelSeparator': ':'
          }
        }
      });

      var chart = new google.visualization.ChartWrapper({
        'chartType': 'ComboChart',
        'containerId': 'div_dashboard_chart' + divID_suffixFunction + divID_suffixParameter1,
        'view': {
          'columns': [1, 2]
        },
        'options': {
          width: '100%',
          height: 'auto',
          seriesType: 'bars',
          isStacked: true,
          //series: { 2: { type: 'line' } }
        }
      });

      //Object Binding
      dashboard.bind([categoryPicker1, categoryPicker2], [chart]);

      // Draw the dashboard.
      dashboard.draw(view);

    } //END  success: function (result) {
  }); //END  $.ajax({
} //END  function drawChart()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>


<div id="div_dashboard_TEMPLATE" style="">
  <table style="width:100%">
    <tr>
      <td style="width:15%;">
        <div id="div_dashboard_categoryPicker1_TEMPLATE" style="padding-right:35px;"></div>
      </td>
      <td style="width:15%;">
        <div id="div_dashboard_categoryPicker2_TEMPLATE" style="padding-right:35px;"></div>
      </td>
    </tr>
  </table><br />
  <div id="div_dashboard_chart_TEMPLATE"></div>
</div>

As always, your help is most appreciated!

WhiteHat WhiteHat · Accepted Answer · 2017-11-08T19:14:01

the isStacked option stacks the values for each column in the same row

in order to stack multiple values for the same week,
your data would need to look similar to the following...

['calendarWeek', 'prodID 1', 'prodID 2', 'goal'],
['2017-W29', null, 1, 5],
['2017-W30', 2, 3, 5],

see following working snippet...

google.charts.load('current', {
  packages: ['controls']
}).then(function () {
  //Manually loaded "result" with JSON that normally comes from "urlString".
  result = [{
      "prodID": 2,
      "calendarWeek": "2017-W29",
      "qty": 1,
      "goal": 5
    },
    {
      "prodID": 2,
      "calendarWeek": "2017-W30",
      "qty": 3,
      "goal": 5
    },
    {
      "prodID": 1,
      "calendarWeek": "2017-W30",
      "qty": 2,
      "goal": 5
    }
  ];

  //Create DataTable
  var data = new google.visualization.DataTable();

  //Add Columns
  data.addColumn('string', 'calendarWeek');
  $.each(result, function(i, obj) {
    var colIndex = getColumnIndex('prodID ' + obj.prodID);
    if (colIndex === -1) {
      data.addColumn('number', 'prodID ' + obj.prodID);
    }
  });
  data.addColumn('number', 'goal');

  //Add Rows
  var dataArray = [];
  $.each(result, function(i, obj) {
    var rowIndex = getRowIndex(obj.calendarWeek);
    if (rowIndex === -1) {
      rowIndex = data.addRow();
    }
    data.setValue(rowIndex, 0, obj.calendarWeek);
    data.setValue(rowIndex, getColumnIndex('prodID ' + obj.prodID), obj.qty);
    data.setValue(rowIndex, getColumnIndex('goal'), obj.goal);
  });

  //Create Data View
  var view = new google.visualization.DataView(data);

  // Create a dashboard.
  var dashboard = new google.visualization.Dashboard(
    document.getElementById('div_dashboard'));

  var categoryPicker1 = new google.visualization.ControlWrapper({
    'controlType': 'StringFilter',
    'containerId': 'div_dashboard_categoryPicker1',
    'options': {
      'filterColumnIndex': getColumnIndex('calendarWeek'), //Column used in control
      'ui': {
        'labelStacking': 'vertical',
        'labelSeparator': ':'
      }
    }
  });

  var series = {};
  series[getColumnIndex('goal') - 1] = { type: 'line' };
  var chart = new google.visualization.ChartWrapper({
    'chartType': 'ComboChart',
    'containerId': 'div_dashboard_chart',
    'options': {
      width: '100%',
      height: 'auto',
      seriesType: 'bars',
      isStacked: true,
      series: series
    }
  });


  //Object Binding
  dashboard.bind([categoryPicker1], [chart]);

  // Draw the dashboard.
  dashboard.draw(view);

  function getColumnIndex(label) {
    var colIndex = -1;
    for (var i = 0; i < data.getNumberOfColumns(); i++) {
      if (data.getColumnLabel(i) === label) {
        colIndex = i;
      }
    }
    return colIndex;
  }

  function getRowIndex(week) {
    var rowIndex = -1;
    for (var i = 0; i < data.getNumberOfRows(); i++) {
      if (data.getValue(i, 0) === (week)) {
        rowIndex = i;
      }
    }
    return rowIndex;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="div_dashboard">
  <div id="div_dashboard_categoryPicker1"></div>
  <div id="div_dashboard_categoryPicker2"></div>
  <div id="div_dashboard_chart"></div>
</div>

Google Charts - Dashboard ComboChart not stacking bars

1 Answers