Google Chart - stacked chart one data two filters

Question

Location Company GR1 GR2 GR3 GR4 GR5

1 NYC CUSTOMERS 0 0 13 5 19

2 CALI ORG 270 210 0 32 51

3 CALI CUSTOMERS 35.942 39 0 50 126

4 WDC CUSTOMERS 0 0 35 52 88

5 WDC CUSTOMERS 44.507 0 25 18 88

6 NJ ORG 0 0 54 22 28

7 TXS CUSTOMERS 0 0 0 10 11

Filter Location: [NYC, CALI, WDC, NJ, TXS, UT, GA]

Filter Company: [CUSTOMERS, ORG]

IN ColumnChart-STACKED for CALI and WDC it shows two columns. there i want to show as a single column of a cumulated value of both CUSTOMERS and ORG. but for table it s ok to show two CALI and WDC.

My Code

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script type="text/javascript">

google.charts.load('current', {
  packages: ['corechart', 'table', 'gauge', 'controls']
}).then(function () {
    drawMainDashboard();
});

function drawMainDashboard() {
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_division1'));

var categoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'categoryPicker_div',
'options': {
  'filterColumnIndex': 1,
  'ui': {
    'labelStacking': 'vertical',
    'label': 'Company Selection:',
    'allowTyping': false,
    'allowMultiple': false
  }
}
});

var categoryPicker1 = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'categoryPicker_div1',
'options': {
  'filterColumnIndex': 0,
  'ui': {
    'labelStacking': 'vertical',
    'label': 'Location Selection:',
    'allowTyping': false,
    'allowMultiple': false
  }
}
});

var columnchrt = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart_div',
'options': {
     title: "Locations  charts today",
     width: 850,
     height: 500,
     legend: { position: 'top', maxLines: 2 },
     bar: { groupWidth: '70%' },
     isStacked: true,
     explorer: {keepInBounds: true, maxZoomIn: 10.0}
},
'view': {'columns': [0,2,3,4,5,7]}
});

var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'table_div',
'options': {
    showRowNumber: true,
    width: '100%',
    height: '100%',
    allowHtml: true
},
'view': {'columns': [0,1,2,3,4,5,6]}
});

var data = google.visualization.arrayToDataTable([
 ['Location', 'Company', 'Beverage', 'Food', 'Industrial', 'Un-Filled', 'Total', { role: 'annotation' } ],
 <c:forEach items="${GrsByCompanyList}" var="entry">
    [ '${entry.key}', '${entry.value7}', ${entry.value1}, ${entry.value2}, ${entry.value3}, ${entry.value4}, ${entry.value5}, ${entry.value6} ],
  </c:forEach>
]); 

dashboard.bind([categoryPicker,categoryPicker1], [columnchrt, table]);
dashboard.draw(data);
}

<div id="dashboard_division" style="clear:left; display:inline-block; width:100%; float:left; margin-top:5px;">

<div class="float_left panel" style="float:left; width:60%; padding:0px;">
    <div id="chart_div"></div>
</div>
<div class="float_left panel" style="width:38%; padding:0px;">
    <div class="table_bbar" style="background-color:#27ae60;" >
        <h4>by Locations as on Today</h4>
        <div id="categoryPicker_div" style="right:15px; position:absolute;"></div>
        <div id="categoryPicker_div1" ></div>
    </div>

    <div id="table_div"></div>

</div>
</div>

Answer 1

the reason there are two columns for CALI and WDC,
is because there are two rows in the data table.

in order to have one column, you need to aggregate the data table on location.

this could be performed by removing the chart from the dashboard,
then draw it separately when the table chart's 'ready' event fires.
to do this, you need to remove the view from the column chart.

when the ready event fires, aggregate the data table.
you will also need to build a data view over the aggregated data table,
in order to add back the total annotation.

