Google Charts Timeline Highlight Many Bars On Mouseover

I'm currently working on some data visualization. For the visualization I am using Google Charts Timeline embedded within Dashboard (which implements functionality of zooming on x-

Solution 1:

when assigning chart events to chart wrappers...

you have to wait for the 'ready' event on the wrapper,
then listen for the event on wrapper.getChart()

see following example...

as for highlighting multiple entries,
here I try to trigger the onmouseover on the other rows,
the event is fired but the rows aren't highlighted

I thought about using setSelection instead, but for a Timeline chart...

only one entity can be selected at any given moment

only other option would be to modify the svg directly
but not recommended
you would need to log all the colors, including the highlight colors,
or try to provide your own

this example highlights all the Thomas Jefferson rows

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

    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));

    var dashControl = new google.visualization.ControlWrapper({
      'controlType': 'ChartRangeFilter',
      'containerId': 'control',
      'options': {
        'filterColumnIndex': 3,
        'ui': {
          'chartType': 'ScatterChart',
          'chartOptions': {
            'height': 70,
            'chartArea': {
              width: '80%',
              height: '80%'
            },
            'hAxis': {
              'baselineColor': 'none'
            }
          },
          'chartView': {
            'columns': [3, 4]
          },
          minRangeSize: 12*60*60*1000
        }
      }
    });

    var dashChart = new google.visualization.ChartWrapper({
      'chartType': 'Timeline',
      'containerId': 'chart',
      'options': {
        'chartArea': {
          width: '80%',
          height: '80%'
        },
        hAxis: {
          format: 'dd.MM HH:mm'
        }
      },
      'view': {
        'columns': [0, 1, 2, 3, 4]
      }
    });

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

    dataTable.addColumn({ type: 'string', id: 'Role' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: "string", id: "", "role": "tooltip", "p" : { "role" : "tooltip" ,'html': true} });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });

    dataTable.addRows([
      [ 'President', 'George Washington', 'some tooltip content', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ 'President', 'John Adams', 'some tooltip content', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'President', 'Thomas Jefferson', 'some tooltip content', new Date(1801, 2, 4), new Date(1809, 2, 4) ],
      [ 'Vice President', 'John Adams', 'some tooltip content', new Date(1789, 3, 21), new Date(1797, 2, 4)],
      [ 'Vice President', 'Thomas Jefferson', 'some tooltip content', new Date(1797, 2, 4), new Date(1801, 2, 4)],
      [ 'Vice President', 'Aaron Burr', 'some tooltip content', new Date(1801, 2, 4), new Date(1805, 2, 4)],
      [ 'Vice President', 'George Clinton', 'some tooltip content', new Date(1805, 2, 4), new Date(1812, 3, 20)],
      [ 'Secretary of State', 'John Jay', 'some tooltip content', new Date(1789, 8, 25), new Date(1790, 2, 22)],
      [ 'Secretary of State', 'Thomas Jefferson', 'some tooltip content', new Date(1790, 2, 22), new Date(1793, 11, 31)],
      [ 'Secretary of State', 'Edmund Randolph', 'some tooltip content', new Date(1794, 0, 2), new Date(1795, 7, 20)],
      [ 'Secretary of State', 'Timothy Pickering', 'some tooltip content', new Date(1795, 7, 20), new Date(1800, 4, 12)],
      [ 'Secretary of State', 'Charles Lee', 'some tooltip content', new Date(1800, 4, 13), new Date(1800, 5, 5)],
      [ 'Secretary of State', 'John Marshall', 'some tooltip content', new Date(1800, 5, 13), new Date(1801, 2, 4)],
      [ 'Secretary of State', 'Levi Lincoln', 'some tooltip content', new Date(1801, 2, 5), new Date(1801, 4, 1)],
      [ 'Secretary of State', 'James Madison', 'some tooltip content', new Date(1801, 4, 2), new Date(1809, 2, 3)]
    ]);

    google.visualization.events.addListener(dashChart, 'ready', function () {
      google.visualization.events.addListener(dashChart.getChart(), 'onmouseover', function (e) {
        Array.prototype.forEach.call(document.getElementById(dashChart.getContainerId()).getElementsByTagName('rect'), function(bar) {
          if (bar.getAttribute('fill') === '#f4b400') {
            bar.setAttribute('fill', '#f7cb4d')
          }
        });
      });
      google.visualization.events.addListener(dashChart.getChart(), 'onmouseout', function (e) {
        Array.prototype.forEach.call(document.getElementById(dashChart.getContainerId()).getElementsByTagName('rect'), function(bar) {
          if (bar.getAttribute('fill') === '#f7cb4d') {
            bar.setAttribute('fill', '#f4b400')
          }
        });
      });
    });

    dashboard.bind(dashControl, dashChart);
    dashboard.draw(dataTable);
  },
  packages:['controls', 'corechart', 'timeline']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
    <div id="chart" style="height: 200px;"></div>
    <div id="control"></div>
</div>

Solution 2:

