Stacked Bar Chart

Pre-requisites

<script src="/SCG/mootools.js" type="text/javascript"></script>
<script src="/SCG/mootools-more.js" type="text/javascript"></script>
<script src="/SCG/raphael.js" type="text/javascript"></script>
<script src="/SCG/src/format.js" type="text/javascript"></script>
<script src="/SCG/src/chart.js" type="text/javascript"></script>
<script src="/SCG/src/barchart.js" type="text/javascript"></script>

Stacked Bar charts are a variation of the standard SCGBarchart class which provides a stacked bar chart with various data parts ‘stacked’ atop each other.

There is no need to tell an SCGBarchart that it should be stacked, it will infer that from the data passed in.

The data array is an array of arrays in order to provide the ‘stacks’ used in the graph. The label array remains the caption to show for each bar.

There is an additional array called xaxis which provides labels for each stack of data.

window.addEvent( 'domready', function(){

	new SCGBarchart( 'test1', {
		yaxis: 'thingies',
		data: [ 
			[ 10, 26, 15  ],
			[ 20, 23, 14  ],
			[ 30, 7, 62   ],
			[ 14, 12, 8  ],
			[ 19, 36, 73  ],
			[ 47, 5, 125   ],
			[ 139, 17, 30 ],
			[ 233, 0, 14  ],
			[ 123, 179, 20 ]
		],
		labels: [ 
			'label1', 'label2', 'label3', 
			'label4', 'label5', 'label6', 
			'label7', 'label8', 'label9' 
		],
		xaxis: [ 
			'Axis1', 'Axis2','Axis3',
			'Axis4','Axis5','Axis6',
			'Axis7','Axis8','Axis9' 
		]
	}); 
});