Hover on google chart - Javascript Google Chart

Javascript examples for Google Chart:Chart Configuration

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

Description

Hover on google chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <script src="script.js"></script> 
      <script src="https://www.gstatic.com/charts/loader.js"></script> 
   </head> 
   <body> 
      <script>
  google.charts.load('current', {
  callback: drawChart,/*w  w w .  j  a  v a2s.c om*/
  packages: ['corechart']
});
function drawChart() {
  var dataTable = new google.visualization.DataTable({
    cols: [
      {id: 'x', label: 'Num', type: 'number'},
      {id: 'y', label: 'Fn', type: 'number'}
    ]
  });
  for (var i = 0; i < 1000; i++) {
    var xValue = { v: i };
    var yValue = { v: i };
    dataTable.addRow([
      xValue,
      yValue
    ]);
  }
  var container = document.getElementById('chart_div');
  var chart = new google.visualization.ChartWrapper({
    chartType: 'LineChart',
    dataTable: dataTable,
    options: {
      hAxis: {
        gridlines: {
          color: 'transparent'
        },
        title: 'Hover here is also fine'
      },
      tooltip: {
        trigger: "none"
      },
      vAxis: {
        gridlines: {
          color: 'transparent'
        },
        title: 'Hover here is OK'
      }
    }
  });
  google.visualization.events.addOneTimeListener(chart, 'ready', function () {
    var svgParent = container.getElementsByTagName('svg')[0];
    var layout = chart.getChart().getChartLayoutInterface();
    var lineHeight = layout.getBoundingBox('chartarea').height - 18;
    var lineTop = layout.getBoundingBox('chartarea').top;
    var hoverLine = container.getElementsByTagName('rect')[0].cloneNode(true);
    hoverLine.setAttribute('y', lineTop);
    hoverLine.setAttribute('height', lineHeight);
    hoverLine.setAttribute('width', '1');
    hoverLine.setAttribute('stroke', 'none');
    hoverLine.setAttribute('stroke-width', '0');
    hoverLine.setAttribute('fill', '#cccccc');
    hoverLine.setAttribute('x', 0);
    svgParent.appendChild(hoverLine);
    svgParent.addEventListener("mousemove", function(e) {
      hoverLine.setAttribute('x', e.offsetX);
    });
  });
  chart.draw(container);
}

      </script> 
      <div id="chart_div"></div>  
   </body>
</html>

Related Tutorials