I can't produce a code example at the moment, there's just not enough time 
for eerything, but here's some thoughts that may help.

The data sources have to have something in common. It could be a common 
data field in which case you can step through the data and look for the 
data, or they need to sorted in the same order in which case you can use 
the row indexes.

In the displayed table you need to add an event handler - 
https://developers.google.com/chart/interactive/docs/events - this is 
probably what you are referring to when you said you found the 
documentation.

When the event handler is triggered you need to get the row index in the 
table data table that triggered the handler. To do that see the first 
example on https://developers.google.cn/chart/interactive/docs/examples which 
uses  table.getSelection()[0].row; 

I used the same on http://brisray.com/google-charts/clickable.htm

Now you have the row index you can use that directly to manipulate the 
chart data so long as they are sorted in the same order. If not, use the 
row index to look up a common data field in the table data and search for 
it the chart data. You should know the column indexes to look in. Once you 
have found the data in the chart data you should also have the row index of 
that.

Suppose the row index in the table data is 5. The common data field in the 
table data is in column 3 but in column 6 of the chart data. You can use.

// Get the cell content from the table data
var content = tabledata.getValue(5 3);
// Search the chart data for the common data content
// Get the number of rows
var totalRows = chartdata.getNumberOfRows();
// Search the chart data
for (i = 0; i < totalRows; i++) {
   if content == chartdata.getValue(i 6);{
      var foundIndex = i;
      break;
}

Once you've found the row index in the chart data then you can use 
getSelection()  
in the chart.

This looks like it all should work but something tricky may turn up.

Ray
On Saturday, April 9, 2022 at 11:59:58 AM UTC-4 Hindami wrote:

> Hello All,
> i would like to make a table that can interact with chart like below
>
> [image: Screen Shot 2022-04-09 at 22.44.34.png]
>
> when i select the table with blue color, the bar chart with the same color 
> will popup the tooltip or highlight the bar.
>
> the problem is the data source used in table look very different than in 
> the column chart. 
>
> i have found the tutorial in the doc, but it using the same data source.
>
> please guide me, thank you.
>
>
>
>

-- 
You received this message because you are subscribed to the Google Groups 
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to [email protected].
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/01b974f1-8b0d-4375-84fe-37c6f0de066dn%40googlegroups.com.
  • [visualization-api] Re: Try to m... 'Ray Thomas' via Google Visualization API

Reply via email to