Google charts - Geochart: how can I highlight a marker from an external element?

Question

I have a Google Geochart with this bunch of options:

options = {
    displayMode: 'markers',
    sizeAxis: { minSize: 5, maxSize: 5, minValue: 5, maxValue: 5 },
    colorAxis: { colors: ['#ac2925'] },
    defaultColor: '#ac2925',
    markerOpacity: 0.9,
    width: '100%',
    legend: false
};

I have an html table with some data inside, and I want to highlight a marker into the chart if I have a mousehover into the table and if the content of the cell is the same of the 'Value' field of the chart element. How can I do that?

score 3 · Accepted Answer · answered Feb 13 '19 at 10:30

its too late, but the answer might useful for some one.

In your HTML, call the JS function

<tr onmouseover="selectMyOption(0)">
    <td>My Label</td>
</tr>

In JS, get the position of the arrayToDataTable, make an object and pass to setSelection method.

function selectMyOption(x) {

var obj = [{row:x,column:null}]
geochart.setSelection(obj);

}

Google charts - Geochart: how can I highlight a marker from an external element?

1 Answers1