Multiple Google charts - displaying a tooltip /crosshair on all charts at once

Question

I'm trying to draw two separate Google charts and have them share a common x axis. The idea is that I can hover over one chart and see the tooltip appear on the other chart at the correct date.

A little like this but with a tooltip. The focusTarget attribute works great on a single chart, just not both.

I figure I have to somehow create a common date column but am not sure how to go about it.

My working (abbr.) code (so far) to display the charts.

var link = function(scope,element,attrs) {

  google.charts.setOnLoadCallback(drawUsageChart);

  google.charts.setOnLoadCallback(drawChartOne);

  function drawChartOne() {

    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', 'Sessions');

    var sessions = [786, 450, 866, 814, 192, 466, 984, 780, 922, 458, 786, 758, 701, 831, 901, 557, 114, 393, 689, 658, 103, 837, 164, 727, 593, 193, 945, 583, 948, 338];

    var start = new Date(1458345600 * 1000);
    var date;

    var dates = [];

    for(var i = 0; i < sessions.length; i++) {
      var newDate = start.setDate(start.getDate() + 1);
      data.addRow([new Date(newDate), sessions[i]]);
    }

    var options = {title:'Wot',
      height:300,
      lineWidth: 1.5,
      legend: { position: 'none' },
      crosshair: {
        trigger: 'both',
        orientation: 'vertical'
      },
      focusTarget: 'category',
    };

    var chart = new google.visualization.LineChart(document.getElementById('mcs-chart'));
    chart.draw(data, options);
  }

  function drawChartTwo() {

    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', 'Other Sessions');

    var sessions = [786, 450, 866, 814, 192, 466, 984, 780, 922, 458, 786, 758, 701, 831, 901, 557, 114, 393, 689, 658, 103, 837, 164, 727, 593, 193, 945, 583, 948, 338];

    var start = new Date(1458345600 * 1000);
    var date;

    var dates = [];

    for(var i = 0; i < sessions.length; i++) {
      var newDate = start.setDate(start.getDate() + 1);
      // dates.push(new Date(newDate));
      data.addRow([new Date(newDate), sessions[i]]);
    }

    var options = {
      title:'WOOOOT',
      height:300,
      lineWidth: 1.5,
      legend: { position: 'none' },
      crosshair: {
        trigger: 'both',
        orientation: 'vertical'
      },
      focusTarget: 'category',
    };

    var chart = new google.visualization.LineChart(document.getElementById('snr-chart'));
    chart.draw(data, options);
  }

};

Answer 1

tried using google.visualization.events.trigger to sync the two 'onmouseover' events

although the 'onmouseover' event fires on the other chart, the tooltip isn't shown

apparently, it's not possible to force a tooltip to display

you would have to write your own using the coordinates of the data point

but you could sync the charts on 'select'

expanding on the example in the question...

google.charts.load('current', {
  callback: function () {

    var chart1;
    var chart2;

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

    var outDiv1 = document.getElementById('mcs-chart-event');
    var outDiv2 = document.getElementById('snr-chart-event');

    var options1 = {title:'Wot',
      height:300,
      lineWidth: 1.5,
      legend: { position: 'none' },
      crosshair: {
        trigger: 'both',
        orientation: 'vertical'
      },
      focusTarget: 'category',
    };

    var options2 = {
      title:'WOOOOT',
      height:300,
      lineWidth: 1.5,
      legend: { position: 'none' },
      crosshair: {
        trigger: 'both',
        orientation: 'vertical'
      },
      focusTarget: 'category',
    };


    drawChartOne(data1);
    drawChartTwo(data2);

    google.visualization.events.addListener(chart1, 'select', function () {
      chart2.setSelection(chart1.getSelection());
    });

    google.visualization.events.addListener(chart2, 'select', function () {
      chart1.setSelection(chart2.getSelection());
    });

    google.visualization.events.addListener(chart1, 'onmouseover', function (properties) {
      outDiv1.innerHTML = 'chart1.onmouseover' + JSON.stringify(properties);
      google.visualization.events.trigger(chart2, 'onmouseover', properties);
    });

    google.visualization.events.addListener(chart2, 'onmouseover', function (properties) {
      outDiv2.innerHTML = 'chart2.onmouseover' + JSON.stringify(properties);
    });

    chart1.draw(data1, options1);
    chart2.draw(data2, options2);

    function drawChartOne(data) {
      data.addColumn('date', 'Date');
      data.addColumn('number', 'Sessions');

      var sessions = [786, 450, 866, 814, 192, 466, 984, 780, 922, 458, 786, 758, 701, 831, 901, 557, 114, 393, 689, 658, 103, 837, 164, 727, 593, 193, 945, 583, 948, 338];

      var start = new Date(1458345600 * 1000);
      var date;

      var dates = [];

      for(var i = 0; i < sessions.length; i++) {
        var newDate = start.setDate(start.getDate() + 1);
        data.addRow([new Date(newDate), sessions[i]]);
      }

      chart1 = new google.visualization.LineChart(document.getElementById('mcs-chart'));
    }

    function drawChartTwo(data) {
      data.addColumn('date', 'Date');
      data.addColumn('number', 'Other Sessions');

      var sessions = [786, 450, 866, 814, 192, 466, 984, 780, 922, 458, 786, 758, 701, 831, 901, 557, 114, 393, 689, 658, 103, 837, 164, 727, 593, 193, 945, 583, 948, 338];

      var start = new Date(1458345600 * 1000);
      var date;

      for(var i = 0; i < sessions.length; i++) {
        var newDate = start.setDate(start.getDate() + 1);
        data.addRow([new Date(newDate), sessions[i]]);
      }

      chart2 = new google.visualization.LineChart(document.getElementById('snr-chart'));
    }
  },
  packages: ['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="mcs-chart"></div>
<div id="snr-chart"></div>
<div id="mcs-chart-event"></div>
<div id="snr-chart-event"></div>