← Back to branch summary

~ubuntu-branches/ubuntu/precise/maas/precise-security

« back to all changes in this revision

Viewing changes to src/maasserver/static/jslibs/yui/3.4.1/docs/charts/charts-objectstyles.html

Tags: 1.2+bzr1373+dfsg-0ubuntu1~12.04.4
https://launchpad.net/bugs/1039513
https://launchpad.net/bugs/1158425
* SECURITY UPDATE: failure to authenticate downloaded content (LP: #1039513)
  - debian/patches/CVE-2013-1058.patch: Authenticate downloaded files with
    GnuPG and MD5SUM files. Thanks to Julian Edwards.
  - CVE-2013-1058
* SECURITY UPDATE: configuration options may be loaded from current working
  directory (LP: #1158425)
  - debian/patches/CVE-2013-1057-1-2.patch: Do not load configuration
    options from the current working directory. Thanks to Julian Edwards.
  - CVE-2013-1057

Show diffs side-by-side

added added

removed removed

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