
- Google Charts Tutorial
- Google Charts - Home
- Google Charts - Overview
- Google Charts - Environment Setup
- Configuration Syntax
- Google Charts - Area Charts
- Google Charts - Bar Charts
- Google Charts - Bubble Charts
- Google Charts - Calendar Charts
- Google Charts - Candlestick Charts
- Google Charts - Column Charts
- Google Charts - Combination Chart
- Google Charts - Histogram Charts
- Google Charts - Line Charts
- Google Charts - Maps
- Google Charts - Organization Chart
- Google Charts - Pie Charts
- Google Charts - Sankey Charts
- Google Charts - Scatter Charts
- Stepped Area Charts
- Google Charts - Table Chart
- Google Charts - Timeline Charts
- Google Charts - TreeMap Chart
- Google Charts - Trendline Charts
- Google Charts Useful Resources
- Google Charts - Quick Guide
- Google Charts - Useful Resources
- Google Charts - Discussion
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Google Charts - Stacked Column Chart
Following is an example of a stacked column chart. We've already seen the configuration used to draw this chart in Google Charts Configuration Syntax chapter. So, let's see the complete example.
Configurations
We've used isStacked configuration to show stacked chart.
// Set chart options var options = { isStacked: true };
Example
googlecharts_column_stacked.htm
<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']}); </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)', isStacked:true}; // Instantiate and draw the chart. var chart = new google.visualization.ColumnChart(document.getElementById('container')); chart.draw(data, options); } google.charts.setOnLoadCallback(drawChart); </script> </body> </html>
Result
Verify the result.
googlecharts_column_charts.htm
Advertisements