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!

Answer 1

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>