Try to make a table interact with bar chart

[Hindami]

Hello All,

i would like to make a table that can interact with chart like below

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.

[Ray Thomas]

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 setSelection()  in the chart.

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

Ray