Creating Vertical Bar Chart with Stacked Bars

Coltrane

unread,

Apr 12, 2012, 11:02:25 AM4/12/12

to Google Visualization API

I'm a newbie, so forgive me ignorance, but I'm attempting to convert a
standard bar chart I created based upon this code:

<html>

<head>

<script type="text/javascript" src="https://www.google.com/
jsapi"></script>

<script type="text/javascript">

google.load("visualization", "1", {packages:["corechart"]});

google.setOnLoadCallback(drawChart);

function drawChart() {

var data = new google.visualization.DataTable();

data.addColumn('string', 'Area');

data.addColumn('number', 'Savings');

data.addRows([
['Building/Grounds', 10800],

['Equipment Services', 18754.08],

['Marketing Materials', 151999.58],

['Other', 46942.91],

['Raw Materials', 1118386],

['Office/Janitorial', 10480]

]);

var options = {

title: '2012 Procurement Savings Goal: $2 Million',

hAxis: {title: 'Procurement Area', titleTextStyle: {color:
'red'}}

};

var chart = new
google.visualization.ColumnChart(document.getElementById('chart_div'));

chart.draw(data, options);

}

</script>

</head>

<body>

<div id="chart_div" style="width: 900px; height: 500px;"></div>

</body>

</html>

My user wants a vertical bar chart with stacked bar(s). I have found
the following code to select the chart type:

cht=bvs,

where and what syntax do I use to alter the chart type in the client
side code?

Thanks in advance.

asgallant

unread,

Apr 12, 2012, 11:56:14 AM4/12/12

to google-visua...@googlegroups.com

That option is for the static Image Charts, you want to set the "isStacked" option to true:

var options = {
  title: '2012 Procurement Savings Goal: $2 Million',
  hAxis: {
  title: 'Procurement Area',
  titleTextStyle: {
  color: 'red'
  }

},
isStacked: true
};

Coltrane

unread,

Apr 12, 2012, 1:52:31 PM4/12/12

to Google Visualization API

First of all, thanks for the quick response. I made your suggested
change - "isStacked:true". Unfortunately, the chart is still not
stacked the change had no effect, aka there are still multiple bars.
Is there something else I need to change?

Thanks,

Mark

asgallant

unread,

Apr 12, 2012, 2:12:10 PM4/12/12

to google-visua...@googlegroups.com

D'oh! There I go, not reading your code first. You can stack bars by data series only, so you have to change the setup of your chart, so that each row is instead a column:

var data = new google.visualization.DataTable();

data.addColumn('string', 'Category');
data.addColumn('number', 'Building/Grounds');
data.addColumn('number', 'Equipment Services');
data.addColumn('number', 'Marketing Materials');
data.addColumn('number', 'Other');
data.addColumn('number', 'Raw Materials');
data.addColumn('number', 'Office/Janitorial');
data.addRows([
['Savings', 10800, 18754.08, 151999.58, 46942.91, 1118386, 10480]
]);

Then, the "istStacked" option will do what you want.

Coltrane

unread,

Apr 12, 2012, 3:00:58 PM4/12/12

to Google Visualization API

asgallant:

Thank You, the chart is now correct.

Mark

Reply all

Reply to author

Forward