← Back to branch summary

~bcsaller/juju-gui/charmFind

« back to all changes in this revision

Viewing changes to lib/yui/docs/charts/charts-stackedcolumn.html

  • Committer: kapil.foss at gmail
  • Date: 2012-07-13 18:45:59 UTC
  • Revision ID: kapil.foss@gmail.com-20120713184559-2xl7be17egsrz0c9
reshape

Show diffs side-by-side

added added

removed removed

Lines of Context:
lib/yui/docs/charts/charts-stackedcolumn.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Example: Create Stacked Chart</title>
6
 
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Maven+Pro:400,700">
7
 
    <link rel="stylesheet" href="../../build/cssgrids/grids-min.css">
8
 
    <link rel="stylesheet" href="../assets/css/main.css">
9
 
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
10
 
    <script src="../../build/yui/yui-min.js"></script>
11
 
</head>
12
 
<body>
13
 
 
14
 
<div id="doc">
15
 
    <h1>Example: Create Stacked Chart</h1>
16
 
 
17
 
    
18
 
 
19
 
    <div class="yui3-g">
20
 
        <div class="yui3-u-3-4">
21
 
            <div id="main">
22
 
                <div class="content"><style scoped>
23
 
#custom-doc { width: 95%; min-width: 950px; }
24
 
#pagetitle {background-image: url(../../assets/bg_hd.gif);}
25
 
#mychart {
26
 
    margin:10px 10px 10px 10px;
27
 
    width:90%;
28
 
    max-width: 800px;
29
 
    height:400px;
30
 
}
31
 
</style>
32
 
<div class="intro">
33
 
<p>This example shows how to create a column <code>Chart</code> with a stacked Numeric Axis.</p>
34
 
</div>
35
 
<div class="example">
36
 
<div id="mychart"></div>
37
 
<script type="text/javascript">
38
 
(function() {
39
 
    YUI().use('charts', function (Y) 
40
 
    { 
41
 
        var myDataValues = [ 
42
 
            {category:"5/1/2010", miscellaneous:2000, expenses:3700, revenue:2200}, 
43
 
            {category:"5/2/2010", miscellaneous:50, expenses:9100, revenue:100}, 
44
 
            {category:"5/3/2010", miscellaneous:400, expenses:1100, revenue:1500}, 
45
 
            {category:"5/4/2010", miscellaneous:200, expenses:1900, revenue:2800}, 
46
 
            {category:"5/5/2010", miscellaneous:5000, expenses:5000, revenue:2650}
47
 
        ];
48
 
        
49
 
        var mychart = new Y.Chart({dataProvider:myDataValues, render:"#mychart", type:"column", stacked:true});
50
 
    });
51
 
})();
52
 
</script>
53
 
 
54
 
</div>
55
 
<h3>This example shows how to create a Stacked Column Chart.</h3>
56
 
 
57
 
 
58
 
<p>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. 
59
 
In the previous example, we made a column chart. In this example, we're going use the <code>stacked</code> attribute to change it to a Stacked Column Chart.</p>
60
 
 
61
 
