Google Visualization Stacked Column Chart with Aggregation & Custom Tooltips

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

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

function gChart0() { drawDashboard()}

function drawDashboard() {
  const dummyJSON = [
[
{"id":"bucketName","label":"bucketName"},
{"id":"bin","label":"bin"},
{"id":"1_2_Shift_ERRORBIN","label":"1_2_Shift_ERRORBIN"},
{"id":"1_2_Shift_ERRORBIN_TT","role":"tooltip","label":"tooltip"},
{"id":"1_2_Shift_TRUCK","label":"1_2_Shift_TRUCK"},
{"id":"1_2_Shift_TRUCK_TT","role":"tooltip","label":"tooltip"},
{"id":"1_2_Shift_TRUCK01","label":"1_2_Shift_TRUCK01"},
{"id":"1_2_Shift_TRUCK01_TT","role":"tooltip","label":"tooltip"},
{"id":"1_2_Shift_TRUCK02","label":"1_2_Shift_TRUCK02"},
{"id":"1_2_Shift_TRUCK02_TT","role":"tooltip","label":"tooltip"},
{"id":"1_2_Shift_TRUCK04","label":"1_2_Shift_TRUCK04"},
{"id":"1_2_Shift_TRUCK04_TT","role":"tooltip","label":"tooltip"},
{"id":"1_2_Shift_TVSERROR","label":"1_2_Shift_TVSERROR"},
{"id":"1_2_Shift_TVSERROR_TT","role":"tooltip","label":"tooltip"},
{"id":"1_2_Shift_VBIN","label":"1_2_Shift_VBIN"},
{"id":"1_2_Shift_VBIN_TT","role":"tooltip","label":"tooltip"}
],
["1_2_Shift","TRUCK01",0,"custom tooltip A",0,"custom tooltip B",17,"custom tooltip C",0,"custom tooltip D",0,"custom tooltip E",0,"custom tooltip F",0,"custom tooltip G"],
["1_2_Shift","TRUCK04",0,"custom tooltip 1",0,"custom tooltip 2",0,"custom tooltip 3",0,"custom tooltip 4",20,"custom tooltip 5",0,"custom tooltip 6",0,"custom tooltip 7"],
["1_2_Shift","TRUCK04",0,"custom tooltip 1",0,"custom tooltip 2",0,"custom tooltip 3",0,"custom tooltip 4",40,"custom tooltip 5",0,"custom tooltip 6",0,"custom tooltip 7"]
];

var data = google.visualization.arrayToDataTable(dummyJSON);
var grouped = google.visualization.data.group(data, [0],
  [{'column': 2, 'aggregation': google.visualization.data.sum, 'type': 'number'},
  {'column': 4, 'aggregation': google.visualization.data.sum, 'type': 'number'},
  {'column': 6, 'aggregation': google.visualization.data.sum, 'type': 'number'},
  {'column': 8, 'aggregation': google.visualization.data.sum, 'type': 'number'},
  {'column': 10, 'aggregation': google.visualization.data.sum, 'type': 'number'},
  {'column': 12, 'aggregation': google.visualization.data.sum, 'type': 'number'},
  {'column': 14, 'aggregation': google.visualization.data.sum, 'type': 'number'}]
  );

  // add custom tooltip columns
  var viewColumns = [0];
  for (var i= 0; i < grouped.getNumberOfColumns(); i++) {
    addViewColumn(i);
  }

  function addViewColumn(index) {
    // ignore x-axis column
    if (index === 0) {
      return;
    }

    // add series column
    viewColumns.push(index);

    // add tooltip column - column role should directly follow the series it represents
    viewColumns.push({
      calc: function (dt, row) {
        // build tooltip
        var tooltip = '<div class="ggl-tooltip"><div><span>ADD CUSTOM TOOLTIP FOR: ';
        tooltip += dt.getFormattedValue(row, 0) + '</span></div>';
        tooltip += '<div>' + dt.getColumnLabel(index) + ':&nbsp;';
        tooltip += '<span>' + dt.getFormattedValue(row, index) + '</span></div>';
        tooltip += '<div>Add whatever you want for column: ' + index + ', row: ' + row + '</div></div>';

        return tooltip;
      },
      properties: {html: true},
      role: 'tooltip',
      type: 'string'
    });
  }

  // create data view
  var dataView = new google.visualization.DataView(grouped);
  dataView.setColumns(viewColumns);

  var options = {
    tooltip: { isHtml: true },
    height: 500,
    legend: { position: 'top', maxLines: 3 },
    bar: { groupWidth: '75%' },
    isStacked: true,
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
  chart.draw(dataView, options);
}

.ggl-tooltip {
  border: 1px solid #E0E0E0;
  font-size: 10pt;
  padding: 8px 8px 8px 8px;
}

.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>