Google Visualization data.join method leads to tooltips being removed

Question

I'm merging two datasets using the google.visualization.data.join method. This works well apart from one of the data columns seemingly being deleted in the process.

More specifically, my datasets are built like this:

var data1 = new google.visualization.DataTable();

data1.addColumn('date', 'Date');
data1.addColumn('number', 'Amount');
data1.addColumn({type: 'string', role: 'tooltip'});

// Similar code for data2

I then proceed to join the two datasets like this:

var joinedData = google.visualization.data.join(data1, data2, 'full', [[0, 0]], [1], [1]);

And then initialize the chart like this:

// Create and draw the visualization.
var chart = new google.visualization.ScatterChart(
document.getElementById('chart-div'));
chart.draw(joinedData, {
    interpolateNulls: true,
    title: 'Test',
    width: 600, height: 400,
    vAxis: {title: "cr", titleTextStyle: {color: "green"}},
    hAxis: {title: "time", titleTextStyle: {color: "green"}},
    lineWidth: 1}
);

For some reason the tooltips are no longer visible when I hoved the mouse over the data rows. They were visible when I just presented one set alone.

Answer 1

need to include tooltip column indexes in the join method

google.visualization.data.join(dt1, dt2, joinMethod, keys, dt1Columns, dt2Columns);

dt1Columns & dt2Columns should be an array of column indexes you want included in the new table

var joinedData = google.visualization.data.join(
  data1, data2, 'full', [[0, 0]],

  // include tooltip column(s) from data table 1 here
  [1, 2],

  // include tooltip column(s) from data table 2 here
  [1, 2]
);