StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POStacked Google visualization chart
text
Body
copied!<p>Is it possible to make the bars in <a href="http://jsfiddle.net/XWERy/1/" rel="nofollow">THIS</a> graph stacked like in <a href="http://jsfiddle.net/44ze6/1/" rel="nofollow">THIS</a> chart?</p> <p>Please let me know if this is possible and how to do this. I've got to stick with Google Visualization Charts.</p> <p>You can also throw the following codes in <a href="https://code.google.com/apis/ajax/playground/?type=visualization#column_chart" rel="nofollow">HERE</a>:</p> <p>Stacked graph:</p> <pre><code>function drawVisualization() { // Create and populate the data table. var data = new google.visualization.DataTable(); data.addColumn('string', 'Year'); data.addColumn('number', 'Sales'); data.addColumn({type: 'string', role: 'tooltip'}); data.addColumn('number', 'Expenses'); data.addColumn({type: 'string', role: 'tooltip'}); data.addRows([ ['2004', 1000, '1M$ sales in 2004', 400, '$0.4M expenses in 2004'], ['2005', 1170, '1.17M$ sales in 2005', 460, '$0.46M expenses in 2005'], ['2006', 660, '.66$ sales in 2006', 1120, '$1.12M expenses in 2006'], ['2007', 1030, '1.03M$ sales in 2007', 540, '$0.54M expenses in 2007'] ]); // Create and draw the visualization. new google.visualization.ColumnChart(document.getElementById('visualization')). draw(data, {title:"Yearly Coffee Consumption by Country", isStacked: true, width:600, height:400, vAxis: {title: "Year"}, hAxis: {title: "Sales"}} ); } </code></pre> <p>Other graph:</p> <pre><code>function drawVisualization() { // Create and populate the data table. var data = google.visualization.arrayToDataTable([ ['Year', 'Austria', 'Belgium', 'Czech Republic', 'Finland', 'France', 'Germany'], ['2003', 1336060, 3817614, 974066, 1104797, 6651824, 15727003], ['2004', 1538156, 3968305, 928875, 1151983, 5940129, 17356071], ['2005', 1576579, 4063225, 1063414, 1156441, 5714009, 16716049], ['2006', 1600652, 4604684, 940478, 1167979, 6190532, 18542843], ['2007', 1968113, 4013653, 1037079, 1207029, 6420270, 19564053], ['2008', 1901067, 6792087, 1037327, 1284795, 6240921, 19830493] ]); // Create and draw the visualization. new google.visualization.ColumnChart(document.getElementById('visualization')). draw(data, {title:"Yearly Coffee Consumption by Country", width:600, height:400, hAxis: {title: "Year"}} ); } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload