Help with HTML Tooltip in LineChart

27 views
Skip to first unread message

Corina Campbell

unread,
Nov 12, 2013, 6:13:53 PM11/12/13
to google-visua...@googlegroups.com
I am trying to utilize the tool tips feature in the following line chart, please help.


<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', 'Month');
dataTable.addColumn('number', 'Hostile Deaths');
dataTable.addColumn('number', 'Non-Hostile Deaths');

  dataTable.addColumn({type: 'string', role: 'tooltip'});
  dataTable.addRows([
      

          
          ['Jan',  8,      8],
          ['Feb',  11,      6],
          ['Mar',  4,       5],
          ['Apr',  13,      6],
          ['May',  11,      13],
          ['Jun',  10,      5],
          ['Jul',  5,       3],
          ['Aug',  4,      3],
          ['Sept',  4,      6],
          ['Oct',  2,      7],
          ['Nov',  2,       9],
          ['Dec',  0,      3, 'Least Deadliest Month']
        ]);

        var options = {
          title: 'Operation Iraqi Freedom US Military Deaths, 2009',
          backgroundColor: ['#999999'],
           colors:['#cc0000','#ff6600'],
          tooltip: {isHtml: true}
        };


  var chart = new google.visualization.ColumnChart(document.getElementById('col_chart_html_tooltip'));
  chart.draw(dataTable, options);
}
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

​

asgallant

unread,
Nov 12, 2013, 9:13:45 PM11/12/13
to google-visua...@googlegroups.com
What is the problem you are having?  All I can see is that you are missing data for the tooltip column in most of your rows.

Corina Campbell

unread,
Nov 12, 2013, 9:22:12 PM11/12/13
to google-visua...@googlegroups.com
I only wanted to use the tooltip on the last row. When I ran the code I got a blank screen. I did not use the role anywhere in my coding. Do I have to callout the role and where should I do that?


--
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/G6JYszVFArU/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.

asgallant

unread,
Nov 12, 2013, 9:28:54 PM11/12/13
to google-visua...@googlegroups.com
When you use the tooltip column role, you have to specify a value for every row, as the custom tooltips completely override the default tooltips.
To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.

asgallant

unread,
Nov 12, 2013, 9:30:45 PM11/12/13
to google-visua...@googlegroups.com
If you open the page in Chrome and view the developer's console (ctrl+shift+j to open it), you should see an error message in there about the missing values in the tooltip column.
Reply all
Reply to author
Forward
0 new messages