Google Bar Chart to Move x-axis labels to Top - Javascript Google Chart

Javascript examples for Google Chart:Bar Chart

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

Description

Google Bar Chart to Move x-axis labels to Top

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script> 
      <script type="text/javascript">
    window.onload=function(){//from  ww w.ja v  a  2s  .co m
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = google.visualization.arrayToDataTable([
         ['App Name', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['My Test App Name Appears Here', 6.94, 'blue', 'My Test App Name Appears Here' ],
         ['My Test App Name Appears Here', 10.49, 'blue', 'My Test App Name Appears Here' ],
         ['My Test App Name Appears Here', 19.30, 'blue', 'My Test App Name Appears Here' ],
         ['My Test App Name Appears Here', 24, 'blue', 'My Test App Name Appears Here' ],
         ['My Test App Name Appears Here', 5.30, 'blue', 'My Test App Name Appears Here' ],
         ['My Test App Name Appears Here', 2.30, 'blue', 'My Test App Name Appears Here' ],
         ['My Test App Name Appears Here', 21.45, 'blue', 'My Test App Name Appears Here' ]
      ]);
var options = {
          chartArea: {width: '90%'},
          height: 500,
          legend: { position: 'none' },
          vAxis:{textStyle:{color: '#005500',fontSize: '12', paddingRight: '100',marginRight: '100'}},
          vAxis: { textPosition: 'none' },
          hAxis:{textStyle:{color: '#005500',fontSize: '11', paddingRight: '100',marginRight: '100'}},
          bars: 'horizontal', // Required for Material Bar Charts.
          axes: {
            x: {
              0: { side: 'top'}
            }
          }
        };
      var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
      chart.draw(data, options);
        var height = options.height;
        var array = $("#chart_div svg g").children()[3].children;
        for (var i = 0; i < array.length; i++) {
            $("text").removeClass("currentNode");
            array[i].children[0].setAttribute("class", "currentNode");
            var y = height - parseFloat($(".currentNode").attr("y"));
            $(".currentNode").attr("y", y);
        }
    }
$(window).resize(function(){
  drawBasic();
});
    }

      </script> 
   </head> 
   <body> 
      <div id="chart_div" style="width:320px"></div>  
   </body>
</html>

Related Tutorials