Interpolating in Google Line chart - Javascript Google Chart

Javascript examples for Google Chart:Line Chart

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

Description

Interpolating in Google Line chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Scatter Chart Example</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> 
   </head> 
   <body> 
      <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> 
      <script type="text/javascript">
      google.setOnLoadCallback(drawChart);
      function drawChart() {/*from  ww  w.  j  av a  2 s  . co  m*/
           var data = google.visualization.arrayToDataTable([['Generation', 'Descendants'],[0,300], [85,300],[125,0] ]);
              var options = {
                      title: 'Derating chart',
                  lineSize:2,
                      hAxis: {title: 'Temperature [?C]', titleTextStyle: {color: 'black'}, logScale: false},
                      vAxis: {
                          title: "Irms [A]",
                          maxValue:8
                      },
                      pointSize:5,
                  tooltip:{isHtml:true}
                    };
              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(x));
                  var yValue=Math.round( chart.getChartLayoutInterface().getVAxisValue(y));
                  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){
                  $('.google-visualization-tooltip').remove();
              })
          })
              chart.draw(data, options);
      }

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

Related Tutorials