← Back to branch summary

~ubuntu-branches/ubuntu/quantal/maas/quantal-updates

« back to all changes in this revision

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

  • Committer: Package Import Robot
  • Author(s): Andres Rodriguez
  • Date: 2012-07-03 17:42:37 UTC
  • mfrom: (1.1.13)
  • Revision ID: package-import@ubuntu.com-20120703174237-p8l0keuuznfg721k
Tags: 0.1+bzr709+dfsg-0ubuntu1
* New Upstream release
* debian/control:
  - Depends on python-celery, python-tempita, libjs-yui3-{full,min},
    libjs-raphael
* debian/maas.install:
  - Install apiclient, celeryconfig.py, maas-import-pxe-files, preseeds_v2.
  - Update to install various files from chroot, rather tha manually copy
    them from the source.
* debian/maas.links: symlink celeryconfig.py
* debian/maas.maas-celery.upstart: Add job.
* debian/rules:
  - Install celery upstart job.
  - Do not install jslibs as packages are now used.
  - Drop copying of maas_local_settings_sample.py as source now ships
    a maas_local_settings.py
* debian/patches:
  - 04-maas-http-fix.patch: Drop. Merged upstream.
  - 01-fix-database-settings.patch: Refreshed.
  - 99_enums_js.patch: Added until creation of enum.js / build process
    is fixed.
* debian/maas.postinst: Update bzr version to correctly handle upgrades.

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/maasserver/static/jslibs/yui/3.4.1/docs/charts/index.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Charts</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>Charts</h1>
15
 
 
16
 
    
17
 
        <a href="#toc" class="jump">Jump to Table of Contents</a>
18
 
    
19
 
 
20
 
    <div class="yui3-g">
21
 
        <div id="main" class="yui3-u">
22
 
            <div class="content"><div class="intro">
23
 
        <p>
24
 
                <img src="../assets/charts/img/chart-01.png" alt="Screenshot of the Charts widget" style="border: 1px solid #bfbfbf; float:right; height:150px; margin: 0 0 8px 8px; width:275px;">
25
 
                The Charts module provides a JavaScript API for visualizing data in a variety of formats across a <a href="http://developer.yahoo.com/yui/articles/gbs">browser test baseline</a>. Based on device and browser capabilities, Charts leverages SVG, HTML Canvas and VML to render its graphical elements. 
26
 
        </p>
27
 
        <p>
28
 
        The Charts module features a <code>Chart</code> class that allows you to easily create a chart from a set of data. <code>Chart</code> extends <code>Widget</code> and includes configurable attributes that enable you to customize a Chart. Currently, the <code>Chart</code> widget can be used to create different variations and combinations of line, marker, area, spline, column, bar and pie charts.
29
 
        </p>
30
 
</div>
31
 
<h2 id="getting-started">Getting Started</h2>
32
 
 
33
 
<p>
34
 
To include the source files for Charts and its dependencies, first load
35
 
the YUI seed file if you haven't already loaded it.
36
 
</p>
37
 
 
38
 
<pre class="code prettyprint">&lt;script src=&quot;http:&#x2F;&#x2F;yui.yahooapis.com&#x2F;3.4.1&#x2F;build&#x2F;yui&#x2F;yui-min.js&quot;&gt;&lt;&#x2F;script&gt;</pre>
39
 
 
40
 
 
41
 
<p>
42
 
Next, create a new YUI instance for your application and populate it with the
43
 
modules you need by specifying them as arguments to the <code>YUI().use()</code> method.
44
 
YUI will automatically load any dependencies required by the modules you
45
 
specify.
46
 
</p>
47
 
 
48
 
<pre class="code prettyprint">&#x2F;&#x2F; Create a new YUI instance and populate it with the required modules.
49
 
YUI().use(&#x27;charts&#x27;, function (Y) {
50
 
    &#x2F;&#x2F; Charts is available and ready for use. Add implementation
51
 
    &#x2F;&#x2F; code here.
52
 
});</pre>
53
 
 
54
 
 
55
 
<p>
56
 
For more information on creating YUI instances and on the
57
 
<a href="http://yuilibrary.com/yui/docs/api/classes/YUI.html#method_use"><code>use()</code> method</a>, see the
58
 
documentation for the <a href="../yui/index.html">YUI Global object</a>.
59
 
</p>
60
 
 
61
 
 
62
 
<h2 id="using">Using the charts widget</h2>
63
 
 
64
 
