Google charts tooltip with pie chart isn't shown

Question

Im using google chart to drow pie chart. I need to change slice offset value slice onhover event. I wrote some code but the problem is chart does not display tooltip.

// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', { 'packages': ['corechart'] });

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);

// Callback that creates and populates a data table, 
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {

    // Create the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addRows([
      ['Mushrooms', 3],
      ['Onions', 1],
      ['Olives', 1],
      ['Zucchini', 1],
      ['Pepperoni', 2]
    ]);

    var options = {
        is3D: true,
        tooltip: { textStyle: { color: '#000000' }, showColorCode: true }

    };
    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));




    function selectHandlerOver(e) {
        //alert('selectHandlerOver');
        var row = e.row;
        var s = $.parseJSON('{ ' +

            '"is3D": "true",' +
            '"slices": {  "' + row + '": { "offset": "0.2" } },' +
            '"animation": { "duration": "100", "easing": "out"}' +
        '}')
        chart.draw(data, s);
    }

    function selectHandlerOut(e) {
        //alert('selectHandlerOut');
        var row = e.row;
        var s = $.parseJSON('{"is3D": "true", "slices": {  "' + row + '": { "offset": "0.0" } } }')
        chart.draw(data, s);

    }

    google.visualization.events.addListener(chart, 'onmouseover', selectHandlerOver);
    google.visualization.events.addListener(chart, 'onmouseout', selectHandlerOut);

    chart.draw(data, options);
}

I think this is because O override onmouseover event with custom behaviour. Any suggestions?

Ε Г И І И О Ε Г И І И О · Accepted Answer · 2013-10-11T07:55:56

This is not because you have overridden the mouse over event. This is because you are calling chart.draw() inside it. Draw method cancels out any tooltips which rendered for the previous.

If you want fine-grained control, You are better off using something like jQueryUI to show your tooltips.

Google charts tooltip with pie chart isn't shown

1 Answers