function getBarChartDef() { // regular stuff: var chartDef = {}; chartDef.titleColor = "#222222"; chartDef.titleSize = 18; chartDef.background = {type: 'gradient', angle: 90, colors: [['#CCCCCC', 0], ['#FFFFFF', 100]]}; chartDef.width = 600; chartDef.height = 501; chartDef.areaFill = {type: 'gradient', angle: 0, colors: [['#CCCCCC', 0], ['#FFFFFF', 100]]}; // chartDef.legendPosition = "right"; // chartDef.legendMargins = {horizontal: 10, vertical: 2}; // chartDef.margins = {top: 10, left: 10, right: 10, bottom: 10}; // chartDef.grid = {xAxisStepSize: 10, yAxisStepSize: 10, lengthOfLineSegment: 3, lengthOfBlankSegment:2, xOffset: 5, yOffset: 5}; chartDef.title = "Stacked bar example:"; chartDef.threeD = true; chartDef.horizontal = true; chartDef.barWidth = 20; chartDef.shadow = false; // chartDef.spaceBetweenGroupsOfBars = 15; // chartDef.spaceWithinGroupsOfBars = 3; chartDef.transparency = opacity; // chartDef.rangeMarkers = {orientation: 'h', color: '#00CCFF55', startPoint: 80, endPoint: 120}; chartDef.markers = [{shape: 'arrow', size: 10, color: '#FF0000', x: 40, y: 50}, {text: 'Bad year!', size: 12, x: 1, y: 40}]; // here starts the interesting thing: // set as stacked: // chartDef.stacked = true; // set the values: var data1 = {data: [45,32,22,44,10], colors: ['#BB5555', '#DD3333', '#FF0000','#3333DD','#5555BB']}; // var data2 = {data: [58,24,76], color: ['#00FFFF', '#FFFF00', '#00FF00'], legend: 'Stuff'}; // var data3 = {data: [77,100,55], color: ['#5555BB', '#3333DD', '#0000FF'], legend: 'Rules!'}; chartDef.bars = [data1]; //, data2, data3]; // the sum of each bars by series will give (45+58+77=180, 32+24+100=156, 22+76+55=153) // we give the chart a max value of 200 to let it breathe ;) chartDef.maxValue = 60; // a simple x axis with 3 values (note the scaling): chartDef.yAxis = { labels: ['2008', '2009', '2010','2011','2012'], positions: [6, 15, 25, 35, 45], // required for Google position (numbers must match how many labels you have) of label with marker attached style: {textColor: '#000000', fontSize: 12, alignment: 'right', drawTickMarks: true}, minRange: 0, maxRange: 50 }; // and the y axis: the positions are scaled in a range of 0-100 anyway, so you can use [0,10...] or [0,20...] indiferently: chartDef.xAxis = { labels: ['0','10','20','30','40','50','60'], positions: [0, 10, 20, 30, 40, 50, 60], style: {textColor: '#000000', fontSize: 12, alignment: 'right', tickMarkLength: 12, tickMarkColor: '#FF0022'}, minRange: 0, maxRange: 60 }; return chartDef; }