This example demonstrates how to use YUI Charts Control to create a Stacked Bar Chart.
Please note: The YUI Charts Control requires Flash Player 9.0.45 or higher. The latest version of Flash Player is available at the Adobe Flash Player Download Center.
When creating Bar and Column charts with multiple series, you have the ability to stack your series on top of one-another. In this example, we'll create stacked BarChart, which lets you show the absolute values of data points through their segments, as well as the total values of each series.
First, we'll create the DataSource to populate the chart. This DataSource contains four values, a year and three sets of sales figures.
1 | YAHOO.example.annualSales = |
2 | [ |
3 | { year: 2004, internetsales: 246852, printsales: 2523359, tvsales: 3123493 }, |
4 | { year: 2005, internetsales: 851876, printsales: 1084952, tvsales: 3166920 }, |
5 | { year: 2006, internetsales: 3917246, printsales: 587151, tvsales: 2330095 }, |
6 | { year: 2007, internetsales: 5318185, printsales: 307456, tvsales: 1830729 } |
7 | ]; |
8 | |
9 | var salesData = new YAHOO.util.DataSource( YAHOO.example.annualSales ); |
10 | salesData.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; |
11 | salesData.responseSchema = { fields: [ "year", "internetsales", "printsales", "tvsales" ] }; |
view plain | print | ? |
We will have three series in our example, corresponding to the Internet sales, print sales, and TV sales.
1 | var seriesDef = |
2 | [ |
3 | { |
4 | xField: "internetsales", |
5 | displayName: "Internet Sales" |
6 | }, |
7 | { |
8 | xField: "printsales", |
9 | displayName: "Print Sales" |
10 | }, |
11 | { |
12 | xField: "tvsales", |
13 | displayName: "Television Sales" |
14 | } |
15 | ]; |
view plain | print | ? |
Create a NumericAxis
and set its stackingEnabled
property to true
. Assign a labelFunction
to format the axis.
1 | //used to format x axis |
2 | YAHOO.example.numberToCurrency = function( value ) |
3 | { |
4 | return YAHOO.util.Number.format(Number(value), {prefix: "$", thousandsSeparator: ","}); |
5 | } |
6 | |
7 | //Numeric Axis for our currency |
8 | var currencyAxis = new YAHOO.widget.NumericAxis(); |
9 | currencyAxis.stackingEnabled = true; |
10 | currencyAxis.labelFunction = YAHOO.example.numberToCurrency; |
view plain | print | ? |
Instantiate a StackedBarChart
and set its xAxis
to the NumericAxis
you created.
1 | var mychart = new YAHOO.widget.StackedBarChart( "chart", salesData, |
2 | { |
3 | series: seriesDef, |
4 | yField: "year", |
5 | xAxis: currencyAxis, |
6 | //only needed for flash player express install |
7 | expressInstall: "assets/expressinstall.swf" |
8 | }); |
view plain | print | ? |
The series bars will stack from left to right rather than aligning vertically.
You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.
Note: Logging and debugging is currently turned off for this example.
Copyright © 2009 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings