Search code examples
chartsgoogle-visualizationgeomap

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


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?


Solution

  • 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);
    

    }