CODEWITHSUNDEEP
htmlchartsgoogle-visualization
Mixter
Mixter

Reputation: 193

Is there a way to Plot a horizontal line across scatter on Google charts?

I am trying to plot a horizontal target line across the scatter at y=10. Please help.

I've tried doing it with combochart, but I lose my annotation/text 

<html>
<head>
<title>Testing</title>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
     google.charts.load('current', {packages: ['corechart']});     
   </script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
function drawChart() {
   // Define the chart to be drawn.
   var data = new google.visualization.DataTable();
   data.addColumn('number', 'Age');
   data.addColumn('number', 'Weight');
   data.addColumn({type: 'string', role: 'annotation'});
   data.addColumn({type: 'string', role: 'annotationText'})
   data.addRows([[ 18,      22,'A','TEST1'],[ 14,      7.5,'B',null],[ 15,     13,'C','TEST2'],[ 14,      15,'D','TEST3'],[ 5.3,      3.9,'E',null],[ 9.5,    17,'F','TEST 4']]);



// Set chart options
   var options = {'title':'Age vs Weight',
      'width':550,
      'height':400,
      'legend': 'none',
      'trendlines':{0:{type:'linear',color:'green',}}
   };


   // Instantiate and draw the chart.
   var chart = new google.visualization.ScatterChart(document.getElementById('container'));
   chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>

I expect the output to be the same chart, with a green line @ y=10 instead of the trend-line. Thanks.

enter image description here

Upvotes: 1

Views: 1110

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

be sure to add the data for the horizontal line after the annotation columns... 

  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Age');
  data.addColumn('number', 'Weight');
  data.addColumn({type: 'string', role: 'annotation'});
  data.addColumn({type: 'string', role: 'annotationText'})
  data.addColumn('number', 'y0');

see following working snippet... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Age');
  data.addColumn('number', 'Weight');
  data.addColumn({type: 'string', role: 'annotation'});
  data.addColumn({type: 'string', role: 'annotationText'})
  data.addColumn('number', 'y0');
  data.addRows([[ 18,      22,'A','TEST1',10],[ 14,      7.5,'B',null,10],[ 15,     13,'C','TEST2',10],[ 14,      15,'D','TEST3',10],[ 5.3,      3.9,'E',null,10],[ 9.5,    17,'F','TEST 4',10]]);

  var options = {'title':'Age vs Weight',
    width: 550,
    height: 400,
    legend: 'none',
    trendlines: {0:{type:'linear',color:'green',}},
    seriesType: 'scatter',
    series: {
      1: {
        type: 'line'
      }
    }
  };

  var chart = new google.visualization.ComboChart(document.getElementById('container'));
  chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="container"></div>

Upvotes: 1

Related Questions