Although complete documentation of the HTML tooltip is not ready yet, here 
is a teaser for those who really cannot wait.

Open the ColumnChart 
example<https://code.google.com/apis/ajax/playground/?type=visualization#column_chart>in
 the visualization playground, replace the content of the example with 
the following, then press "Run Code":

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

function drawVisualization() {
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('string', 'Country');
  *// Use custom HTML content for the domain tooltip.*
  dataTable.addColumn({'type': 'string', 'role': 'tooltip', *'p': {'html': 
true}*});
  dataTable.addColumn('number', 'Gold');
  dataTable.addColumn('number', 'Silver');
  dataTable.addColumn('number', 'Bronze');

  dataTable.addRows([
    ['USA', createCustomHTMLContent(
'http://upload.wikimedia.org/wikipedia/commons/2/28/Flag_of_the_USA.svg', 46
, 29, 29), 46, 29, 29],
    ['China', createCustomHTMLContent(
'http://upload.wikimedia.org/wikipedia/commons/f/fa/Flag_of_the_People%27s_Republic_of_China.svg'
, 38, 27, 23), 38, 27, 23],
    ['UK', createCustomHTMLContent(
'http://upload.wikimedia.org/wikipedia/commons/a/ae/Flag_of_the_United_Kingdom.svg'
, 29, 17, 19), 29, 17, 19]
  ]);

  var options = {
    title: 'London Olympics Medals',
    colors: ['#FFD700', '#C0C0C0', '#8C7853'],
    focusTarget: 'category',
*    // Use the new HTML tooltip (default SVG one does not support HTML 
content).*
    *tooltip: {isHtml: true}*
  };

  // Create and draw the visualization.
  new google.visualization.ColumnChart(document.getElementById(
'visualization')).draw(dataTable, options);
  }

function createCustomHTMLContent(flagURL, totalGold, totalSilver, 
totalBronze) {
  return '<div style="padding:5px 5px 5px 5px;">' +
      '<img src="' + flagURL + '" style="width:75px;height:50px"/><br/>' +
      '<table>' +
      '<tr>' +
      '<td><img 
src="http://upload.wikimedia.org/wikipedia/commons/1/15/Gold_medal.svg"; 
style="width:25px;height:25px"/><td/>' +
      '<td><b>' + totalGold + '<b/><td/>' +
      '<tr/>' +
      '<tr>' +
      '<td><img 
src="http://upload.wikimedia.org/wikipedia/commons/0/03/Silver_medal.svg"; 
style="width:25px;height:25px"/><td/>' +
      '<td><b>' + totalSilver + '<b/><td/>' +
      '<tr/>' +
      '<tr>' +
      '<td><img 
src="http://upload.wikimedia.org/wikipedia/commons/5/52/Bronze_medal.svg"; 
style="width:25px;height:25px"/><td/>' +
      '<td><b>' + totalBronze + '<b/><td/>' +
      '<tr/>' +
      '<table/>' +
      '<div/>';
}

---------------------------------------------------------------------------------------------------------------------------------------------------------------------
​
On Tuesday, September 25, 2012 10:04:19 AM UTC+2, visigoth wrote:
>
> We have pushed a new release to production.
>
> Documentation (and the release notes page) will soon be updated to 
> reflect the changes made in this release.
> In the meantime, here is a short overview of what has been introduced:
>
> *Prominent changes*
>
>    - *HTML Tooltip* - Support for custom HTML tooltip content for data 
>    points, categories and annotations (certain core charts only).
>    - *Look Mom, No IFrame!* - With the exception of IE 8, charts are no 
>    longer drawn inside an IFrame by default. If you're feelin' retro you can 
>    bring it back by setting the option forceIFrame: true.
>
>
> *Other changes*
>
>    - Removed the strictFirstColumnType option. As you recall this was a 
>    temporary remedy for backward compatibility. Please refer to this 
> help<https://developers.google.com/chart/interactive/docs/customizing_axes#Help>section
>  for proper solutions.
>    - *GeoChart*: New option, tooltip.trigger, which works the same way as 
>    in the core charts. 
>    - *GeoChart*: Improved border colors.
>    - *ChartRangeFilter*: You can now leave the control area while 
>    panning/zooming.
>    - *ChartRangeFilter*: Fixed occasional crash when moving one handles 
>    over another. 
>    - Significant performance improvements when drawing charts with a 
>    domain axis of type date.
>
> Enjoy,
> The Google Chart Tools team
>

-- 
You received this message because you are subscribed to the Google Groups 
"Google Visualization API" group.
To view this discussion on the web visit 
https://groups.google.com/d/msg/google-visualization-api/-/hTz7z0D0u9wJ.
To post to this group, send email to google-visualization-api@googlegroups.com.
To unsubscribe from this group, send email to 
google-visualization-api+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/google-visualization-api?hl=en.

Reply via email to