HTML tooltip not working in columnChart

[Tim Johnson]

I paste this into the Playground and I get raw text "<div>my text</div>", not the HTML version I was expecting. What am I doing wrong?

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Austria', 'Bulgaria', 'Denmark', 'Tooltip'],
    ['2003',  1400360,    1400361,    1400362,   '<div>THIS IS IT</div>'],
  ]);

  data.setColumnProperty(4, 'role', 'tooltip');
  data.setColumnProperty(4, 'p', {'html': true});

  // Create and draw the visualization.
  new google.visualization.ColumnChart(document.getElementById('visualization')).
      draw(data,
           {title:"Yearly Coffee Consumption by Country",
            tooltip: {isHtml: true},
            width:600, height:400, legend:{position: "none"},
            vAxis: {title: "Year"},
            hAxis: {title: "Cups"}}
      );
}

[asgallant]

In order to use the custom tooltips, you have to set the proper column role for the tooltip column.  Given your code as-is, add these lines after creating the DataTable but before drawing the chart:

data.setColumnProperty(4, 'role', 'tooltip');

data.setColumnProperty(4, 'html', true);

[Tim Johnson]

Thanks for providing the correct syntax on the 2nd line (I already had the first line). Virtually all the other examples and documentation talk about setting the "p" property to {'html': true}, which is clearly not accurate.

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/mnWmVkYkBVY/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.

--
Tim

[asgallant]

When constructing the column using the standard DataTable constructor, the "p" stands for properties, so you are not supposed to set the p.html property.

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.

--
Tim

[Tim Johnson]

Ahh, got it now, thanks!

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.