Google barchart grouped and stacked

Question

elow you will find my grouped and stacked barchart, this works so far fine. But how can I add the information of the grouped value.

If I roll over each block I get the value of this block, but I need the cumulation of the blocks.

Example: Block1: 1.000 Block2: 1.500 Block3: 1.000 Block4: 2.000

If I roll over the third block the value must be 3.500.

<script type="text/javascript" src="https://www.google.com/jsapi"></script>   
<script type="text/javascript">

  google.load('visualization', '1.1', {'packages': ['bar']});

google.setOnLoadCallback(drawStuff);

function drawStuff() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', '');
    data.addColumn('number', 'level 1');
    data.addColumn('number', 'level 2');
    data.addColumn('number', 'level 3');
    data.addColumn('number', 'level 4'); 
    data.addColumn('number', 'current value');    
    data.addRows([
        ['Team1',  {!Team1_l1}, {!Team1_l2}, {!Team1_l3}, {!Team1_l4}, {!Team1_cv}],
        ['Team2',  {!Team2_l1}, {!Team2_l2}, {!Team2_l3}, {!Team2_l4}, {!Team2_cv}],
    ]);

    var options = {
        isStacked: true,
        width: 890,
        height: 500,
        backgroundColor: '#F8F8F8',

        chartArea: { backgroundColor: '#F8F8F8' },

        chart: {
            subtitle: 'current view of the incentive'
        },        
        vAxis: {
            format: 'decimal',
            viewWindow: {
                min: 0,
                max: 30000000
            }
        },       
        series: {
            4: { targetAxisIndex: 1 }, 
            5: { targetAxisIndex: 1 }
        }
    };
    var chart = new google.charts.Bar(document.getElementById('chart_div'));
    chart.draw(data, google.charts.Bar.convertOptions(options));
}

</script>

<div id="chart_div"></div>

WhiteHat WhiteHat · Accepted Answer · 2018-04-04T12:04:05

only way to change the tooltip is to provide a custom one using a tooltip column role

however, column roles are not support by Material charts (along with many other options)
google.charts.Bar --- packages: ['bar']

using a Classic chart is the only option...
google.visualization.ColumnChart --- packages: ['corechart']

to aggregate the values of each stack, provide a custom tooltip
use a DataView and the setColumns() method to dynamically add columns for the tooltips

to use custom html tooltip, must set property --> html: true -- on the column,
and set chart option --> tooltip: {isHtml: true}

there is a minor bug with DataView, it does not respect column properties
must convert back to a DataTable before drawing --> dataView.toDataTable()

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', '');
  data.addColumn('number', 'level 1');
  data.addColumn('number', 'level 2');
  data.addColumn('number', 'level 3');
  data.addColumn('number', 'level 4');
  data.addColumn('number', 'current value');
  data.addRows([
    ['Team1',  1000, 1500, 1000, 2000, 1800],
    ['Team2',  2000, 2500, 2000, 3000, 2800]
  ]);

  var options = {
    isStacked: true,
    width: 890,
    height: 500,
    backgroundColor: '#F8F8F8',
    chartArea: {
      backgroundColor: '#F8F8F8'
    },
    chart: {
      subtitle: 'current view of the incentive'
    },
    colors: ['#2196f3', '#42a5f5', '#64b5f6', '#90caf9', '#bbdefb'],
    tooltip: {
      isHtml: true
    },
    vAxis: {
      format: 'decimal',
      viewWindow: {
        min: 0,
        max: 15000
      }
    }
  };

  // number formatter
  var formatNumber = new google.visualization.NumberFormat({
    pattern: options.vAxis.format
  });

  // build data view columns
  var viewColumns = [];
  for (var col = 0; col < data.getNumberOfColumns(); col++) {
    addColumn(col);
  }
  function addColumn(col) {
    // add data table column
    viewColumns.push(col);

    // add tooltip column
    if ((col > 0) && (col < (data.getNumberOfColumns() - 1))) {
      viewColumns.push({
        type: 'string',
        role: 'tooltip',
        calc: function (dt, row) {
          // calculate aggregate
          var aggregateValue = 0;
          for (var aggCol = 1; aggCol <= col; aggCol++) {
            aggregateValue += dt.getValue(row, aggCol);
          }

          // build custom tooltip
          var tooltip = '<div class="ggl-tooltip"><div><span>';
          tooltip += dt.getFormattedValue(row, 0) + '</span></div>';
          tooltip += '<div>' + dt.getColumnLabel(col) + ':&nbsp;';
          tooltip += '<span>' + formatNumber.formatValue(aggregateValue) + '</span></div></div>';

          return tooltip;
        },
        p: {html: true}
      });
    }
  }
  var dataView = new google.visualization.DataView(data);
  dataView.setColumns(viewColumns);

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  // use data view to draw chart
  chart.draw(dataView.toDataTable(), options);
});

.ggl-tooltip {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  font-family: Arial, Helvetica;
  font-size: 14px;
  padding: 12px 12px 12px 12px;
}

.ggl-tooltip div {
  margin-top: 4px;
}

.ggl-tooltip span {
  font-weight: bold;
}

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

note: jsapi should no longer be used to load the charts library,
according to the release notes...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. The last update, for security purposes, was with a pre-release of v45. Please use the new gstatic loader.js from now on.

this will only change the load statement, see above snippet...

Google barchart grouped and stacked

1 Answers