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.
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 |
|---|---|
| 1 | Basic Column Basic Column chart |
| 2 | Grouped Column Grouped Column chart |
| 3 | Stacked Column Column chart having column stacked over one another. |
| 4 | Negative Stacked Column Column chart with negative stack. |
| 5 | Percentage Stacked Column Column Chart with data in percentage terms. |
| 6 | Material Column Chart A Material Design inspired column chart. |
| 7 | Column 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>