Annotation in google bar chart - Javascript Google Chart

Javascript examples for Google Chart:Bar Chart

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

Description

Annotation in google bar chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Bar 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','packages':['corechart']}]}"></script> 
      <div id="ex5"></div> 
      <script type="text/javascript">
            google.load('visualization', '1', {packages: ['corechart']});
    google.setOnLoadCallback(drawChart);
    function drawChart() {/*from   w ww  .ja v  a 2s.c  o m*/
var data = new google.visualization.arrayToDataTable([
                    ['Status', 'Completed', 'In Progress', 'Registered / Not Started','Past Due',{role: 'annotation'}],
                     ['Safety',100.0,0.0,0.0,0.0,'Hello'],['Conduct ',100.0,0.0,0.0,0.0,'Hello'],['Policy',100.0,0.0,0.0,0.0,'Hello'],['Privacy',100.0,0.0,0.0,0.0,'Hello'],['Violence',100.0,0.0,0.0,0.0,'Hello'],['Integrity',0.0,0.0,100.0,0.0,'Hello']
                   ]);
                    var options = {
                        height: 500,
                        width:  500,
                        chartArea:{left:100,top:100,right:0,bottom:0},
                        hAxis: { ticks: [25,50,75,100] },
                        isStacked: true,
                        bar: {groupWidth: '20'},
                        vAxis:{textStyle:{color: '#000000',fontSize: '12', paddingRight: '0',marginRight: '0'}},
                        colors: ['green','#ffff99','#ffbf0c','red'],
                        legend: { position: 'top'   },
        annotations: {
          alwaysOutside: true,
          textStyle: {
             fontSize: 17,
             auraColor: '#eee',
             color: '#eee'
          }},
                       };
      var chart = new google.visualization.BarChart(
        document.getElementById('ex5'));
      chart.draw(data, options);
    }

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

Related Tutorials