Combo chart customize tooltips issue

[Tomek Szadkowski]

Hello everyone, I'm struggling with tooltips on my combo Chart, I hope you are able to help me with that.

Right now (in the code below) we have default tooltips. What I want to do is to add different customize (with html) tooltip to every part of column.

So e.g if mouse is on 2006/2007 Madagascar in tooltip you will get "<table><tr><td>Hello, we are in 2006/2007</td></tr><tr><td style="font-weight:bold">Madagascar !</td></tr></table>"

Can you show me how to add this properly to the code below?

Thank you in advance! 

Cheers 

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Average'],
    ['2004/05',  165,      938,         522,             998,                 614.6],
    ['2005/06',  135,      1120,        599,             1268,                682],
    ['2006/07',  157,      1167,        587,             807,                 623],
    ['2007/08',  139,      1110,        615,             968,                 609.4],
    ['2008/09',  136,      691,         629,             1026,              569.6]
  ]);

  // Create and draw the visualization.
  var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
  
  var options = {
        backgroundColor: 'none',
        colors: ['#94D635', '#66AC00','#5A8120','#427000'],
        height: 270,
        width: 830,
        areaOpacity: 1,
        isStacked: true,
        tooltip: { isHtml: true },
        seriesType: "bars",
        animation:{
            duration: 1500,
            easing: 'out'
        },
        vAxes: [{
            minValue: 0,
            min:0,
            title: 'Revenue',
            titleTextStyle: {color: '#666666'},
            textStyle: { color: '#666'},
            gridlines: {color: '#f5f5f5', count: 4},
            baselineColor: '#bbb'
        },{
            minValue: 0,
            min:0,
            title: 'Number of transactions',
            titleTextStyle: {color: '#666666'},
            textStyle: { color: '#666'},
            gridlines: {color: '#f5f5f5', count: 4},
            baselineColor: '#bbb'
        }],
        hAxis: {
            title: 'Month',
            titleTextStyle: {color: '#666666'},
            count: 1,
            textStyle: { color: '#666666'}
        },
        series: {
            0: {
                targetAxisIndex: 0
            },
            1: {
                targetAxisIndex: 0
            },
            2: {
                targetAxisIndex: 0
            },
            3: {
                targetAxisIndex: 0
            },
            4: {
                type: "line",
                color: "#333",
                targetAxisIndex: 1
            }

        },
        titlePosition: 'out',
        axisTitlesPosition: 'out',
        backgroundColor: {fill: "none"},
        legend: {
            textStyle: {color: '#666666'},
            alignment: 'end',
            position: 'top'
        }
    
    
  }
  ac.draw(data, options);
}
​

[asgallant]

You need to add a "tooltip" role column  for each data column:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Month');
data.addColumn('number', 'Bolivia');
data.addColumn({type: 'string', role: 'tooltip'});
data.addColumn('number', 'Ecuador');
data.addColumn({type: 'string', role: 'tooltip'});
data.addColumn('number', 'Madagascar');
data.addColumn({type: 'string', role: 'tooltip'});
data.addColumn('number', 'Papua New Guinea');
data.addColumn({type: 'string', role: 'tooltip'});
data.addColumn('number', 'Average');
data.addColumn({type: 'string', role: 'tooltip'});
data.addRows([
    ['2004/05', 165, null, 938, null, 522, null, 998, null, 614.6, null],
    ['2005/06', 135, null, 1120, null, 599,  null, 1268, null, 682, null],
    ['2006/07', 157, null, 1167, null, 587, null, 807, null, 623, null],
    ['2007/08', 139, null, 1110, null, 615, null, 968, null, 609.4, null],
    ['2008/09', 136, null, 691, null, 629, null, 1026, null, 569.6, null]
]);
for (var i = 0, rows = data.getNumberOfRows(), month; i < rows; i++) {
    month = data.getValue(i, 0);
    for (var j = 1, cols = data.getNumberOfColumns(), label; j < cols; j += 2) {
        label = data.getColumnLabel(j);
        // set the tooltip for this column
        data.setValue(i, j + 1, '<table><tr><td>Hello, we are in ' + month + '</td></tr><tr><td style="font-weight:bold">' + label + '!</td></tr></table>');
    }
}

then in the chart options, set the tooltip.isHtml option to true:

tooltip: {
    isHtml: true
}

[Tomek Szadkowski]

Thank you :)

1 thing I had to change to make it works.

I had to add 'p': {'html': true}

data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});

instead of 

tooltip: {
    isHtml: true
}

which simply didn't work.

Cheers

Tomek

[asgallant]

You're right - I forgot about the column property.  You do need to have the tooltip.isHtml set to true, though.