<p>This section describes how to use the charts widget in further detail.
65
 
It contains these subsections:</p>
66
 
 
67
 
 
68
 
<h3 id="instantiating">Instantiating A Chart</h3>
69
 
 
70
 
<p>All you need to instantiate a chart is
71
 
        <ol>
72
 
            <li>A div container to render the chart.</li>
73
 
            <li>An array to provide data for the chart.</li>
74
 
        </ol>
75
 
</p>
76
 
 
77
 
<h4 id="css">CSS</h4>
78
 
<pre class="code prettyprint">#mychart {
79
 
    width: 600px;
80
 
    height: 400px;
81
 
}</pre>
82
 
 
83
 
<h4 id="html">HTML</h4>
84
 
<pre class="code prettyprint">&lt;div id=&quot;mychart&quot;&gt;&lt;&#x2F;div&gt;</pre>
85
 
 
86
 
<h4 id="javascript">JavaScript</h4>
87
 
<pre class="code prettyprint">&#x2F;&#x2F; Data for the chart
88
 
var myDataValues = [
89
 
    {category:&quot;5&#x2F;1&#x2F;2010&quot;, values:2000},
90
 
    {category:&quot;5&#x2F;2&#x2F;2010&quot;, values:50},
91
 
    {category:&quot;5&#x2F;3&#x2F;2010&quot;, values:400},
92
 
    {category:&quot;5&#x2F;4&#x2F;2010&quot;, values:200},
93
 
    {category:&quot;5&#x2F;5&#x2F;2010&quot;, values:5000}
94
 
];
95
 
 
96
 
&#x2F;&#x2F; Instantiate and render the chart
97
 
var mychart = new Y.Chart({
98
 
    dataProvider: myDataValues,
99
 
    render: &quot;#mychart&quot;
100
 
});</pre>
101
 
 
102
 
 
103
 
    <p>By default, <code>Chart</code> creates a graph with lines and markers. This can be changed through the <code>type</code> attribute. Available values are listed below:
104
 
    <table>
105
 
        <tr>
106
 
            <th>Type</th>
107
 
            <th>Description</th>
108
 
        </tr>
109
 
        <tr>
110
 
            <td><code>area</code></td>
111
 
            <td>Visualizes quantitative data with a fill between an axis and relevant data points.</td></tr>
112
 
        <tr>
113
 
            <td><code>areaspline</code></td>
114
 
            <td>An Area Chart in which data points are connected by a curve.</td>
115
 
        </tr>
116
 
        <tr>
117
 
            <td><code>bar</code></td>
118
 
            <td>Visualizes bars positioned vertically along a category or time axis. The bars' lengths are proportional to the values they represent along a horizontal axis.</td>
119
 
        </tr>
120
 
        <tr>
121
 
            <td><code>column</code></td>
122
 
            <td>Visualizes bars positioned vertically along a category or time axis. The bars' lengths are proportional to the values they represent along a horizontal axis.</td>
123
 
        </tr>
124
 
        <tr>
125
 
            <td><code>combo</code></td>
126
 
            <td>Combination of line, marker and area chart. By default, there is no area fill. This is the default type for a <code>Chart</code>.</td>
127
 
        </tr>
128
 
        <tr>
129
 
            <td><code>combospline</code></td>
130
 
            <td>A combo chart in which the data points are connected by a curve.</td>
131
 
        </tr>
132
 
        <tr>
133
 
            <td><code>line</code></td>
134
 
            <td>Visualizes quantitative data on a graph by connecting relevant data points.</td>
135
 
        </tr>
136
 
        <tr>
137
 
            <td><code>markerseries</code></td>
138
 
            <td>Visualizes quantitative data by plotting relevant data points on a graph.</td>
139
 
        </tr>
140
 
        <tr>
141
 
            <td><code>pie</code></td>
142
 
            <td>A circular chart divided into wedges which represent data as a percentage of a whole.</td>
143
 
        </tr>
144
 
        <tr>
145
 
            <td><code>spline</code></td>
146
 
            <td>Visualizes quantitative data on a graph by connecting relevant data points with a curve.</td>
147
 
        </tr>
148
 
    </table>
149
 
    </p>
150
 
 
151
 
    <h3 id="chartapplication">Chart Application</h3>
152
 
    <p>The <code>Chart</code> class acts as a facade for two underlying application classes:
153
 
    <dl>
154
 
        <dt>CartesianChart</dt><dd>An application used to render multiple series to a graph with x and y axes. Many series can be rendered in a CartesianChart.</dd>
155
 
        <dt>PieChart</dt><dd>An application used to render Pie Charts.</dd>
156
 
    </dl>
157
 
 
158
 
    <p>When <code>Chart</code> is instantiated, the <code>type</code> attribute determines which class instance will be returned. A value of <code>pie</code> will return an instance of
159
 
    <code>PieChart</code>. All other values will return an instance of <code>CartesianChart</code>. For the most part, this is a distinction that only occurs under the hood. As a
160
 
    developer, this can be viewed as a single API.</p>
161
 
 
162
 
    <h3 id="attributes">Attributes</h3>
163
 
 
164
 
    <p>The <code>Chart</code> widget adds the following key attributes, in addition to the attributes provided by the base <a href="../widget/index.html#attributes">Widget</a> class:</p>
165
 
            <table>
166
 
                <tr>
167
 
                    <th>Property</th>
168
 
                    <th>Type</th>
169
 
                    <th>Description</th>
170
 
                </tr>
171
 
                <tr>
172
 
                    <td><code>axes</code></td>
173
 
                    <td><code>Object</code></td>
174
 
                    <td>Axes to appear in the chart. This can be an object of axis instances or object literals used to construct the appropriate axes.</td>
175
 
                </tr>
176
 
                <tr>
177
 
                    <td><code>categoryAxis</code></td>
178
 
                    <td><code>Axis</code></td>
179
 
                    <td>Reference to the chart's category axis.</td>
180
 
                </tr>
181
 
                <tr>
182
 
                    <td><code>categoryAxisName</code></td>
183
 
                    <td><code>String</code></td>
184
 
                    <td>Indicates the key value used to identify a category axis in the <code>axes</code> hash. If not specified, the categoryKey attribute value will be used.</td>
185
 
                </tr>
186
 
                <tr>
187
 
                    <td><code>categoryKey</code></td>
188
 
                    <td><code>String</code></td>
189
 
                    <td>The key value used for the chart's category axis. The default value is category.</td>
190
 
                </tr>
191
 
                <tr>
192
 
                    <td><code>categoryType</code></td>
193
 
                    <td><code>String</code></td>
194
 
                    <td>Indicates whether to use a <code>CategoryAxis</code> or <code>TimeAxis</code> for the <code>Chart</code> instance's category axis. The default value is category.</td>
195
 
                </tr>
196
 
                <tr>
197
 
                    <td><code>dataProvider</code></td>
198
 
                    <td><code>Array</code></td>
199
 
                    <td>Array of data used to construct the chart.</td>
200
 
                </tr>
201
 
                <tr>
202
 
                    <td><code>direction</code></td>
203
 
                    <td><code>String</code></td>
204
 
                    <td>Direction of chart's category axis when there is no series collection specified. Charts can be horizontal or vertical. When the chart type is column, the chart is horizontal. 
205
 
                    When the chart type is bar, the chart is vertical.</td>
206
 
                </tr>
207
 
                <tr>
208
 
                    <td><code>horizontalGridlines</code></td>
209
 
                    <td><code>Gridlines</code></td>
210
 
                    <td>Reference to the horizontalGridlines for a cartesian chart.</td>
211
 
                </tr>
212
 
                <tr>
213
 
                    <td><code>interactionType</code></td>
214
 
                    <td><code>String</code></td>
215
 
                    <td>Indicates the the <code>Chart</code> instance will fire <code>marker</code> or <code>planar</code> events. The default value is marker.</td>
216
 
                </tr>
217
 
                <tr>
218
 
                    <td><code>seriesCollection</code></td>
219
 
                    <td><code>Array</code></td><td>Collection of series to appear on the chart. This can be an array of Series instances or object literals used to construct the appropriate series.
220
 
                    </td>
221
 
                </tr>
222
 
                <tr>
223
 
                    <td><code>seriesKeys</code></td>
224
 
                    <td><code>Array</code></td>
225
 
                    <td>A collection of keys that map to the series axes. If no keys are set, they will be generated automatically depending on the data structure passed into the chart.</td>
226
 
                </tr>
227
 
                <tr>
228
 
                    <td><code>showAreaFill</code></td>
229
 
                    <td><code>Boolean</code></td>
230
 
                    <td>Indicates whether or not an area is filled in a combo chart.</td>
231
 
                </tr>
232
 
                <tr>
233
 
                    <td><code>showLines</code></td>
234
 
                    <td><code>Boolean</code></td>
235
 
                    <td>Indicates whether to display lines in a combo chart.</td>
236
 
                </tr>
237
 
                <tr>
238
 
                    <td><code>showMarkers</code></td>
239
 
                    <td><code>Boolean</code></td>
240
 
                    <td>Indicates whether to display markers in a combo chart.</td>
241
 
                </tr>
242
 
                <tr>
243
 
                    <td><code>stacked</code></td>
244
 
                    <td><code>Boolean</code></td>
245
 
                    <td>Indicates whether or not the chart is stacked.</td>
246
 
                </tr>
247
 
                <tr>
248
 
                    <td><code>styles</code></td>
249
 
                    <td><code>Object</code></td>
250
 
                    <td>properties for the chart.</td>
251
 
                </tr>
252
 
                <tr>
253
 
                    <td><code>tooltip</code></td>
254
 
                    <td><code>Object</code></td>
255
 
                    <td>Reference to the default tooltip available for the chart.</td>
256
 
                </tr>
257
 
                <tr>
258
 
                    <td><code>type</code></td>
259
 
                    <td><code>String</code></td>
260
 
                    <td>Indicates the default series type for the chart. The default value is <code>combo</code></td>
261
 
                </tr>
262
 
                <tr>
263
 
                    <td><code>valueAxisName</code></td>
264
 
                    <td><code>String</code></td>
265
 
                    <td>Indicates the key value used to identify the default value axis.</td>
266
 
                </tr>
267
 
                <tr>
268
 
                    <td><code>verticalGridlines</code></td>
269
 
                    <td><code>Gridlines</code></td>
270
 
                    <td>Reference to the verticalGridlines for a cartesian chart.</td>
271
 
                </tr>
272
 
            </table>
273
 
            
274
 
            <h3 id="dataProvider">The <code>dataProvider</code> Attribute</h3>
275
 
            <p>The only required attributes for instantiating a <code>Chart</code> instance are <code>dataProvider</code> and <code>render</code>. The <code>render</code> attribute can be included 
276
 
            in the configuration argument or called explicitly after instantiation.</p>
277
 
<pre class="code prettyprint">mychart.render(&quot;#mychart&quot;);</pre>
278
 
 
279
 
 
280
 
            <p>The <code>Chart</code> widget requires an array for its source of data. The <code>Chart</code> widget will accept an array of object literals or arrays. When an array of arrays 
281
 
            is received, the values in the first index will be used for the category axis and all subsequent indices will be used for the value axis/axes. When an array of object literals is 
282
 
            received, all records with a key matching the <code>categoryKey</code> attribute will be used for the category axis with all other records used for the value axis/axes.</p>
283
 
<h4 id="multi-dimensional-array">Multi-dimensional Array</h4>
284
 
<pre class="code prettyprint">var myDataValues = [
285
 
    [&quot;5&#x2F;1&#x2F;2010&quot;, &quot;5&#x2F;2&#x2F;2010&quot;, &quot;5&#x2F;3&#x2F;2010&quot;, &quot;5&#x2F;4&#x2F;2010&quot;, &quot;5&#x2F;5&#x2F;2010&quot;],
286
 
    [2000, 50, 400, 200, 5000]
287
 
];</pre>
288
 
 
289
 
<h4 id="object-literal-array">Object Literal Array</h4>
290
 
<pre class="code prettyprint">var myDataValues = [
291
 
    {category:&quot;5&#x2F;1&#x2F;2010&quot;, values:2000},
292
 
    {category:&quot;5&#x2F;2&#x2F;2010&quot;, values:50},
293
 
    {category:&quot;5&#x2F;3&#x2F;2010&quot;, values:400},
294
 
    {category:&quot;5&#x2F;4&#x2F;2010&quot;, values:200},
295
 
    {category:&quot;5&#x2F;5&#x2F;2010&quot;, values:5000}
296
 
];</pre>
297
 
 
298
 
<p>The underlying structure of the <code>dataProvider</code> is an array of object literals. If a <code>Chart</code> receives a multi-dimensional array for its 
299
 
    <code>dataProvider</code>, it will convert the array to an array of object literals.</p>
300
 
 
301
 
    <h3 id="usingtooltip">Using the <code>tooltip</code> Attribute</h3>
302
 
    <p>The <code>Chart</code> class comes with a built-in simple tooltip. This tooltip can be customized or disabled with the <code>tooltip</code> attribute which contains the following
303
 
    properties:</p>
304
 
 
305
 
    <table>
306
 
        <tr><th>Property</th><th>Type</th><th>Description</th></tr>
307
 
        <tr><td><code>hideEvent</code></td><td><code>String</code>/<code>Array</code></td><td>Event that hides the tooltip. This allows you to specify which mouse event(s) hides the tooltip. You can also pass this an array of events and each event in the array will hide the tooltip. The default value is <code>mouseout</code>.</td></tr>
308
 
        <tr><td><code>markerEventHandler</code></td><td><code>Function</code></td><td>Displays and hides a tooltip based on marker events.</td></tr>
309
 
        <tr><td><code>markerLabelFunction</code></td><td><code>Function</code></td><td>Reference to the function used to format a marker event triggered tooltip's text. The markerLabelFunction has the following arguments:
310
 
        <dl>
311
 
            <dt>categoryItem</dt><dd>An object containing the following:
312
 
                <dl>
313
 
                    <dt>axis</dt><dd>The axis that the category is bound to</dd>
314
 
                    <dt>displayName</dt><dd>The display name set to the category (defaults to key if not provided)</dd>
315
 
                    <dt>key</dt><dd>The key of the category</dd>
316
 
                    <dt>value</dt><dd>The value of the category</dd>
317
 
                </dl>
318
 
            </dd>
319
 
            <dt>valueItem</dt><dd>An object containing the following:
320
 
                <dl>
321
 
                    <dt>axis</dt><dd>The axis that the item's series is bound to</dd>
322
 
                    <dt>displayName</dt><dd>The display name of the series (defaults to key if not provided)</dd>
323
 
                    <dt>key</dt><dd>The key for the series</dd>
324
 
                    <dt>value</dt><dd>The value for the series item<dd>
325
 
                </dl>
326
 
            </dd>
327
 
            <dt>itemIndex</dt><dd>The index of the item within its series.</dd>
328
 
            <dt>series</dt><dd>The series that the item belongs to</dd>
329
 
            <dt>seriesIndex</dt><dd>The index of the series in the seriesCollection</dd>
330
 
        </dl>
331
 
    </td></tr>
332
 
        <tr><td><code>node</code></td><td><code>HTMLElement</code></td><td>Reference (read-only) to the actual dom node of the tooltip.</td></tr>
333
 
        <tr><td><code>planarEventHandler</code></td><td><code>Function</code></td><td>Displays and hides a tooltip based on planar events.</td></tr>
334
 
        <tr><td><code>planarLabelFunction</code></td><td><code>Function</code></td><td>Reference to the function used to format a planar event triggered tooltip's text. The <code>planarLabelFunction</code> has the following arguments:
335
 
        <dl>
336
 
            <dt>categoryAxis</dt><dd>Reference to the categoryAxis of the chart.</dd>
337
 
            <dt>valueItems</dt><dd>Array of objects for each series that has a data point in the coordinate plane of the event. Each object contains the following data:
338
 
                <dl>
339
 
                    <dt>axis</dt><dd>The value axis of the series.</dd>
340
 
                    <dt>key</dt><dd>The key for the series.</dd>
341
 
                    <dt>value</dt><dd>The value for the series item.</dd>
342
 
                    <dt>displayName</dt><dd>The display name of the series. (defaults to key if not provided)</dd>
343
 
                </dl>
344
 
            </dd>
345
 
            <dt><dt>index</dt><dd>The index of the item within its series.</dd>
346
 
            <dt>seriesArray</dt><dd>Array of series instances for each value item.</dd>
347
 
            <dt>seriesIndex</dt><dd>The index of the series in the <code>seriesCollection</code>.</dd>
348
 
        </dl>
349
 
    </td></tr>
350
 
        <tr><td><code>show</code></td><td><code>Boolean</code></td><td>Indicates whether to show a tooltip.</td></tr>
351
 
        <tr><td><code>showEvent</code></td><td><code>String</code></td><td>Event that triggers the tooltip. This allows you to specify which mouse event will cause the tooltip to display. The default value is <code>mouseover</code></td></tr>
352
 
        <tr><td><code>styles</code></td><td><code>Object</code></td><td>Hash of CSS styles that are applied to the tooltip's node.</td></tr>
353
 
    </table>
354
 
 
355
 
    <h3 id="usingstyles">Styling a <code>CartesianChart</code> with the <code>styles</code> Attribute</h3>
356
 
    <p>The <code>styles</code> attribute can be used to update the properties of different chart components in a <code>CartesianChart</code>.
357
 
 
358
 
    <table>
359
 
        <tr><th>Property</th><th>Type</th><th>Description</th></tr>
360
 
        <tr><td><code>axes</code></td><td><code>Object</code></td><td>An object containing references to the <code>styles</code> attribute for each <code>Axis</code> instance in the chart.</td></tr>
361
 
        <tr><td><code>graph</code></td><td><code>Object</code></td><td>A reference to the <code>styles</code> attribute of the chart applications's <code>Graph</code>.</td></tr>
362
 
        <tr><td><code>series</code></td><td><code>Object</code></td><td>An object containing references to the <code>styles</code> attribute for each <code>CartesianSeries</code> instance in the chart.</td></tr>
363
 
    </table>
364
 
 
365
 
 
366
 
    <h3 id="usingaxes">Using the <code>axes</code> Attribute</h3>
367
 
    <p>The <code>axes</code> attribute allows you to specify axes to be used in the chart. The <code>axes</code> attribute contains a hash of either <code>Axis</code> instances or
368
 
    object literals containing information that the <code>Chart</code> will use to create axes. The most common use case is to use object literals. Below are the attributes available:
369
 
 
370
 
    <table>
371
 
        <tr><th>Property</th><th>Type</th><th>Description</th></tr>
372
 
        <tr><td><code>alwaysShowZero</code></td><td><code>Boolean</code></td><td>Ensures that zero appears on a <code>NumericAxis</code> when <code>minimum</code> and <code>maximum</code> are not explicitly set.</td></tr>
373
 
        <tr><td><code>keys</code></td><td><code>Array</code></td><td>An array keys used to bind data from the <code>dataProvider</code> to the axis.</td></tr>
374
 
        <tr><td><code>labelFormat</code></td><td><code>Object</code></td><td>Template for formatting labels. Used by <code>labelFunction</code> in <code>NumericAxis</code> and <code>TimeAxis</code> instances. For <code>TimeAxis</code> instances the <code>labelFormat</code> is an <code>STRFTime</code> string. For <code>NumericAxis</code> instances the <code>labelFormat</code> is an object literal containing the following properties:
375
 
        <ul>
376
 
            <li>prefix</li>
377
 
            <li>thousandsSeparator</li>
378
 
            <li>decimalSeparator</li>
379
 
            <li>decimalPlaces</li>
380
 
            <li>suffix</li>
381
 
        </ul></td></tr>
382
 
        <tr><td><code>labelFunction</code></td><td><code>Function</code></td><td>Function used to format label for display.</td></tr>
383
 
        <tr><td><code>maximum</code></td><td><code>Object</code></td><td>The maximum value to display on an axis. (<code>TimeAxis</code> and <code>NumericAxis</code> only)</td></tr>
384
 
        <tr><td><code>minimum</code></td><td><code>Object</code></td><td>The minimum value to display on an axis. (<code>TimeAxis</code> and <code>NumericAxis</code> only)</td></tr>
385
 
        <tr><td><code>position</code></td><td><code>String</code></td><td>Position in relationship to the graph in which to place the axis. (top, right, bottom, left)</td></tr>
386
 
        <tr><td><code>roundingMethod</code></td><td><code>String</code></td><td>Algorithm used for rounding units on a <code>NumericAxis</code> when <code>minimum</code> and <code>maximum</code> are not explicitly set.</td></tr>
387
 
    </table>
388
 
 
389
 
 
390
 
    <h3 id="referenceseriesandaxis">Referencing Series and Axis Instances</h3>
391
 
    <p>Sometimes you'll want to update an axis or a series after a chart has been instantiatied. This can be done with the <code>Chart</code>'s <code>getAxisByKey</code> and
392
 
    <code>getSeries</code> methods. The <code>getAxisByKey</code> method looks up and returns an <code>Axis</code> instance based on its a key reference.</h4>
393
 
<h4 id="using-getaxisbykey">Using <code>getAxisByKey</code></h4>
394
 
<pre class="code prettyprint">var leftAxis = mychart.getAxisByKey(&quot;values&quot;);
395
 
leftAxis.set(&quot;styles&quot;, {label:{rotation:-45}});</pre>
396
 
 
397
 
 
398
 
            <p>The <code>getSeries</code> method will accept either an index or a key reference and return a series.</p>
399
 
<h4 id="using-getseries-with-a-key-">Using <code>getSeries</code> with a Key </h4>
400
 
<pre class="code prettyprint">var mySeries = mychart.getSeries(&quot;category&quot;);
401
 
mySeries.set(&quot;visible&quot;, false);</pre>
402
 
 
403
 
 
404
 
<h4 id="using-getseries-with-an-index-">Using <code>getSeries</code> with an Index </h4>
405
 
<pre class="code prettyprint">var mySeries = mychart.getSeries(0);
406
 
mySeries.set(&quot;visible&quot;, false);</pre>
407
 
 
408
 
 
409
 
<h2 id="issues">Known Issues</h2>
410
 
<ul class="spaced">
411
 
    <li>
412
 
        <p>
413
 
        Charts load slowly in android devices. Performance optimizations will need to be added in a future release. 
414
 
        </p>
415
 
    </li>
416
 
    <li>
417
 
        <p>
418
 
        Planar interaction with chart types that do not include markers can be confusing. It is not readily apparent where to mouseover to display tooltips. This will be addressed in a future release.
419
 
        </p>
420
 
    </li>
421
 
    <li>
422
 
        <p>
423
 
        Default mouse interactions are not intuitive for touch devices. For example, tooltips show and hide on <code>mouseover</code> and <code>mouseout</code> events. Analysis needs to be done to determine
424
 
        the appropriate default events for touch devices. See the <a href="#usingtooltip"> Using the <code>tooltip</code> Attribute</a> section to 
425
 
        see how to customize mouse events for the chart.
426
 
        </p>
427
 
    </li>
428
 
</ul>
429
 
</div>
430
 
        </div>
431
 
 
432
 
        <div id="sidebar" class="yui3-u">
433
 
            
434
 
                <div id="toc" class="sidebox">
435
 
                    <div class="hd">
436
 
                        <h2 class="no-toc">Table of Contents</h2>
437
 
                    </div>
438
 
 
439
 
                    <div class="bd">
440
 
                        <ul class="toc">
441
 
<li>
442
 
<a href="#getting-started">Getting Started</a>
443
 
</li>
444
 
<li>
445
 
<a href="#using">Using the charts widget</a>
446
 
<ul class="toc">
447
 
<li>
448
 
<a href="#instantiating">Instantiating A Chart</a>
449
 
<ul class="toc">
450
 
<li>
451
 
<a href="#css">CSS</a>
452
 
</li>
453
 
<li>
454
 
<a href="#html">HTML</a>
455
 
</li>
456
 
<li>
457
 
<a href="#javascript">JavaScript</a>
458
 
</li>
459
 
</ul>
460
 
</li>
461
 
<li>
462
 
<a href="#chartapplication">Chart Application</a>
463
 
</li>
464
 
<li>
465
 
<a href="#attributes">Attributes</a>
466
 
</li>
467
 
<li>
468
 
<a href="#dataProvider">The <code>dataProvider</code> Attribute</a>
469
 
<ul class="toc">
470
 
<li>
471
 
<a href="#multi-dimensional-array">Multi-dimensional Array</a>
472
 
</li>
473
 
<li>
474
 
<a href="#object-literal-array">Object Literal Array</a>
475
 
</li>
476
 
</ul>
477
 
</li>
478
 
<li>
479
 
<a href="#usingtooltip">Using the <code>tooltip</code> Attribute</a>
480
 
</li>
481
 
<li>
482
 
<a href="#usingstyles">Styling a <code>CartesianChart</code> with the <code>styles</code> Attribute</a>
483
 
</li>
484
 
<li>
485
 
<a href="#usingaxes">Using the <code>axes</code> Attribute</a>
486
 
</li>
487
 
<li>
488
 
<a href="#referenceseriesandaxis">Referencing Series and Axis Instances</a>
489
 
<ul class="toc">
490
 
<li>
491
 
<a href="#using-getaxisbykey">Using <code>getAxisByKey</code></a>
492
 
</li>
493
 
<li>
494
 
<a href="#using-getseries-with-a-key-">Using <code>getSeries</code> with a Key </a>
495
 
</li>
496
 
<li>
497
 
<a href="#using-getseries-with-an-index-">Using <code>getSeries</code> with an Index </a>
498
 
</li>
499
 
</ul>
500
 
</li>
501
 
</ul>
502
 
</li>
503
 
<li>
504
 
<a href="#issues">Known Issues</a>
505
 
</li>
506
 
</ul>
507
 
                    </div>
508
 
                </div>
509
 
            
510
 
 
511
 
            
512
 
                <div class="sidebox">
513
 
                    <div class="hd">
514
 
                        <h2 class="no-toc">Examples</h2>
515
 
                    </div>
516
 
 
517
 
                    <div class="bd">
518
 
                        <ul class="examples">
519
 
                            
520
 
                                
521
 
                                    <li data-description="Shows how to use Charts to create a basic chart.">
522
 
                                        <a href="charts-simple.html">Basic Charts Implementation</a>
523
 
                                    </li>
524
 
                                
525
 
                            
526
 
                                
527
 
                                    <li data-description="Shows how to create a chart with multiple series.">
528
 
                                        <a href="charts-multiseries.html">Chart with Multiple Series</a>
529
 
                                    </li>
530
 
                                
531
 
                            
532
 
                                
533
 
                                    <li data-description="Shows how to create a column chart with multiple series.">
534
 
                                        <a href="charts-column.html">Specify Chart Type</a>
535
 
                                    </li>
536
 
                                
537
 
                            
538
 
                                
539
 
                                    <li data-description="Shows how to create a column chart with a stacked numeric axis.">
540
 
                                        <a href="charts-stackedcolumn.html">Create Stacked Chart</a>
541
 
                                    </li>
542
 
                                
543
 
                            
544
 
                                
545
 
                                    <li data-description="Shows how to create a chart with a time axis.">
546
 
                                        <a href="charts-timeaxis.html">Create a Chart with a Time Axis</a>
547
 
                                    </li>
548
 
                                
549
 
                            
550
 
                                
551
 
                                    <li data-description="Shows how to add gridlines to a chart.">
552
 
                                        <a href="charts-gridlines.html">Add Gridlines to a Chart</a>
553
 
                                    </li>
554
 
                                
555
 
                            
556
 
                                
557
 
                                    <li data-description="Shows how to create a chart with planar based events.">
558
 
                                        <a href="charts-stackedarea.html">Create a Stacked Area Chart with Planar Based Events</a>
559
 
                                    </li>
560
 
                                
561
 
                            
562
 
                                
563
 
                                    <li data-description="Shows how to use a chart&#x27;s styles attribute to customize a chart.">
564
 
                                        <a href="charts-globalstyles.html">Customize a Chart</a>
565
 
                                    </li>
566
 
                                
567
 
                            
568
 
                                
569
 
                                    <li data-description="Shows how to customize the default tooltip of a chart.">
570
 
                                        <a href="charts-customizedtooltip.html">Customize a Chart&#x27;s Tooltip</a>
571
 
                                    </li>
572
 
                                
573
 
                            
574
 
                                
575
 
                                    <li data-description="Shows how to explicitly define the axes and series for a chart.">
576
 
                                        <a href="charts-objectstyles.html">Define a Chart&#x27;s Axes and Series</a>
577
 
                                    </li>
578
 
                                
579
 
                            
580
 
                                
581
 
                                    <li data-description="Shows how to use charts to create a pie chart.">
582
 
                                        <a href="charts-pie.html">Pie Chart</a>
583
 
                                    </li>
584
 
                                
585
 
                            
586
 
                                
587
 
                                    <li data-description="Shows how to create a chart with multiple value axes.">
588
 
                                        <a href="charts-dualaxes.html">Dual Axes Chart</a>
589
 
                                    </li>
590
 
                                
591
 
                            
592
 
                                
593
 
                                    <li data-description="Shows how to access a chart instance&#x27;s value axis after the chart has rendered.">
594
 
                                        <a href="charts-axisupdate.html">Update Chart Axis</a>
595
 
                                    </li>
596
 
                                
597
 
                            
598
 
                                
599
 
                                    <li data-description="Shows how to access a chart instance&#x27;s seriesCollection after the chart has rendered.">
600
 
                                        <a href="charts-seriesupdate.html">Update Chart Series</a>
601
 
                                    </li>
602
 
                                
603
 
                            
604
 
                        </ul>
605
 
                    </div>
606
 
                </div>
607
 
            
608
 
 
609
 
            
610
 
        </div>
611
 
    </div>
612
 
</div>
613
 
 
614
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
615
 
<script>prettyPrint();</script>
616
 
 
617
 
</body>
618
 
</html>