with a little bit of tweaking using jQuery I was able to achieve my goal. just posting this for future reference or possible google'rs

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

    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));

    var dashControl = new google.visualization.ControlWrapper({
      'controlType': 'ChartRangeFilter',
      'containerId': 'control',
      'options': {
        'filterColumnIndex': 3,
        'ui': {
          'chartType': 'ScatterChart',
          'chartOptions': {
            'height': 70,
            'chartArea': {
              width: '80%',
              height: '80%'
            },
            'hAxis': {
              'baselineColor': 'none'
            }
          },
          'chartView': {
            'columns': [3, 4]
          },
          minRangeSize: 12*60*60*1000
        }
      }
    });

    var dashChart = new google.visualization.ChartWrapper({
      'chartType': 'Timeline',
      'containerId': 'chart',
      'options': {
        'chartArea': {
          width: '80%',
          height: '80%'
        },
        hAxis: {
          format: 'dd.MM HH:mm'
        }
      },
      'view': {
        'columns': [0, 1, 2, 3, 4]
      }
    });

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

    dataTable.addColumn({ type: 'string', id: 'Role' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: "string", id: "", "role": "tooltip", "p" : { "role" : "tooltip" ,'html': true} });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });

    dataTable.addRows([
      [ 'President', 'George Washington', 'some tooltip content', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ 'President', 'John Adams', 'some tooltip content', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'President', 'Thomas Jefferson', 'some tooltip content', new Date(1801, 2, 4), new Date(1809, 2, 4) ],
      [ 'Vice President', 'John Adams', 'some tooltip content', new Date(1789, 3, 21), new Date(1797, 2, 4)],
      [ 'Vice President', 'Thomas Jefferson', 'some tooltip content', new Date(1797, 2, 4), new Date(1801, 2, 4)],
      [ 'Vice President', 'Aaron Burr', 'some tooltip content', new Date(1801, 2, 4), new Date(1805, 2, 4)],
      [ 'Vice President', 'George Clinton', 'some tooltip content', new Date(1805, 2, 4), new Date(1812, 3, 20)],
      [ 'Secretary of State', 'John Jay', 'some tooltip content', new Date(1789, 8, 25), new Date(1790, 2, 22)],
      [ 'Secretary of State', 'Thomas Jefferson', 'some tooltip content', new Date(1790, 2, 22), new Date(1793, 11, 31)],
      [ 'Secretary of State', 'Edmund Randolph', 'some tooltip content', new Date(1794, 0, 2), new Date(1795, 7, 20)],
      [ 'Secretary of State', 'Timothy Pickering', 'some tooltip content', new Date(1795, 7, 20), new Date(1800, 4, 12)],
      [ 'Secretary of State', 'Charles Lee', 'some tooltip content', new Date(1800, 4, 13), new Date(1800, 5, 5)],
      [ 'Secretary of State', 'John Marshall', 'some tooltip content', new Date(1800, 5, 13), new Date(1801, 2, 4)],
      [ 'Secretary of State', 'Levi Lincoln', 'some tooltip content', new Date(1801, 2, 5), new Date(1801, 4, 1)],
      [ 'Secretary of State', 'James Madison', 'some tooltip content', new Date(1801, 4, 2), new Date(1809, 2, 3)]
    ]);

    google.visualization.events.addListener(dashChart, 'ready', function () {
  var original_rect_color;
  var new_rect_color;
  google.visualization.events.addListener(dashChart.getChart(), 'onmouseover', function (e) {
    var original_rect = $("div#dashboard div#chart g rect").filter(function(){return $(this).attr('style') == 'display: none;'})[0];
	var temp_original_color = $(original_rect).attr('fill');
	if(temp_original_color!=original_rect_color)
	{
		$("div#dashboard div#chart g rect").filter(function(){return $(this).attr('fill') == new_rect_color}).each(function(){
			$(this).attr('fill',original_rect_color);
		});
	}
	original_rect_color = temp_original_color;
	var original_rect_x = $(original_rect).attr('x');
	var original_rect_y = $(original_rect).attr('y');
	new_rect_color = $($("div#dashboard div#chart g rect").filter(function(){return $(this).attr('x') == original_rect_x && $(this).attr('y') == original_rect_y})[1]).attr('fill');
	$("div#dashboard div#chart g rect").filter(function(){return $(this).attr('fill') == original_rect_color}).each(function(){
		$(this).attr('fill',new_rect_color);
	});
  });
  google.visualization.events.addListener(dashChart.getChart(), 'onmouseout', function (e) {
    $("div#dashboard div#chart g rect").filter(function(){return $(this).attr('fill') == new_rect_color}).each(function(){
		$(this).attr('fill',original_rect_color);
	});
  });
});

    dashboard.bind(dashControl, dashChart);
    dashboard.draw(dataTable);
  },
  packages:['controls', 'corechart', 'timeline']
});

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
    <div id="chart" style="height: 200px;"></div>
    <div id="control"></div>
</div>