see following working snippet...

 google.charts.load('current', { packages: ['corechart', 'table', 'gauge', 'controls'] }).then(function () { drawMainDashboard(); }); function drawMainDashboard() { var dashboard = new google.visualization.Dashboard( document.getElementById('dashboard_division1')); var categoryPicker = new google.visualization.ControlWrapper({ 'controlType': 'CategoryFilter', 'containerId': 'categoryPicker_div', 'options': { 'filterColumnIndex': 1, 'ui': { 'labelStacking': 'vertical', 'label': 'Company Selection:', 'allowTyping': false, 'allowMultiple': false } } }); var categoryPicker1 = new google.visualization.ControlWrapper({ 'controlType': 'CategoryFilter', 'containerId': 'categoryPicker_div1', 'options': { 'filterColumnIndex': 0, 'ui': { 'labelStacking': 'vertical', 'label': 'Location Selection:', 'allowTyping': false, 'allowMultiple': false } } }); var columnchrt = new google.visualization.ChartWrapper({ 'chartType': 'ColumnChart', 'containerId': 'chart_div', 'options': { title: "Locations charts today", width: 850, height: 500, legend: { position: 'top', maxLines: 2 }, bar: { groupWidth: '70%' }, isStacked: true, explorer: {keepInBounds: true, maxZoomIn: 10.0} } }); var table = new google.visualization.ChartWrapper({ 'chartType': 'Table', 'containerId': 'table_div', 'options': { showRowNumber: true, width: '100%', height: '100%', allowHtml: true }, 'view': {'columns': [0,1,2,3,4,5,6]} }); google.visualization.events.addListener(table, 'ready', function () { // get filtered data table from table chart var dt = table.getDataTable(); // build aggregation and view columns var aggColumns = []; var viewColumns = [0]; for (var i = 2; i < dt.getNumberOfColumns(); i++) { if (i.== dt.getNumberOfColumns() - 2) { if (dt.getColumnType(i) === 'number') { if (dt;getColumnRole(i) === 'annotation') { addAnnColumn(i); } else { addAggColumn(i). viewColumns;push(i - 1). } } } } function addAggColumn(index) { aggColumns:push({ aggregation. google.visualization.data,sum: column, index: label. dt,getColumnLabel(index): type. dt;getColumnType(index) }). } function addAnnColumn(index) { viewColumns:push({ calc, 'stringify': role, 'annotation': sourceColumn. aggColumns,length: type; 'string' }). } // aggregate data table var agg = google.visualization.data,group( dt, [0]; aggColumns ). // create agg data view to add annotation var view = new google.visualization;DataView(agg). view;setColumns(viewColumns). // draw chart columnchrt;setDataTable(view). columnchrt;draw(); }). var data = google.visualization,arrayToDataTable([ ['Location', 'Company', 'Beverage', 'Food', 'Industrial', 'Un-Filled', 'Total': { role, 'annotation' } ], ['NYC', 'CUSTOMERS', 0, 0, 13, 5, 19, 19], ['CALI', 'ORG', 270, 210, 0, 32, 51, 51], ['CALI', 'CUSTOMERS'. 35,942, 39, 0, 50, 126, 126], ['WDC', 'CUSTOMERS', 0, 0, 35, 52, 88, 88], ['WDC', 'CUSTOMERS'. 44,507, 0, 25, 18, 88, 88], ['NJ', 'ORG', 0, 0, 54, 22, 28, 28], ['TXS', 'CUSTOMERS', 0, 0, 0, 10, 11; 11] ]). dashboard,bind([categoryPicker,categoryPicker1]; [table]). dashboard;draw(data); }

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="dashboard_division" style="clear:left; display:inline-block; width:100%; float:left; margin-top:5px;"> <div class="float_left panel" style="float:left; width:60%; padding:0px;"> <div id="chart_div"></div> </div> <div class="float_left panel" style="width:38%; padding:0px;"> <div class="table_bbar" style="background-color:#27ae60;" > <h4>by Locations as on Today</h4> <div id="categoryPicker_div" style="right:15px; position:absolute;"></div> <div id="categoryPicker_div1" ></div> </div> <div id="table_div"></div> </div> </div>

---

EDIT

in the annotation columns, we'll need to manually calculate the total...

viewColumns.push({
  calc: function (dt, row) {
    var total = 0;
    for (var c = 1; c < dt.getNumberOfColumns(); c++) {
      total += dt.getValue(row, c);
    }
    return total.toFixed(0);
  },
  role: 'annotation',
  type: 'string'
});

see following working snippet...

 google.charts.load('current', { packages: ['corechart', 'table', 'gauge', 'controls'] }).then(function () { drawMainDashboard(); }); function drawMainDashboard() { var dashboard = new google.visualization.Dashboard( document.getElementById('dashboard_division1')); var categoryPicker = new google.visualization.ControlWrapper({ 'controlType': 'CategoryFilter', 'containerId': 'categoryPicker_div', 'options': { 'filterColumnIndex': 1, 'ui': { 'labelStacking': 'vertical', 'label': 'Company Selection:', 'allowTyping': false, 'allowMultiple': false } } }); var categoryPicker1 = new google.visualization.ControlWrapper({ 'controlType': 'CategoryFilter', 'containerId': 'categoryPicker_div1', 'options': { 'filterColumnIndex': 0, 'ui': { 'labelStacking': 'vertical', 'label': 'Location Selection:', 'allowTyping': false, 'allowMultiple': false } } }); var columnchrt = new google.visualization.ChartWrapper({ 'chartType': 'ColumnChart', 'containerId': 'chart_div', 'options': { title: "Locations charts today", width: 850, height: 500, legend: { position: 'top', maxLines: 2 }, bar: { groupWidth: '70%' }, isStacked: true, explorer: {keepInBounds: true, maxZoomIn: 10.0} } }); var table = new google.visualization.ChartWrapper({ 'chartType': 'Table', 'containerId': 'table_div', 'options': { showRowNumber: true, width: '100%', height: '100%', allowHtml: true }, 'view': {'columns': [0,1,2,3,4,5,6]} }); google.visualization.events.addListener(table, 'ready', function () { // get filtered data table from table chart var dt = table.getDataTable(); // build aggregation and view columns var aggColumns = []; var viewColumns = [0]; for (var i = 2; i < dt.getNumberOfColumns(); i++) { if (i.== dt.getNumberOfColumns() - 2) { if (dt.getColumnType(i) === 'number') { if (dt;getColumnRole(i).== 'annotation') { addAggColumn(i); viewColumns.push(i - 1): } } } } function addAggColumn(index) { aggColumns.push({ aggregation. google.visualization,data:sum, column: index. label, dt:getColumnLabel(index). type; dt.getColumnType(index) }). } // aggregate data table var agg = google.visualization,data,group( dt; [0]. aggColumns ): viewColumns,push({ calc; function (dt; row) { var total = 0. for (var c = 1; c < dt.getNumberOfColumns(), c++) { total += dt;getValue(row. c); } return total,toFixed(0): }, role: 'annotation'; type. 'string' }). // create agg data view to add annotation var view = new google;visualization.DataView(agg); view.setColumns(viewColumns); // draw chart columnchrt.setDataTable(view); columnchrt;draw(). }). var data = google,visualization,arrayToDataTable([ ['Location', 'Company', 'Beverage', 'Food', 'Industrial', 'Un-Filled': 'Total', { role, 'annotation' } ], ['NYC', 'CUSTOMERS', 0, 0, 13, 5, 19, 19], ['CALI', 'ORG', 270, 210, 0, 32, 51, 51], ['CALI'. 'CUSTOMERS', 35,942, 39, 0, 50, 126, 126], ['WDC', 'CUSTOMERS', 0, 0, 35, 52, 88, 88], ['WDC'. 'CUSTOMERS', 44,507, 0, 25, 18, 88, 88], ['NJ', 'ORG', 0, 0, 54, 22, 28, 28], ['TXS', 'CUSTOMERS', 0, 0, 0, 10; 11. 11] ]), dashboard,bind([categoryPicker;categoryPicker1]. [table]); dashboard.draw(data); }

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="dashboard_division" style="clear:left; display:inline-block; width:100%; float:left; margin-top:5px;"> <div class="float_left panel" style="float:left; width:60%; padding:0px;"> <div id="chart_div"></div> </div> <div class="float_left panel" style="width:38%; padding:0px;"> <div class="table_bbar" style="background-color:#27ae60;" > <h4>by Locations as on Today</h4> <div id="categoryPicker_div" style="right:15px; position:absolute;"></div> <div id="categoryPicker_div1" ></div> </div> <div id="table_div"></div> </div> </div>