Google Chart HTML Tooltip displays html text

Question

I've specified HTML toolips in the options, but it still renders the HTML text in the tooltip instead of the result of the HTML. How can I fix this so that it renders the HTML result?

I create a data view and set the columns like so:

projectView.setColumns([0,1,3,{
    type:'string',
    role:'tooltip',
    calc:function(dt,row){
        var date = dt.getFormattedValue(row,0);
        var totalErrors = dt.getFormattedValue(row,3);
        var percent = Math.round((dt.getValue(row,3)/dt.getValue(row,1))*100);  
        return '<div><b>'+ date +'</b><br><b>Error Percent: </b>' + percent + '<br><b>Total Errors: </b>' + totalErrors + '</div>';
    }
}]);

And the options are like this:

var options = {
    width:850,
    height:375,
    chartArea: {width: '70%', height: '70%',left: 40,top:25},
    hAxis:{format:'MM/dd/yy'},
    vAxis:{logScale:false},         
    series:{0:{type:'line'},1:{type:'area'}},
    tooltip: { isHtml: true }};

Then I draw the chart:

var projectChart = new google.visualization.ComboChart(document.getElementById('project_chart_div'));
projectChart.draw(projectView, options);

asgallant asgallant · Accepted Answer · 2014-02-18T18:20:42

Specify the html property as true in the calculated column for the view:

projectView.setColumns([0,1,3,{
    type:'string',
    role:'tooltip',
    properties: {
        html: true
    },
    calc:function(dt,row){
        var date = dt.getFormattedValue(row,0);
        var totalErrors = dt.getFormattedValue(row,3);
        var percent = Math.round((dt.getValue(row,3)/dt.getValue(row,1))*100);  
        return '<div><b>'+ date +'</b><br><b>Error Percent: </b>' + percent + '<br><b>Total Errors: </b>' + totalErrors + '</div>';
    }
}]);

Google Chart HTML Tooltip displays html text

1 Answers