Add target line in google column chart - Javascript Google Chart

Javascript examples for Google Chart:Column Chart

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

Description

Add target line in google column chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Stepped Area Google Chart Example</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script> 
      <div id="chart_div" style="width: 900px; height: 500px;"></div> 
      <div id="img"></div> 
      <script type="text/javascript">
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {/*from   w w w  .ja va  2  s . c o m*/
  var data = google.visualization.arrayToDataTable([
    ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', ''],
    ['2004/05',  165,      938,         522,             998,           450,      250],
    ['2005/06',  135,      1120,        599,             1268,          288,      250],
    ['2006/07',  157,      1167,        587,             807,           397,      250],
    ['2007/08',  139,      1110,        615,             968,           215,      250],
    ['2008/09',  136,      691,         629,             1026,          366,      250]
  ]);
  var options = {
    seriesType: "line",
    series: {5: {type: "steppedArea", color: '#FF0000', visibleInLegend: false, areaOpacity: 0}}
  };
  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

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

Related Tutorials