← Back to branch summary

~bcsaller/juju-gui/charmFind

« back to all changes in this revision

Viewing changes to lib/yui/docs/charts/charts-objectstyles.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-objectstyles.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Example: Define a Chart&#x27;s Axes and Series</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: Define a Chart&#x27;s Axes and Series</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
 
#mychart {
24
 
    margin:10px 10px 10px 10px;
25
 
    width:90%;
26
 
    max-width: 800px;
27
 
    height:400px;
28
 
}
29
 
</style>
30
 
<div class="intro">
31
 
<p>This example shows how to explicitly define the axes and series for a <code>Chart</code>.</p>
32
 
</div>
33
 
<div class="example">
34
 
<div id="mychart"></div>
35
 
<script type="text/javascript">
36
 
(function() {
37
 
    YUI().use('charts', function (Y) 
38
 
    { 
39
 
        //dataProvider source
40
 
        var myDataValues = [ 
41
 
            {date:"1/1/2010", miscellaneous:2000, expenses:3700, revenue:2200}, 
42
 
            {date:"2/1/2010", miscellaneous:5000, expenses:9100, revenue:100}, 
43
 
            {date:"3/1/2010", miscellaneous:4000, expenses:1900, revenue:1500}, 
44
 
            {date:"4/1/2010", miscellaneous:3000, expenses:3900, revenue:2800}, 
45
 
            {date:"5/1/2010", miscellaneous:500, expenses:7000, revenue:2650},
46
 
            {date:"6/1/2010", miscellaneous:3000, expenses:4700, revenue:1200} 
47
 
        ];
48
 
        
49
 
        //Define our axes for the chart.
50
 
        var myAxes = {
51
 
            financials:{
52
 
                keys:["miscellaneous", "revenue", "expenses"],
53
 
                position:"right",
54
 
                type:"numeric",
55
 
                styles:{
56
 
                    majorTicks:{
57
 
                        display: "none"
58
 
                    }
59
 
                }
60
 
            },
61
 
            dateRange:{
62
 
                keys:["date"],
63
 
                position:"bottom",
64
 
                type:"category",
65
 
                styles:{
66
 
                    majorTicks:{
67
 
                        display: "none"
68
 
                    },
69
 
                    label: {
70
 
                        rotation:-45,
71
 
                        margin:{top:5}
72
 
                    }
73
 
                }
74
 
            }
75
 
        };
76
 
       
77
 
        //define the series 
78
 
        var seriesCollection = [
79
 
         {
80
 
                type:"column",
81
 
                xAxis:"dateRange",
82
 
                yAxis:"financials",
83
 
                xKey:"date",
84
 
                yKey:"miscellaneous",
85
 
                xDisplayName:"Date",
86
 
                yDisplayName:"Miscellaneous",
87
 
                styles: {
88
 
                    border: {
89
 
                        weight: 1,
90
 
                        color: "#58006e"
91
 
                    },
92
 
                    over: {
93
 
                        fill: {
94
 
                            alpha: 0.7
95
 
                        }
96
 
                    }
97
 
                }
98
 
            },
99
 
            {
100
 
                type:"column",
101
 
                xAxis:"dateRange",
102
 
                yAxis:"financials",
103
 
                xKey:"date",
104
 
                yKey:"expenses",
105
 
                yDisplayName:"Expenses",
106
 
                styles: {
107
 
                    marker:{
108
 
                        fill: {
109
 
                            color: "#e0ddd0" 
110
 
                        },
111
 
                        border: {
112
 
                            weight: 1,
113
 
                            color: "#cbc8ba"
114
 
                        },
115
 
                        over: {
116
 
                            fill: {
117
 
                                alpha: 0.7
118
 
                            }
119
 
                        }
120
 
                    }
121
 
                }
122
 
            },
123
 
            {
124
 
                type:"combo",
125
 
                xAxis:"dateRange",
126
 
                yAxis:"financials",
127
 
                xKey:"date",
128
 
                yKey:"revenue",
129
 
                xDisplayName:"Date",
130
 
                yDisplayName:"Deductions",
131
 
                    line: {
132
 
                        color: "#ff7200"
133
 
                    },
134
 
                marker: {
135
 
                    fill: {
136
 
                        color: "#ff9f3b"
137
 
                    },
138
 
                    border: {
139
 
                        color: "#ff7200",
140
 
                        weight: 1
141
 
                    },
142
 
                    over: {
143
 
                        width: 12,
144
 
                        height: 12
145
 
                    },
146
 
                    width:9,
147
 
                    height:9
148
 
                }
149
 
            }
150
 
        ];
151
 
 
152
 
        //instantiate the chart
153
 
        var myChart = new Y.Chart({
154
 
                            dataProvider:myDataValues, 
155
 
                            axes:myAxes, 
156
 
                            seriesCollection:seriesCollection, 
157
 
                            horizontalGridlines: true,
158
 
                            verticalGridlines: true,
159
 
                            render:"#mychart"
160
 
                        });
161
 
    });
162
 
})();
163
 
