diff -r 322d0feea350 -r 89ef5ed3c48b src/cm/media/js/lib/yui/yui_3.10.3/docs/charts/charts-stackedcolumn.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/cm/media/js/lib/yui/yui_3.10.3/docs/charts/charts-stackedcolumn.html Tue Jul 16 14:29:46 2013 +0200 @@ -0,0 +1,265 @@ + + + + + Example: Create Stacked Chart + + + + + + + + + + +
+
+

+
+ + +

Example: Create Stacked Chart

+
+
+
+
+
+

This example shows how to create a column Chart with a stacked Numeric Axis.

+
+
+
+ + +
+

This example shows how to create a Stacked Column Chart.

+ + +

A Stacked Chart is one in which its series are plotted cumulatively against a value axis. Stacked Charts are often used to compare the contribution of each series across categories. +In the previous example, we made a column chart. In this example, we're going use the stacked attribute to change it to a Stacked Column Chart.

+ +

CSS

+
#mychart {
+    margin:10px 10px 10px 10px;
+    width:90%;
+    max-width: 800px;
+    height:400px;
+}
+ + +

HTML

+
<div id="mychart"></div>
+ + +

JavaScript

+
var myDataValues = [ 
+    {category:"5/1/2010", miscellaneous:2000, expenses:3700, revenue:2200}, 
+    {category:"5/2/2010", miscellaneous:50, expenses:9100, revenue:100}, 
+    {category:"5/3/2010", miscellaneous:400, expenses:1100, revenue:1500}, 
+    {category:"5/4/2010", miscellaneous:200, expenses:1900, revenue:2800}, 
+    {category:"5/5/2010", miscellaneous:5000, expenses:5000, revenue:2650}
+];
+
+var mychart = new Y.Chart({
+                    dataProvider:myDataValues, 
+                    render:"#mychart", 
+                    type:"column", 
+                    stacked:true
+                });
+ +

Technically, all charts plotted against x and y axes can be stacked. The following series types are most commonly and effectively displayed stacked:

+
    +
  • combo
    • +
  • column
    • +
  • bar
    • +
  • area
    • +
  • areaspline
    • +
  • combospline
    • +
+
+
+
+ +
+
+ + + +
+
+

Examples

+
+ +
+ +
+
+ + + +
+
+
+
+ + + + + + + + + + +