Enabling HTML tooltips

Thu, 31 Jan 2013 07:51:06 -0800 

Hi,
I canìt make the following graph work, i.e. the HTML tooltip is shown but 
the HTML is not rendered.
Any idea?
Thanks a lot.

http://jsfiddle.net/mdt86/VeQeh/1/

<html>
  
  <head>
    <script type="text/javascript" 
src="https://www.google.com/jsapi";></script>
    <script type="text/javascript">
      google.load("visualization", "1", {
        packages: ["corechart"]
      });
      google.setOnLoadCallback(drawChart);

      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string', 'chapter');
        dataTable.addColumn('number', 'correct answers');
        // A column for custom tooltip content
        dataTable.addColumn({
          type: 'string',
          role: 'tooltip'
        });
        dataTable.addRows([
          ['chapter 8', displayPercentage('1', '5'), createHTMLTooltip('0', 
'5')],
          ['chapter 4', displayPercentage('2', '11'), 
createHTMLTooltip('2', '11')],
          ['chapter 1', displayPercentage('2', '6'), createHTMLTooltip('2', 
'6')],
          ['chapter 2', displayPercentage('4', '12'), 
createHTMLTooltip('4', '12')],
          ['chapter 5', displayPercentage('2', '5'), createHTMLTooltip('2', 
'5')],
          ['chapter 7', displayPercentage('4', '9'), createHTMLTooltip('4', 
'9')],
          ['chapter 10', displayPercentage('7', '13'), 
createHTMLTooltip('7', '13')],
          ['chapter 6', displayPercentage('8', '13'), 
createHTMLTooltip('8', '13')],
          ['chapter 9', displayPercentage('6', '6'), createHTMLTooltip('6', 
'6')]
        ]);

        var options = {
          title: 'chapter results',
          // This line makes the entire category's tooltip active.
          focusTarget: 'category',
          vAxis: {
            format: '#%'
          },
          // Try out the new HTML tooltip.
          tooltip: {
            isHtml: true
          }

        };
        var chart = new 
google.visualization.ColumnChart(document.getElementById('mychart'));
        chart.draw(dataTable, options);
      }

      function createHTMLTooltip(correctAnswers, wrongAnswers) {
        var percentage = displayPercentage(correctAnswers, wrongAnswers) * 
100;
        return '<p>' + Math.round(percentage * Math.pow(10, 1)) / 
Math.pow(10, 1) + '%(<b>' + correctAnswers + '</b> correct answers out of 
<b>' + wrongAnswers + ')</b>' +
          '</p>';
      }

      function displayPercentage(correctAnswers, wrongAnswers) {
        return correctAnswers / wrongAnswers;
      }
    </script>
  </head>
  
  <body>
    <div id="mychart" style="width: 900px; height: 500px;"></div>
  </body>

</html>

-- 
You received this message because you are subscribed to the Google Groups 
"Google Chart API" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-chart-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.

Reply via email to