Better labeling in google BarChart - Javascript Google Chart

Javascript examples for Google Chart:Bar Chart

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

Description

Better labeling in google BarChart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>jQuery addClass example</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> 
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*  w  ww . j  a  va2s . co  m*/
var draw_graph = function() {
  var data_array = $('#s-graph').data('values');
  options = {
    animation: {
      startup: 'true',
      easing: 'linear',
      duration: 500
    },
    height: 100,
    legend: {
      position: 'none'
    },
    hAxis: {
      maxValue: 10,
      minValue: 0,
      ticks: [{
        v: 0,
        f: ''
      }, {
        v: 3,
        f: 'Low'
      }, {
        v: 7,
        f: 'Middle'
      }, {
        v: 10,
        f: 'High'
      }]
    },
    width: 700,
    tooltip: {
      trigger: 'hover'
    },
    backgroundColor: "transparent",
  };
  data_array.unshift([ 'Something', 'Fun', { role: 'style' } ]);
  var data = new google.visualization.arrayToDataTable(data_array); // Create dataTable for assessment
    var chart = new google.visualization.BarChart(document.getElementById('s-graph'));
    chart.draw(data, options);
}
$(document).ready(function(){
  if ( $('#s-graph').length == 1 ) {
    console.log('Found graph');
    google.charts.load('current', {packages: ['corechart','controls']});
    google.charts.setOnLoadCallback(draw_graph);
  }
});
    }
      </script> 
   </head> 
   <body> 
      <div data-values="[[&quot;Tom&quot;, 7.2, &quot;#ed341c&quot;], [&quot;Nisse&quot;, 6.4, &quot;#16593a&quot;]]" id="s-graph">  
      </div>
   </body>
</html>

Related Tutorials