Google charts - plotting points on linechart - Javascript Google Chart

Javascript examples for Google Chart:Line Chart

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

Description

Google charts - plotting points on linechart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Org Chart Example</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
      <div id="chart_div"></div> 
      <script type="text/javascript">
  google.charts.load('current', {packages: ['corechart', 'line']});
  google.charts.setOnLoadCallback(drawCurveTypes);
function getPointOnLine(pt1, pt2, x){
  var m = (pt1[1] - pt2[1]) / (pt1[0] - pt2[0]);
  var b = pt1[1] - ( m * pt1[0]);
  var y = m * x + b;
  return y;//from   w  w  w  .  j  a  va2  s  . c  o m
}
function drawCurveTypes() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Time');
  data.addColumn('number', 'Ref Wt');
   data.addColumn('number', 'Actual Wt');
  data.addRows([
        [1,   42.2,null], 
        [1.75,getPointOnLine([1,42.2],[2,43.8],1.75), 43.7], 
        [2,   43.8,null], 
        [3,   44.1,null], 
        [3.5, getPointOnLine([3,44.1],[4,45.1],3.5),44.3], 
        [4,   45.1,null], 
        [5,   46.1,null], 
       ]);
  var options = {
    width: 600,
    height: 500,
    hAxis: {
      title: 'Weight',
      titleTextStyle:{
        color: 'blue'
      },
    },
    vAxis: {
      title: 'Time',
       titleTextStyle:{
        color: 'blue'
      },
    },
  };
  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);
 }

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

Related Tutorials