Show tooltip on load with google charts - Javascript Google Chart

Javascript examples for Google Chart:Tooltip

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

Description

Show tooltip on load with google charts

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script> 
      <script type="text/javascript">
    window.onload=function(){/* w ww .  j ava 2 s  .  c  om*/
var gmapData = [[{"label":"Date","type":"date"},"One",{"role":"annotation","type":"string"},"Two",{"role":"annotation","type":"string"},"Three",{"role":"annotation","type":"string"}],["Date(2012, 3, 26)",412,null,278,null,149,null],["Date(2012, 3, 27)",410,null,272,null,147,null],["Date(2012, 3, 30)",414,null,280,null,146,null],["Date(2012, 4, 1)",406,"$406",268,"$268",141,"$141"]];
   drawChart();
   function drawChart() {
      var data = window.data = google.visualization.arrayToDataTable(gmapData);
      var formatter = new google.visualization.NumberFormat({pattern: '$#,###'});
      var cols = (gmapData[0].length-1) / 2;
      x = cols;
      while ((--x) >= 0)
         formatter.format(data, x*2+1);
      var options = {
         title: 'Number Watch',
         legend: { position: 'bottom' },
         interpolateNulls: true,
         curveType: 'function',
         selectionMode: 'single',
         tooltip: {trigger: 'focus'},
         focusTarget: 'category',
         annotations: {
            textStyle: {
               fontSize: 18
            }
         },
         vAxis: {format: '$#,###'},
         width: 400,
         height: 300
      };
      var chart = window.chart = new google.visualization.LineChart(document.getElementById('num_watch'));
      chart.draw(data, options);
   }
    }

      </script> 
   </head> 
   <body> 
      <div id="num_watch"></div>  
   </body>
</html>

Related Tutorials