Add custom text to Google Visualization tooltip - Javascript Google Chart

Javascript examples for Google Chart:Tooltip

  1. HOME
  2. Javascript
  3. Google Chart
  4. Tooltip

Description

Add custom text to Google Visualization tooltip

Demo Code

ResultView the demo in separate window 

<!--//ww  w . ja  va  2  s.  co m
Created using JS Bin
http://jsbin.com
Released under the MIT license: http://jsbin.mit-license.org
-->
<html>
   <head> 
      <meta name="description" content="Goolge Chart HTML Tooltips"> 
      <meta name="viewport" content="width=device-width"> 
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
      <style>

.google-visualization-tooltip {
   border: solid 1px #bdbdbd;
   border-radius: 2px;
   background-color: white;
   position: absolute;
   box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.6);
   font-size: 11px;
   -moz-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.6);
   -webkit-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.6);
   font-family: arial;
}
.google-visualization-tooltip div {
   padding:5px;
}

      </style> 
   </head> 
   <body> 
      <div id="tooltip_action"></div> 
      <script>
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string', 'Year');
        dataTable.addColumn('number', 'Sales');
        dataTable.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});
        dataTable.addColumn('number', 'Expense');
        dataTable.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});
        dataTable.addRows([
          ['2010', 1500, '<div><strong>2010</strong><br>Date: <strong>00/00/0000</strong><br>Sales: <strong>$600</strong></div>', 600,'<div><strong>2010</strong><br>Date: <strong>00/00/0000</strong><br>Expense: <strong>$600</strong></div>'],
          ['2011', 500, '<div><strong>2010</strong><br>Date: <strong>00/00/0000</strong><br>Sales: <strong>$600</strong></div>', 1500, '<div><strong>2011</strong><br>Date: <strong>00/00/0000</strong><br>Expense: <strong>$1,500</strong></div>'],
          ['2012', 1200, '<div><strong>2010</strong><br>Date: <strong>00/00/0000</strong><br>Sales: <strong>$600</strong></div>', 800, '<div><strong>2012</strong><br>Date: <strong>00/00/0000</strong><br>Expense: <strong>$800</strong></div>'],
          ['2013', 500, '<div><strong>2010</strong><br>Date: <strong>00/00/0000</strong><br>Sales: <strong>$600</strong></div>', 1000, '<div><strong>2013</strong><br>Date: <strong>00/00/0000</strong><br>Expense: <strong>$1,000</strong></div>']
        ]);
        var options = {tooltip: {isHtml: true}};
        var chart = new google.visualization.AreaChart (document.getElementById('tooltip_action'));
        chart.draw(dataTable, options);
      }

      </script>  
   </body>
</html>

Related Tutorials