<pre class="code prettyprint">var myDataValues = [ 
62
 
    {category:&quot;5&#x2F;1&#x2F;2010&quot;, miscellaneous:2000, expenses:3700, revenue:2200}, 
63
 
    {category:&quot;5&#x2F;2&#x2F;2010&quot;, miscellaneous:50, expenses:9100, revenue:100}, 
64
 
    {category:&quot;5&#x2F;3&#x2F;2010&quot;, miscellaneous:400, expenses:1100, revenue:1500}, 
65
 
    {category:&quot;5&#x2F;4&#x2F;2010&quot;, miscellaneous:200, expenses:1900, revenue:2800}, 
66
 
    {category:&quot;5&#x2F;5&#x2F;2010&quot;, miscellaneous:5000, expenses:5000, revenue:2650}
67
 
];
68
 
 
69
 
var mychart = new Y.Chart({
70
 
                    dataProvider:myDataValues, 
71
 
                    render:&quot;#mychart&quot;, 
72
 
                    type:&quot;column&quot;, 
73
 
                    stacked:true
74
 
                });</pre>
75
 
 
76
 
<p>Technically, all charts plotted against x and y axes can be stacked. The following series types are most commonly and effectively displayed stacked:</p>
77
 
<ul>
78
 
    <li><code>combo</code></li>
79
 
    <li><code>column</code></li>
80
 
    <li><code>bar</code></li>
81
 
    <li><code>area</code></li>
82
 
    <li><code>areaspline</code></li>
83
 
    <li><code>combospline</code></li>
84
 
</ul>
85
 
</div>
86
 
            </div>
87
 
        </div>
88
 
 
89
 
        <div class="yui3-u-1-4">
90
 
            <div class="sidebar">
91
 
                
92
 
 
93
 
                
94
 
                    <div class="sidebox">
95
 
                        <div class="hd">
96
 
                            <h2 class="no-toc">Examples</h2>
97
 
                        </div>
98
 
 
99
 
                        <div class="bd">
100
 
                            <ul class="examples">
101
 
                                
102
 
                                    
103
 
                                        <li data-description="Shows how to use Charts to create a basic chart.">
104
 
                                            <a href="charts-simple.html">Basic Charts Implementation</a>
105
 
                                        </li>
106
 
                                    
107
 
                                
108
 
                                    
109
 
                                        <li data-description="Shows how to create a chart with multiple series.">
110
 
                                            <a href="charts-multiseries.html">Chart with Multiple Series</a>
111
 
                                        </li>
112
 
                                    
113
 
                                
114
 
                                    
115
 
                                        <li data-description="Shows how to create a column chart with multiple series.">
116
 
                                            <a href="charts-column.html">Specify Chart Type</a>
117
 
                                        </li>
118
 
                                    
119
 
                                
120
 
                                    
121
 
                                        <li data-description="Shows how to create a column chart with a stacked numeric axis.">
122
 
                                            <a href="charts-stackedcolumn.html">Create Stacked Chart</a>
123
 
                                        </li>
124
 
                                    
125
 
                                
126
 
                                    
127
 
                                        <li data-description="Shows how to create a chart with a time axis.">
128
 
                                            <a href="charts-timeaxis.html">Create a Chart with a Time Axis</a>
129
 
                                        </li>
130
 
                                    
131
 
                                
132
 
                                    
133
 
                                        <li data-description="Shows how to add gridlines to a chart.">
134
 
                                            <a href="charts-gridlines.html">Add Gridlines to a Chart</a>
135
 
                                        </li>
136
 
                                    
137
 
                                
138
 
                                    
139
 
                                        <li data-description="Shows how to create a chart with planar based events.">
140
 
                                            <a href="charts-stackedarea.html">Create a Stacked Area Chart with Planar Based Events</a>
141
 
                                        </li>
142
 
                                    
143
 
                                
144
 
                                    
145
 
                                        <li data-description="Shows how to use a chart&#x27;s styles attribute to customize a chart.">
146
 
                                            <a href="charts-globalstyles.html">Customize a Chart</a>
147
 
                                        </li>
148
 
                                    
149
 
                                
150
 
                                    
151
 
                                        <li data-description="Shows how to customize the default tooltip of a chart.">
152
 
                                            <a href="charts-customizedtooltip.html">Customize a Chart&#x27;s Tooltip</a>
153
 
                                        </li>
154
 
                                    
155
 
                                
156
 
                                    
157
 
                                        <li data-description="Shows how to explicitly define the axes and series for a chart.">
158
 
                                            <a href="charts-objectstyles.html">Define a Chart&#x27;s Axes and Series</a>
159
 
                                        </li>
160
 
                                    
161
 
                                
162
 
                                    
163
 
                                        <li data-description="Shows how to use charts to create a pie chart.">
164
 
                                            <a href="charts-pie.html">Pie Chart</a>
165
 
                                        </li>
166
 
                                    
167
 
                                
168
 
                                    
169
 
                                        <li data-description="Shows how to create a chart with multiple value axes.">
170
 
                                            <a href="charts-dualaxes.html">Dual Axes Chart</a>
171
 
                                        </li>
172
 
                                    
173
 
                                
174
 
                                    
175
 
                                        <li data-description="Shows how to access a chart instance&#x27;s value axis after the chart has rendered.">
176
 
                                            <a href="charts-axisupdate.html">Update Chart Axis</a>
177
 
                                        </li>
178
 
                                    
179
 
                                
180
 
                                    
181
 
                                        <li data-description="Shows how to access a chart instance&#x27;s seriesCollection after the chart has rendered.">
182
 
                                            <a href="charts-seriesupdate.html">Update Chart Series</a>
183
 
                                        </li>
184
 
                                    
185
 
                                
186
 
                                    
187
 
                                        <li data-description="Shows how to add a legend to a chart.">
188
 
                                            <a href="charts-legend.html">Create Chart with a Legend</a>
189
 
                                        </li>
190
 
                                    
191
 
                                
192
 
                                    
193
 
                                        <li data-description="Shows how to render multiple data points in a singe marker.">
194
 
                                            <a href="charts-groupmarkers.html">Group Marker Chart</a>
195
 
                                        </li>
196
 
                                    
197
 
                                
198
 
                            </ul>
199
 
                        </div>
200
 
                    </div>
201
 
                
202
 
 
203
 
                
204
 
            </div>
205
 
        </div>
206
 
    </div>
207
 
</div>
208
 
 
209
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
210
 
<script>prettyPrint();</script>
211
 
 
212
 
</body>
213
 
</html>