</script>
164
 
 
165
 
</div>
166
 
<h3>Defining the axes and series for a <code>Chart</code> instance</h3>
167
 
 
168
 
<p>As we have seen from previous examples, the <code>Chart</code> class allows you to create and customize multiple chart types with very little code. Sometimes you'll want more control 
169
 
over the <code>Chart</code>. Suppose you want to place your value axis on the right or you need different series types in the same chart. Charts allows you to explicitly define your series and axes objects. You can either declare
170
 
an axis or series directly or define them with an object literal and allow the <code>Chart</code> instance to build them for you. In this example, we are going to define our axes and series with
171
 
object literals. This will allow us to place our value axis on the right and build a chart with columns and lines.</p>
172
 
 
173
 
<pre class="code prettyprint">YUI().use(&#x27;charts&#x27;, function (Y) 
174
 
{ 
175
 
    &#x2F;&#x2F;dataProvider source
176
 
    var myDataValues = [ 
177
 
        {date:&quot;1&#x2F;1&#x2F;2010&quot;, miscellaneous:2000, expenses:3700, revenue:2200}, 
178
 
        {date:&quot;2&#x2F;1&#x2F;2010&quot;, miscellaneous:5000, expenses:9100, revenue:100}, 
179
 
        {date:&quot;3&#x2F;1&#x2F;2010&quot;, miscellaneous:4000, expenses:1900, revenue:1500}, 
180
 
        {date:&quot;4&#x2F;1&#x2F;2010&quot;, miscellaneous:3000, expenses:3900, revenue:2800}, 
181
 
        {date:&quot;5&#x2F;1&#x2F;2010&quot;, miscellaneous:500, expenses:7000, revenue:2650},
182
 
        {date:&quot;6&#x2F;1&#x2F;2010&quot;, miscellaneous:3000, expenses:4700, revenue:1200} 
183
 
    ];
184
 
 
185
 
    &#x2F;&#x2F;Define our axes for the chart.
186
 
    var myAxes = {
187
 
        financials:{
188
 
            keys:[&quot;miscellaneous&quot;, &quot;revenue&quot;, &quot;expenses&quot;],
189
 
            position:&quot;right&quot;,
190
 
            type:&quot;numeric&quot;,
191
 
            styles:{
192
 
                majorTicks:{
193
 
                    display: &quot;none&quot;
194
 
                }
195
 
            }
196
 
        },
197
 
        dateRange:{
198
 
            keys:[&quot;date&quot;],
199
 
            position:&quot;bottom&quot;,
200
 
            type:&quot;category&quot;,
201
 
            styles:{
202
 
                majorTicks:{
203
 
                    display: &quot;none&quot;
204
 
                },
205
 
                label: {
206
 
                    rotation:-45,
207
 
                    margin:{top:5}
208
 
                }
209
 
            }
210
 
        }
211
 
    };
212
 
 
213
 
    &#x2F;&#x2F;define the series 
214
 
    var seriesCollection = [
215
 
     {
216
 
            type:&quot;column&quot;,
217
 
            xAxis:&quot;dateRange&quot;,
218
 
            yAxis:&quot;financials&quot;,
219
 
            xKey:&quot;date&quot;,
220
 
            yKey:&quot;miscellaneous&quot;,
221
 
            xDisplayName:&quot;Date&quot;,
222
 
            yDisplayName:&quot;Miscellaneous&quot;,
223
 
            styles: {
224
 
                border: {
225
 
                    weight: 1,
226
 
                    color: &quot;#58006e&quot;
227
 
                },
228
 
                over: {
229
 
                    fill: {
230
 
                        alpha: 0.7
231
 
                    }
232
 
                }
233
 
            }
234
 
        },
235
 
        {
236
 
            type:&quot;column&quot;,
237
 
            xAxis:&quot;dateRange&quot;,
238
 
            yAxis:&quot;financials&quot;,
239
 
            xKey:&quot;date&quot;,
240
 
            yKey:&quot;expenses&quot;,
241
 
            yDisplayName:&quot;Expenses&quot;,
242
 
            styles: {
243
 
                marker:{
244
 
                    fill: {
245
 
                        color: &quot;#e0ddd0&quot; 
246
 
                    },
247
 
                    border: {
248
 
                        weight: 1,
249
 
                        color: &quot;#cbc8ba&quot;
250
 
                    },
251
 
                    over: {
252
 
                        fill: {
253
 
                            alpha: 0.7
254
 
                        }
255
 
                    }
256
 
                }
257
 
            }
258
 
        },
259
 
        {
260
 
            type:&quot;combo&quot;,
261
 
            xAxis:&quot;dateRange&quot;,
262
 
            yAxis:&quot;financials&quot;,
263
 
            xKey:&quot;date&quot;,
264
 
            yKey:&quot;revenue&quot;,
265
 
            xDisplayName:&quot;Date&quot;,
266
 
            yDisplayName:&quot;Deductions&quot;,
267
 
                line: {
268
 
                    color: &quot;#ff7200&quot;
269
 
                },
270
 
            marker: {
271
 
                fill: {
272
 
                    color: &quot;#ff9f3b&quot;
273
 
                },
274
 
                border: {
275
 
                    color: &quot;#ff7200&quot;,
276
 
                    weight: 1
277
 
                },
278
 
                over: {
279
 
                    width: 12,
280
 
                    height: 12
281
 
                },
282
 
                width:9,
283
 
                height:9
284
 
            }
285
 
        }
286
 
    ];
287
 
    
288
 
    &#x2F;&#x2F;instantiate the chart
289
 
    var myChart = new Y.Chart({
290
 
                        dataProvider:myDataValues, 
291
 
                        axes:myAxes, 
292
 
                        seriesCollection:seriesCollection, 
293
 
                        horizontalGridlines: true,
294
 
                        verticalGridlines: true,
295
 
                        render:&quot;#mychart&quot;
296
 
                    });
297
 
});</pre>
298
 
 
299
 
</div>
300
 
            </div>
301
 
        </div>
302
 
 
303
 
        <div class="yui3-u-1-4">
304
 
            <div class="sidebar">
305
 
                
306
 
 
307
 
                
308
 
                    <div class="sidebox">
309
 
                        <div class="hd">
310
 
                            <h2 class="no-toc">Examples</h2>
311
 
                        </div>
312
 
 
313
 
                        <div class="bd">
314
 
                            <ul class="examples">
315
 
                                
316
 
                                    
317
 
                                        <li data-description="Shows how to use Charts to create a basic chart.">
318
 
                                            <a href="charts-simple.html">Basic Charts Implementation</a>
319
 
                                        </li>
320
 
                                    
321
 
                                
322
 
                                    
323
 
                                        <li data-description="Shows how to create a chart with multiple series.">
324
 
                                            <a href="charts-multiseries.html">Chart with Multiple Series</a>
325
 
                                        </li>
326
 
                                    
327
 
                                
328
 
                                    
329
 
                                        <li data-description="Shows how to create a column chart with multiple series.">
330
 
                                            <a href="charts-column.html">Specify Chart Type</a>
331
 
                                        </li>
332
 
                                    
333
 
                                
334
 
                                    
335
 
                                        <li data-description="Shows how to create a column chart with a stacked numeric axis.">
336
 
                                            <a href="charts-stackedcolumn.html">Create Stacked Chart</a>
337
 
                                        </li>
338
 
                                    
339
 
                                
340
 
                                    
341
 
                                        <li data-description="Shows how to create a chart with a time axis.">
342
 
                                            <a href="charts-timeaxis.html">Create a Chart with a Time Axis</a>
343
 
                                        </li>
344
 
                                    
345
 
                                
346
 
                                    
347
 
                                        <li data-description="Shows how to add gridlines to a chart.">
348
 
                                            <a href="charts-gridlines.html">Add Gridlines to a Chart</a>
349
 
                                        </li>
350
 
                                    
351
 
                                
352
 
                                    
353
 
                                        <li data-description="Shows how to create a chart with planar based events.">
354
 
                                            <a href="charts-stackedarea.html">Create a Stacked Area Chart with Planar Based Events</a>
355
 
                                        </li>
356
 
                                    
357
 
                                
358
 
                                    
359
 
                                        <li data-description="Shows how to use a chart&#x27;s styles attribute to customize a chart.">
360
 
                                            <a href="charts-globalstyles.html">Customize a Chart</a>
361
 
                                        </li>
362
 
                                    
363
 
                                
364
 
                                    
365
 
                                        <li data-description="Shows how to customize the default tooltip of a chart.">
366
 
                                            <a href="charts-customizedtooltip.html">Customize a Chart&#x27;s Tooltip</a>
367
 
                                        </li>
368
 
                                    
369
 
                                
370
 
                                    
371
 
                                        <li data-description="Shows how to explicitly define the axes and series for a chart.">
372
 
                                            <a href="charts-objectstyles.html">Define a Chart&#x27;s Axes and Series</a>
373
 
                                        </li>
374
 
                                    
375
 
                                
376
 
                                    
377
 
                                        <li data-description="Shows how to use charts to create a pie chart.">
378
 
                                            <a href="charts-pie.html">Pie Chart</a>
379
 
                                        </li>
380
 
                                    
381
 
                                
382
 
                                    
383
 
                                        <li data-description="Shows how to create a chart with multiple value axes.">
384
 
                                            <a href="charts-dualaxes.html">Dual Axes Chart</a>
385
 
                                        </li>
386
 
                                    
387
 
                                
388
 
                                    
389
 
                                        <li data-description="Shows how to access a chart instance&#x27;s value axis after the chart has rendered.">
390
 
                                            <a href="charts-axisupdate.html">Update Chart Axis</a>
391
 
                                        </li>
392
 
                                    
393
 
                                
394
 
                                    
395
 
                                        <li data-description="Shows how to access a chart instance&#x27;s seriesCollection after the chart has rendered.">
396
 
                                            <a href="charts-seriesupdate.html">Update Chart Series</a>
397
 
                                        </li>
398
 
                                    
399
 
                                
400
 
                                    
401
 
                                        <li data-description="Shows how to add a legend to a chart.">
402
 
                                            <a href="charts-legend.html">Create Chart with a Legend</a>
403
 
                                        </li>
404
 
                                    
405
 
                                
406
 
                                    
407
 
                                        <li data-description="Shows how to render multiple data points in a singe marker.">
408
 
                                            <a href="charts-groupmarkers.html">Group Marker Chart</a>
409
 
                                        </li>
410
 
                                    
411
 
                                
412
 
                            </ul>
413
 
                        </div>
414
 
                    </div>
415
 
                
416
 
 
417
 
                
418
 
            </div>
419
 
        </div>
420
 
    </div>
421
 
</div>
422
 
 
423
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
424
 
<script>prettyPrint();</script>
425
 
 
426
 
</body>
427
 
</html>