Google Charts - Google Charts tutorial - Column Chart - chart js - google graphs - google charts examples



What is Column Chart?

  • A column chart is a vertical bar chart rendered in the browser using SVG or VML, whichever is appropriate for the user's browser.
  • Like all Google charts, column charts display tooltips when the user hovers over the data.
  • Column charts are used to draw column based charts.
 column chart graph in google charts

Learn - tutorial - column chart graph in google charts - examples - programs

In this section we're going to discuss following types of column charts.

S. No. Chart Type / Description
1Basic Column

Basic Column chart

2Grouped Column

Grouped Column chart

3Stacked Column

Column chart having column stacked over one another.

4Negative Stacked Column

Column chart with negative stack.

5Percentage Stacked Column

Column Chart with data in percentage terms.

6Material Column Chart

A Material Design inspired column chart.

7Column Chart with data labels

Column chart with data labels.

Configurations

We have used Bar class to show material chart.

//classic chart
var chart = new google.visualization.ColumnChart(document.getElementById('container'));
//Material chart
var chart = new google.charts.Bar(document.getElementById('container'));
Clicking "Copy Code" button to copy the code. From - google charts tutorial - team

Example

 Tryit<html>
<head>
<title>Google Charts Tutorial</title>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
     google.charts.load('current', {packages: ['corechart','bar']});     
   </script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
function drawChart() {
   // Define the chart to be drawn.
   var data = google.visualization.arrayToDataTable([
      ['Year', 'Asia', 'Europe'],
	  ['2012',  900,      390],
      ['2013',  1000,      400],
      ['2014',  1170,      440],
      ['2015',  1250,       480],
      ['2016',  1530,      540]
      ]);

   var options = {
      title: 'Population (in millions)'
   };  

   // Instantiate and draw the chart.
   var chart = new google.charts.Bar(document.getElementById('container'));
   chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>
Clicking "Copy Code" button to copy the code. From - google charts tutorial - team

Output


Related Searches to Google Charts - Column Chart