Google Chart, move annotation on top of columns - Javascript Google Chart

Javascript examples for Google Chart:Column Chart

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

Description

Google Chart, move annotation on top of columns

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Combo 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> 
      <script type="text/javascript">
      google.setOnLoadCallback(drawVisualization);
      function drawVisualization() {
        var data = google.visualization.arrayToDataTable([
         ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', '', {type: 'number', role: 'annotation'}],
         ['Application', 5, 2, 2, 8, 0, 17, 17],
         ['Friend', 4, 3, 5, 6, 2, 20, 20],
         ['Newspaper', 6, 1, 0, 2, 0, 9, 9],
         ['Radio', 8, 0, 8, 1, 1, 18, 18],
         ['No Referral', 2, 2, 3, 0, 6, 13, 13]
      ]);//  w  w w. j  a v a  2s. c  o  m
    var options = {
        isStacked: true,
         title : 'Monthly Coffee Production by Country',
         vAxis: {title: 'Cups'},
         hAxis: {title: 'Month'},
         seriesType: 'bars',
         series: {5: {type: 'line', lineWidth: 0}},
    };
    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }

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

Related Tutorials