Google Column Chart to set Column height - Javascript Google Chart

Javascript examples for Google Chart:Column Chart

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

Description

Google Column Chart to set Column height

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="http://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){// w  ww.java 2s  . c  om
function numberWithCommas(x) {
  var parts = x.toString().split(".");
  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ".");
  if( typeof( parts[1] ) != 'undefined' ){
    parts[1] = parts[1].substr(0,2);
  }
  return parts.join(",");
}
function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Quelle', 'Geldbetrag', { role: 'style' }, { role: 'annotation' } ],
    ['test1', 40000, '#11368A', 'Cu' ],
    ['test2', 29400, '#000357', 'Ag' ],
    ['test3', 22193, '#40F020', 'Au' ],
  ]);
  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1,
                   { calc: "stringify",
                    sourceColumn: 1,
                    type: "string",
                    role: "annotation" },
                   2]);
  var options = {
    title: "Density of Precious Metals, in g/cm^3",
    width: 600,
    height: 400,
    bar: {groupWidth: "95%"},
    legend: { position: "none" },
    vAxis: { baseline: 0 },
  };
  var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
  chart.draw(view, options);
}
google.charts.load('current', {packages: ['corechart'], 'language': 'de'});
google.charts.setOnLoadCallback( drawChart );
    });

      </script> 
   </head> 
   <body>  
      <h1>
          Weird height of 
         <a href="https://developers.google.com/chart/interactive/docs/gallery/columnchart">Google Column Chart</a>
          Bars. 
      </h1> 
      <div id="columnchart_values"></div>   
   </body>
</html>

Related Tutorials