Google Chart Tools - How to create stacked bar chart [duplicate] - charts

This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Can someone help me create a simple vertical bar chart using google charts?
Im using new Google Chart Tools, and I want to create stacked bar chart format.

The Google Developers site gives some details on the bar chart format: https://developers.google.com/chart/interactive/docs/gallery/barchart
To make a normal bar chart stacked, you need to user the isStacked: true option. You can copy and paste the following code into the Chart Tools playground to see a working example:
http://code.google.com/apis/ajax/playground/?type=visualization
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Year', 'Austria', 'Bulgaria', 'Denmark', 'Greece'],
['2003', 1336060, 400361, 1001582, 997974],
['2004', 1538156, 366849, 1119450, 941795],
['2005', 1576579, 440514, 993360, 930593],
['2006', 1600652, 434552, 1004163, 897127],
['2007', 1968113, 393032, 979198, 1080887],
['2008', 1901067, 517206, 916965, 1056036]
]);
// Create and draw the visualization.
new google.visualization.BarChart(document.getElementById('visualization')).
draw(data,
{title:"Yearly Coffee Consumption by Country",
width:600, height:400,
vAxis: {title: "Year"},
hAxis: {title: "Cups"},
isStacked: true}
);
}
You might also be interested in a Stacked Area Chart, depending on what data you are trying to display.
There is also a question which gives an example of a stacked bar chart using the Chart Tools Image API: Bar chart in Javascript: stacked bars + grouped bars
Note that the Image Charts portion of Google Chart Tools was officially deprecated on the 20th April, 2012. Image charts will still work for a while as per Google's deprecation policy, but I recommend you concentrate on the interactive HTML5+SVG implementation described above.

Related

Stepped Stacked chart not seen as EmbeddedChart in Google sheets API?

I am working with a spreadsheet that contains multiple sheets. In every sheet there is 1 chart.
I am using Google Apps Script to get these specific charts, which is working perfectly for all types of charts, except for the 'Stepped Stacked Chart', not to confuse with the 'Stepped Chart'.
Example code to explain the issue:
function getCharts(){
var ss = SpreadsheetApp.getActiveSpreadsheet();
var steppedStackedSheet = ss.getSheetByName('chart_2');
var otherChart = ss.getSheetByName('chart_1');
Logger.log(steppedStackedSheet.getCharts()); // returns an empty array
Logger.log(otherChart.getCharts()); // returns an array [EmbeddedChart] - This is what i also expect to see in the steppedStackedSheet chart.
}
I am buidling a script that downloads the chart as an image, but it's strange that this specific chart is not being recognized as a chart.
Haven't found anything on Google but hopefully someone here has had a similar issue and/or a solution.
Here an example sheet, also including the script
Thanks in advance!
As described in this documentation,
For 100% stacking, the stacks of elements at each domain-value are rescaled such that they add up to 100%. The options for this are isStacked: 'percent', which formats each value as a percentage of 100%, and isStacked: 'relative', which formats each value as a fraction of 1. There is also an isStacked: 'absolute' option, which is functionally equivalent to isStacked: true.
You may use setStacked() which uses stacked lines, meaning that line and bar values are stacked (accumulated). By default, there is no stacking. The return type is EmbeddedColumnChartBuilder.

How to customise the min/max range of a Google bar chart?

Say I have a chart like this:
https://i.stack.imgur.com/iKgI0.png
I'd like the label for max x-axis value (currently 150) to always read 120 (the actual bar value will never exceed this)
I've tried a few different configuration options and unable to achieve what I'm looking for
try adding the following to the chart options...
hAxis: {
viewWindow: {
max: 120
}
}
fyi:
this option is not available for use with material charts...
google.charts.Bar
with
packages: ['bar']
as an alternative to material, you can use core chart...
google.visualization.BarChart
with
packages: ['corechart']
with the following option...
theme: 'material'

Google Annotation chart: Could it be possible to reverse the Y-axis?

I am working with the project that need Google Annotation Chart to show my data. And I have a problem like below.
My problem:
I would like to show the reverse value on the Y-axis.
What I mean is: the bigger the value is down and vice versa (the smaller the value is up)
I try to test all the option at the support docs but it still did not work
https://developers.google.com/chart/interactive/docs/gallery/annotationchart
Option:
...
vAxis: {direction: -1} // This works on line chart but not annotation chart
...
or somethings like
...
max: -200000, // this won't work and it's just keep the value not minus
min: 200000
...
This is my test code that forked from the docs page
https://jsfiddle.net/lecaoquochung/dsmgL9wj/2/
Could anyone help me to answer my problem? (Could it be possible to reverse the Y-axis now and later?)
Thank you very much
Problem solved. I have updated the testcode chart
Solution: add the chart to the option (get support from Googler)
chart : {vAxis: {direction: -1}},
Memo: Wonder that something updated in the API or just syntax (Because there is no description for chart option on graph docs pages)
Hope this help for anyone meet the same problem.

Annotation chart: Filter the data does not work on chart?

I would like to have a question about Google Annotation Chart on the Option Filter Data (displayAnnotationsFilter)
My question: Why the Filter do not support data on the graph? (Or will it be support in the future)
*When I use text to filter the data, it 's only fitter the data on the right but not on the graph. May be this is a little bit confuse. So I 've just wonder that would it be better if we can filter both the annotation data and the graph?
Google Annotation option
...
displayAnnotations: true, // show annotation
vAxis: {direction: 1},
displayAnnotationsFilter: true // add filter
...
Document:
https://developers.google.com/chart/interactive/docs/gallery/annotationchart
Testcode
https://jsfiddle.net/lecaoquochung/dsmgL9wj/2/

PNG area chart with Google Charts API?

I want to make an area chart with Google's Chart API, but it needs to be the PNG format one so I can build a PDF. Is that possible? The Chart Wizard does not seem to support area charts. Also, I want to do it in perl and the URI::GoogleChart module.
I spent a lot of time on this and discovered that I can do this:
See the example visually or the code below:
http://chart.apis.google.com/chart
?chxl=1:|week1|week2
&chxp=1,20,90
&chxr=0,0,120
&chxs=0,676767,11.5,0.5,l,676767|1,676767,9.5,0,_,676767
&chxt=y,x
&chs=300x278
&cht=lxy
&chco=FF9900,FF0000
&chds=6.667,100,0,110,0,100,0,118.333
&chd=t:-1|110,80|-1|43,32
&chdl=Total+Num|Special+Num
&chdlp=t
&chg=1,-1,1,0
&chls=2|2
&chma=8,0,0,7|54,2
&chtt=%23+Total+and+%23+Red+Items
&chts=000000,11.5
&chm=b,FF9900,0,1,0|B,FF0000,1,9,0
Where the last line b,color,startLine,endLine,0 means fill down to endLine and B,color,startLine,arbitraryNumber,0 means fill down to the bottom of the chart.
The solution came from Google's docs with some experimentation.