https://stackoverflow.com/questions/26658597

An example of a Google Scatter Chart.

by juvian

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
       <div id="chart_div" style="width: 900px; height: 500px;"></div>

JavaScript

google.setOnLoadCallback(drawChart);
      function drawChart() {
           var data = google.visualization.arrayToDataTable([['Generation', 'Descendants'],[0,300], [10,0],[125,0] ]);


              var options = {
                      title: 'Derating chart',
                          // Draw a trendline for data series 0.
                  lineSize:2,
                      hAxis: {title: 'Temperature [°C]', titleTextStyle: {color: 'black'}, logScale: false},
                      vAxis: {
                          title: "Irms [A]", 

                          maxValue:8


                      },
                      pointSize:10,
                  tooltip:{isHtml:true}

                    };


              // Instantiate and draw our chart, passing in some options.
              // Do not forget to check your div ID
              var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
          
          google.visualization.events.addListener(chart, 'ready', function(){
              $('#chart_div svg path').mousemove(function(e){
                  $('.google-visualization-tooltip').remove();
                  var x=e.offsetX;
                  var y=e.offsetY;  
                  var xValue= Math.round(chart.getChartLayoutInterface().getHAxisValue(10));
                  var yValue=Math.round( chart.getChartLayoutInterface().getVAxisValue(20));
                  var tootlip = $('<div class= "google-visualization-tooltip"><ul class="google-visualization-tooltip-item-list"><li class="google-visualization-tooltip-item"><span >X : '+xValue+'</span></li><li class="google-visualization-tooltip-item"><span>Y : '+yValue+'</span></li></ul></div>');
                  tootlip.css({position:'absolute', left:(x+20)+'px', top:(y-100)+'px', width:'100px', height:'70px'})
                  $('#chart_div').append(tootlip);
                  
              })
              
              $('#chart_div svg path').mouseout(function(e){
 ...