Custom tooltip is showing wrong data in Google JSAPI

Question

I am trying to change custom tooltip on mouse over using Google JSAPI. I was able to achieve the same. It gives me wrong data when I mouse over an item in the table. However when the data is not filtered it is showing correctly. What is wrong in my code?

function drawTable() {
    var data = new google.visualization.DataTable();

    data.addColumn({
        type: 'string',
        id: 'Position'
    });
    data.addColumn({
        type: 'string',
        id: 'Name'
    });
    data.addColumn({
        type: 'date',
        id: 'Start'
    });
    data.addColumn({
        type: 'date',
        id: 'End'
    });
    data.addColumn({
        'type': 'string',
        'role': 'tooltip',
        'p': {
            'html': true
        }
    });

    data.addRow(['President', "George Washington \rRig Ready", new Date(1789, 3, 29), new Date(1797, 2, 3), "Status: <br> 0"]);
    data.addRow(['President', 'John Adams', new Date(1797, 2, 3), new Date(1801, 2, 3), "Status: <br>some more stuff here1"]);
    data.addRow(['President', 'Thomas Jefferson', new Date(1801, 2, 3), new Date(1809, 2, 3), "Status: <br>some more stuff her2"]);
    data.addRow(['Vice President', 'John Adams', new Date(1789, 3, 20), new Date(1797, 2, 3), "Status: <br>some more stuff h3"]);
    data.addRow(['Vice President', 'Thomas Jefferson', new Date(1797, 2, 3), new Date(1801, 2, 3), "Status: <br>some more stuff her4"]);
    data.addRow(['Vice President', 'Aaron Burr', new Date(1801, 2, 3), new Date(1805, 2, 3), "Status: <br>some more stuff her5"]);
    data.addRow(['Vice President', 'George Clinton', new Date(1805, 2, 3), new Date(1812, 3, 19), "Status: <br>some more stuff here 6"]);
    data.addRow(['Secretary of State', 'John Jay', new Date(1789, 8, 25), new Date(1790, 2, 21), "Status: <br>some more stuff here 7"]);
    data.addRow(['Secretary of State', 'Thomas Jefferson', new Date(1790, 2, 21), new Date(1793, 11, 30), "Status: <br>some more stuff here 8"]);
    data.addRow(['Secretary of State', 'Edmund Randolph', new Date(1794, 0, 1), new Date(1795, 7, 19), "Status: <br>some more stuff here 9"]);
    data.addRow(['Secretary of State', 'Timothy Pickering', new Date(1795, 7, 19), new Date(1800, 4, 11), "Status: <br>some more stuff here 10"]);
    data.addRow(['Secretary of State', 'Charles Lee', new Date(1800, 4, 12), new Date(1800, 5, 4), "Status: <br>some more stuff here 11"]);
    data.addRow(['Secretary of State', 'John Marshall', new Date(1800, 5, 12), new Date(1801, 2, 3), "Status: <br>some more stuff here 12!"]);
    data.addRow(['Secretary of State', 'Levi Lincoln', new Date(1801, 2, 4), new Date(1801, 4, 0), "Status: <br>some more stuff here 13"]);
    data.addRow(['Secretary of State', 'James Madison', new Date(1801, 4, 1), new Date(1809, 2, 2), "Status: <br>some more stuff here 14"]);
    var dashboard = new google.visualization.Dashboard(document.querySelector('#dashboard'));

    var stringFilter = new google.visualization.ControlWrapper({
        controlType: 'StringFilter',
        containerId: 'string_filter_div',
        options: {
            filterColumnIndex: 1
        }
    });

    var chart = new google.visualization.ChartWrapper({
        options: {
            colors: ['#1F79BD', '#008898', '#009FDF', '#004B97', '#0A6284'],
            timeline: {
                colorByRowLabel: true
            },
            backgroundColor: '#D0ECFF'
        },
        chartType: 'Timeline',
        containerId: 'chart'

    });

    var table = new google.visualization.ChartWrapper({
        chartType: 'Table',
        containerId: 'table_div'

    });

    function myHandler(e) {
        if (e.row != null) {
            $(".google-visualization-tooltip").html(data.getValue(e.row, 4)).css({
                width: "auto",
                height: "auto"
            });
        }
    }

    google.visualization.events.addListener(chart, 'ready', function () {
        var charts = chart.getChart();
        google.visualization.events.addListener(charts, 'onmouseover', myHandler);
    });

    dashboard.bind([stringFilter], [table]);
    dashboard.bind([stringFilter], [chart]);
    dashboard.draw(data);
}

google.load('visualization', '1', {
    packages: ['controls'],
    callback: drawTable
});

Below is my Fiddler code:

http://jsfiddle.net/Ena84/51/

Scrrenshot

score 0 · Answer 1 · answered Feb 18 '15 at 12:58

I tried like this and it works like charm. Basically when we are filtering the text the table gets changed but in the chart it still referes to the default table.

I changed my Handler method like this and it works Awsome

  function myHandler(e){
        if(e.row != null){

            var filteredRows = $(".google-visualization-table-table").find('tbody').find('tr');

            $(".google-visualization-tooltip").html($(filteredRows[e.row +1]).find('td:eq(4)').text()).css({width:"auto",height:"auto"});
        }        
    }

http://jsfiddle.net/Ena84/54/

Custom tooltip is showing wrong data in Google JSAPI

1 Answers1