google charts trigger tooltip

Question

I created two doughnut google charts on my website and I turned off legend. I also stylized the html of tooltip and when I click on the piece of doughnut I am able to trigger the tooltip. The thing is that I want to trigger the specific part of doughnut from my legend written in html, is it even possible? My code is similar to:

function drawChart() {                                            
    var data = new google.visualization.DataTable();              
    data.addColumn("string", "");                                 
    data.addColumn("number", "");                                 
    data.addRows([                                                
        ["A", 1],                                                 
        ["B", 1],                                                 
        ["C", 2],                                                 
        ["D", 3],                                                 
        ["E", 4],                                                 
        ["F", 5],                                                 
        ["G", 6],                                                 
        ["H", 2],                                                 
        ["I", 1]                                                  
    ]);                                                           
                                                                  
    var chart = new google.visualization.PieChart("my_chart");    
                                                                  
    chart.draw(data, chart_options);                              
}                                                                 
                                                                  
var chart_options = {height: 300,                                 
                     pieHole: 0.5,                                
                     chartArea: {"width": "90%", "height": "90%"},
                     tooltip: {                                   
                         isHtml: true,                            
                         trigger: "selection"                     
                     },                                           
                     legend: {                                    
                         position: "none"                         
                     }};                                          
                                                                  
google.charts.load("current", {"packages":["corechart"]});        
google.charts.setOnLoadCallback(function() {drawChart() });       

and my html code is similar to:

<table id="summary">  
    <tr>                                                                                             
        <td>A:</td>                                                                    
        <td>1</td>       
    </tr>                                                                                            
    <tr>                                                                                             
        <td>B:</td>                                                                    
        <td>1</td>       
    </tr>        
    <tr>                                                                                             
        <td>C:</td>                                                                    
        <td>2</td>       
    </tr>                                                                                    
</table>                                                                                             

How can I trigger tooltip on "A" part of google charts when clicking (hover) on table tr td which contains "A" entry ?

Answer 1

use a click event on the table to determine which row was clicked.
then use the chart's setSelection method to select the chart.

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn("string", "");
  data.addColumn("number", "");
  data.addRows([
      ["A", 1],
      ["B", 1],
      ["C", 2],
      ["D", 3],
      ["E", 4],
      ["F", 5],
      ["G", 6],
      ["H", 2],
      ["I", 1]
  ]);
  var chart_options = {
    height: 300,
    pieHole: 0.5,
    chartArea: {"width": "90%", "height": "90%"},
    tooltip: {
      isHtml: true,
      trigger: "selection"
    },
    legend: {
      position: "none"
    }
  };
  var chart = new google.visualization.PieChart(document.getElementById("my_chart"));
  google.visualization.events.addListener(chart, 'ready', function () {
    // add click event to table
    var table = document.getElementById('summary');
    table.addEventListener('click', function (sender) {
      // find row clicked
        var rowIndex = null;
      switch (sender.target.tagName) {
        case 'TD':
          rowIndex = sender.target.parentNode.rowIndex;
            break;
          
        case 'TR':
          rowIndex = sender.target.rowIndex;
            break;
      }
      if (rowIndex !== null) {
        // set chart selection
        chart.setSelection([{row: rowIndex}]);
      }
    });
  });
  chart.draw(data, chart_options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="my_chart"></div>
<table id="summary">
    <tr>
        <td>A:</td>
        <td>1</td>
    </tr>
    <tr>
        <td>B:</td>
        <td>1</td>
    </tr>
    <tr>
        <td>C:</td>
        <td>2</td>
    </tr>
</table>