Google Charts to format column chart - Javascript Google Chart

Javascript examples for Google Chart:Column Chart

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

Description

Google Charts to format column chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <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="dual_y_div" style="width: 700px; height: 500px;"></div> 
      <script>
    google.setOnLoadCallback(drawStuff);
    function drawStuff() {//from   ww  w. j  a  v  a2  s  .  c o m
      var data = new google.visualization.arrayToDataTable([
        ["Companies", "Acres", { role: "style" } ],
        ["Conoco", 8.94, "#b87333"],
        ["Tesla", 10.49, "silver"],
        ["Texaco", 19.30, "gold"],
        ["Yahoo.com", 21.45, "color: #e5e4e2"]
      ]);
      var options = {
        title: 'Haynesville / Bossier Play - Sample Acreage Estimates',
        legend: {
           position: 'none'
        },
        hAxis: {
          title: 'Companies'
        },
        vAxis: {
          title: 'Acres'
        }
      };
      var chart = new google.visualization.ColumnChart(document.getElementById('dual_y_div'));
      chart.draw(data, options);
    };

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

Related Tutorials