Google visualization - Customize tooltip point

Question

I have a chart in my page that is similar the example bellow:

google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBackgroundColor);

function drawBackgroundColor() {
      var dataTable = new google.visualization.DataTable();
      dataTable.addColumn("date", "Data");
      dataTable.addColumn("number", "T0 (%)");
      dataTable.addColumn("number", "T1 (%)");
      dataTable.addColumn("number", "T2 (%)");
      dataTable.addColumn("number", "T3 (%)");
      dataTable.addColumn("number", "OEE (%)");
      dataTable.addColumn("number", "OEE Médio");

      dataTable.addRows([
        [new Date(2017, 04, 02, 13, 01, 25, 00), 100, 100, 38.6, 100, 38.6, 89],
        [new Date(2017, 04, 02, 13, 32, 33, 00), 97, 92, 55.6, 100, 46.6, 89],
        [new Date(2017, 04, 02, 14, 00, 01, 00), 75, 89, 45.8, 88, 55.5, 89],
        [new Date(2017, 04, 02, 14, 35, 07, 00), 68, 75, 57.9, 99, 33.1, 89]
      ]);
      
      var date_formatter = new google.visualization.DateFormat({
                    pattern: "dd/MM/yyyy HH:mm:ss"
          });
      date_formatter.format(dataTable, 0);

      var options = {
        hAxis: {
          title: 'Linha do tempo'
        },
        vAxis: {
          title: '(%)',
          viewWindow: {
            min:0,
            max: 120
          }
        },
        explorer: {
          axis: 'horizontal',
          keepInBounds: true,
          maxZoomIn: 0.05
        },
        legend: { position: 'top' },
        colors: ['#772583', '#e05206', '#d28ac8', '#ecc200', '#69be28', '#0073cf'],
        pointSize: 4
      };

      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
      chart.draw(dataTable, options);
    }

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

When the user move to the point is showed datetime and the value of the line. I need to add a new information in this label. This value can be differente for each line. My ideia was add this information in datatable, but I couldn't insert this column without show it in the chart.

It's possible to add a new column in dataTable and just show it in a tooltip?

Answer 1

you can use a 'tooltip' column role

to build a custom tooltip for each series

see following working snippet,

a data view is used to add calculated columns for each series

the calculated column is used as a 'tooltip'

for html tooltips to work, the column must have a property for --> 'html: true'

and the options must have --> tooltip: {isHtml: true}

google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawBackgroundColor);

function drawBackgroundColor() {
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn("date", "Data");
  dataTable.addColumn("number", "T0 (%)");
  dataTable.addColumn("number", "T1 (%)");
  dataTable.addColumn("number", "T2 (%)");
  dataTable.addColumn("number", "T3 (%)");
  dataTable.addColumn("number", "OEE (%)");
  dataTable.addColumn("number", "OEE Médio");

  dataTable.addRows([
    [new Date(2017, 04, 02, 13, 01, 25, 00), 100, 100, 38.6, 100, 38.6, 89],
    [new Date(2017, 04, 02, 13, 32, 33, 00), 97, 92, 55.6, 100, 46.6, 89],
    [new Date(2017, 04, 02, 14, 00, 01, 00), 75, 89, 45.8, 88, 55.5, 89],
    [new Date(2017, 04, 02, 14, 35, 07, 00), 68, 75, 57.9, 99, 33.1, 89]
  ]);

  var date_formatter = new google.visualization.DateFormat({
    pattern: "dd/MM/yyyy HH:mm:ss"
  });
  date_formatter.format(dataTable, 0);

  // create view with tooltip columns for each series
  var viewColumns = [0];
  var dataView = new google.visualization.DataView(dataTable);
  $.each(new Array(dataTable.getNumberOfColumns()), function (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>';
        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;
      },
      p: {html: true},
      role: 'tooltip',
      type: 'string'
    });
  });
  dataView.setColumns(viewColumns);

  var options = {
    hAxis: {
      title: 'Linha do tempo'
    },
    vAxis: {
      title: '(%)',
      viewWindow: {
        min:0,
        max: 120
      }
    },
    explorer: {
      axis: 'horizontal',
      keepInBounds: true,
      maxZoomIn: 0.05
    },
    legend: { position: 'top' },
    colors: ['#772583', '#e05206', '#d28ac8', '#ecc200', '#69be28', '#0073cf'],
    pointSize: 4,
    tooltip: {isHtml: true}
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(dataView.toDataTable(), 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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="chart_div"></div>

note: the chart doesn't recognize the column property for 'html': true when drawn with a data view

so the data view is converted back to a data table when drawn...

chart.draw(dataView.toDataTable(), options);