|
525
|
1 |
<!DOCTYPE html> |
|
|
2 |
<html lang="en"> |
|
|
3 |
<head> |
|
|
4 |
<meta charset="utf-8"> |
|
|
5 |
<title>Charts</title> |
|
|
6 |
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic"> |
|
|
7 |
<link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css"> |
|
|
8 |
<link rel="stylesheet" href="../assets/css/main.css"> |
|
|
9 |
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css"> |
|
|
10 |
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png"> |
|
|
11 |
<script src="../../build/yui/yui-min.js"></script> |
|
|
12 |
|
|
|
13 |
</head> |
|
|
14 |
<body> |
|
|
15 |
<!-- |
|
|
16 |
<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a> |
|
|
17 |
--> |
|
|
18 |
<div id="doc"> |
|
|
19 |
<div id="hd"> |
|
|
20 |
<h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1> |
|
|
21 |
</div> |
|
|
22 |
|
|
|
23 |
<a href="#toc" class="jump">Jump to Table of Contents</a> |
|
|
24 |
|
|
|
25 |
|
|
|
26 |
<h1>Charts</h1> |
|
|
27 |
<div class="yui3-g"> |
|
|
28 |
<div class="yui3-u-3-4"> |
|
|
29 |
<div id="main"> |
|
|
30 |
<div class="content"><div class="intro"> |
|
|
31 |
<p> |
|
|
32 |
<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;"> |
|
|
33 |
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. |
|
|
34 |
</p> |
|
|
35 |
<p> |
|
|
36 |
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. |
|
|
37 |
</p> |
|
|
38 |
</div> |
|
|
39 |
<h2 id="getting-started">Getting Started</h2> |
|
|
40 |
|
|
|
41 |
<p> |
|
|
42 |
To include the source files for Charts and its dependencies, first load |
|
|
43 |
the YUI seed file if you haven't already loaded it. |
|
|
44 |
</p> |
|
|
45 |
|
|
|
46 |
<pre class="code prettyprint"><script src="http://yui.yahooapis.com/3.10.3/build/yui/yui-min.js"></script></pre> |
|
|
47 |
|
|
|
48 |
|
|
|
49 |
<p> |
|
|
50 |
Next, create a new YUI instance for your application and populate it with the |
|
|
51 |
modules you need by specifying them as arguments to the <code>YUI().use()</code> method. |
|
|
52 |
YUI will automatically load any dependencies required by the modules you |
|
|
53 |
specify. |
|
|
54 |
</p> |
|
|
55 |
|
|
|
56 |
<pre class="code prettyprint"><script> |
|
|
57 |
// Create a new YUI instance and populate it with the required modules. |
|
|
58 |
YUI().use('charts', function (Y) { |
|
|
59 |
// Charts is available and ready for use. Add implementation |
|
|
60 |
// code here. |
|
|
61 |
}); |
|
|
62 |
</script></pre> |
|
|
63 |
|
|
|
64 |
|
|
|
65 |
<p> |
|
|
66 |
For more information on creating YUI instances and on the |
|
|
67 |
<a href="http://yuilibrary.com/yui/docs/api/classes/YUI.html#method_use"><code>use()</code> method</a>, see the |
|
|
68 |
documentation for the <a href="../yui/index.html">YUI Global Object</a>. |
|
|
69 |
</p> |
|
|
70 |
|
|
|
71 |
|
|
|
72 |
<h2 id="using">Using the charts widget</h2> |
|
|
73 |
|
|
|
74 |
<p>This section describes how to use the charts widget in further detail. |
|
|
75 |
It contains these subsections:</p> |
|
|
76 |
|
|
|
77 |
|
|
|
78 |
<h3 id="instantiating">Instantiating A Chart</h3> |
|
|
79 |
|
|
|
80 |
<p>All you need to instantiate a chart is |
|
|
81 |
<ol> |
|
|
82 |
<li>A div container to render the chart.</li> |
|
|
83 |
<li>An array to provide data for the chart.</li> |
|
|
84 |
</ol> |
|
|
85 |
</p> |
|
|
86 |
<p><strong>*NOTE:</strong> By default, the chart will size itself to the dimensions of its container div. Be sure to include a width and height as demonstrated below:</p> |
|
|
87 |
|
|
|
88 |
<h4 id="css">CSS</h4> |
|
|
89 |
<pre class="code prettyprint">#mychart { |
|
|
90 |
width: 600px; |
|
|
91 |
height: 400px; |
|
|
92 |
}</pre> |
|
|
93 |
|
|
|
94 |
<h4 id="html">HTML</h4> |
|
|
95 |
<pre class="code prettyprint"><div id="mychart"></div></pre> |
|
|
96 |
|
|
|
97 |
<h4 id="javascript">JavaScript</h4> |
|
|
98 |
<pre class="code prettyprint">// Data for the chart |
|
|
99 |
var myDataValues = [ |
|
|
100 |
{category:"5/1/2010", values:2000}, |
|
|
101 |
{category:"5/2/2010", values:50}, |
|
|
102 |
{category:"5/3/2010", values:400}, |
|
|
103 |
{category:"5/4/2010", values:200}, |
|
|
104 |
{category:"5/5/2010", values:5000} |
|
|
105 |
]; |
|
|
106 |
|
|
|
107 |
// Instantiate and render the chart |
|
|
108 |
var mychart = new Y.Chart({ |
|
|
109 |
dataProvider: myDataValues, |
|
|
110 |
render: "#mychart" |
|
|
111 |
});</pre> |
|
|
112 |
|
|
|
113 |
|
|
|
114 |
<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: |
|
|
115 |
<table> |
|
|
116 |
<tr> |
|
|
117 |
<th>Type</th> |
|
|
118 |
<th>Description</th> |
|
|
119 |
</tr> |
|
|
120 |
<tr> |
|
|
121 |
<td><code>area</code></td> |
|
|
122 |
<td>Visualizes quantitative data with a fill between an axis and relevant data points.</td></tr> |
|
|
123 |
<tr> |
|
|
124 |
<td><code>areaspline</code></td> |
|
|
125 |
<td>An Area Chart in which data points are connected by a curve.</td> |
|
|
126 |
</tr> |
|
|
127 |
<tr> |
|
|
128 |
<td><code>bar</code></td> |
|
|
129 |
<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> |
|
|
130 |
</tr> |
|
|
131 |
<tr> |
|
|
132 |
<td><code>column</code></td> |
|
|
133 |
<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> |
|
|
134 |
</tr> |
|
|
135 |
<tr> |
|
|
136 |
<td><code>combo</code></td> |
|
|
137 |
<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> |
|
|
138 |
</tr> |
|
|
139 |
<tr> |
|
|
140 |
<td><code>combospline</code></td> |
|
|
141 |
<td>A combo chart in which the data points are connected by a curve.</td> |
|
|
142 |
</tr> |
|
|
143 |
<tr> |
|
|
144 |
<td><code>line</code></td> |
|
|
145 |
<td>Visualizes quantitative data on a graph by connecting relevant data points.</td> |
|
|
146 |
</tr> |
|
|
147 |
<tr> |
|
|
148 |
<td><code>markerseries</code></td> |
|
|
149 |
<td>Visualizes quantitative data by plotting relevant data points on a graph.</td> |
|
|
150 |
</tr> |
|
|
151 |
<tr> |
|
|
152 |
<td><code>pie</code></td> |
|
|
153 |
<td>A circular chart divided into wedges which represent data as a percentage of a whole.</td> |
|
|
154 |
</tr> |
|
|
155 |
<tr> |
|
|
156 |
<td><code>spline</code></td> |
|
|
157 |
<td>Visualizes quantitative data on a graph by connecting relevant data points with a curve.</td> |
|
|
158 |
</tr> |
|
|
159 |
</table> |
|
|
160 |
</p> |
|
|
161 |
|
|
|
162 |
<h3 id="chartapplication">Chart Application</h3> |
|
|
163 |
<p>The <code>Chart</code> class acts as a facade for two underlying application classes: |
|
|
164 |
<dl> |
|
|
165 |
<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> |
|
|
166 |
<dt>PieChart</dt><dd>An application used to render Pie Charts.</dd> |
|
|
167 |
</dl> |
|
|
168 |
|
|
|
169 |
<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 |
|
|
170 |
<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 |
|
|
171 |
developer, this can be viewed as a single API.</p> |
|
|
172 |
|
|
|
173 |
<h3 id="attributes">Attributes</h3> |
|
|
174 |
|
|
|
175 |
<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> |
|
|
176 |
<table> |
|
|
177 |
<tr> |
|
|
178 |
<th>Property</th> |
|
|
179 |
<th>Type</th> |
|
|
180 |
<th>Description</th> |
|
|
181 |
</tr> |
|
|
182 |
<tr> |
|
|
183 |
<td><code>axes</code></td> |
|
|
184 |
<td><code>Object</code></td> |
|
|
185 |
<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> |
|
|
186 |
</tr> |
|
|
187 |
<tr> |
|
|
188 |
<td><code>categoryAxis</code></td> |
|
|
189 |
<td><code>Axis</code></td> |
|
|
190 |
<td>Reference to the chart's category axis.</td> |
|
|
191 |
</tr> |
|
|
192 |
<tr> |
|
|
193 |
<td><code>categoryAxisName</code></td> |
|
|
194 |
<td><code>String</code></td> |
|
|
195 |
<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> |
|
|
196 |
</tr> |
|
|
197 |
<tr> |
|
|
198 |
<td><code>categoryKey</code></td> |
|
|
199 |
<td><code>String</code></td> |
|
|
200 |
<td>The key value used for the chart's category axis. The default value is category.</td> |
|
|
201 |
</tr> |
|
|
202 |
<tr> |
|
|
203 |
<td><code>categoryType</code></td> |
|
|
204 |
<td><code>String</code></td> |
|
|
205 |
<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> |
|
|
206 |
</tr> |
|
|
207 |
<tr> |
|
|
208 |
<td><code>dataProvider</code></td> |
|
|
209 |
<td><code>Array</code></td> |
|
|
210 |
<td>Array of data used to construct the chart.</td> |
|
|
211 |
</tr> |
|
|
212 |
<tr> |
|
|
213 |
<td><code>direction</code></td> |
|
|
214 |
<td><code>String</code></td> |
|
|
215 |
<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. |
|
|
216 |
When the chart type is bar, the chart is vertical.</td> |
|
|
217 |
</tr> |
|
|
218 |
<tr> |
|
|
219 |
<td><code>horizontalGridlines</code></td> |
|
|
220 |
<td><code>Gridlines</code></td> |
|
|
221 |
<td>Reference to the horizontalGridlines for a cartesian chart.</td> |
|
|
222 |
</tr> |
|
|
223 |
<tr> |
|
|
224 |
<td><code>interactionType</code></td> |
|
|
225 |
<td><code>String</code></td> |
|
|
226 |
<td>Indicates the the <code>Chart</code> instance will fire <code>marker</code> or <code>planar</code> events. The default value is marker.</td> |
|
|
227 |
</tr> |
|
|
228 |
<tr> |
|
|
229 |
<td><code>legend</code></td> |
|
|
230 |
<td><code>Object</code></td> |
|
|
231 |
<td>Provides a legend for a <code>Chart</code>.</td> |
|
|
232 |
</tr> |
|
|
233 |
<tr> |
|
|
234 |
<td><code>seriesCollection</code></td> |
|
|
235 |
<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. |
|
|
236 |
</td> |
|
|
237 |
</tr> |
|
|
238 |
<tr> |
|
|
239 |
<td><code>seriesKeys</code></td> |
|
|
240 |
<td><code>Array</code></td> |
|
|
241 |
<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> |
|
|
242 |
</tr> |
|
|
243 |
<tr> |
|
|
244 |
<td><code>showAreaFill</code></td> |
|
|
245 |
<td><code>Boolean</code></td> |
|
|
246 |
<td>Indicates whether or not an area is filled in a combo chart.</td> |
|
|
247 |
</tr> |
|
|
248 |
<tr> |
|
|
249 |
<td><code>showLines</code></td> |
|
|
250 |
<td><code>Boolean</code></td> |
|
|
251 |
<td>Indicates whether to display lines in a combo chart.</td> |
|
|
252 |
</tr> |
|
|
253 |
<tr> |
|
|
254 |
<td><code>showMarkers</code></td> |
|
|
255 |
<td><code>Boolean</code></td> |
|
|
256 |
<td>Indicates whether to display markers in a combo chart.</td> |
|
|
257 |
</tr> |
|
|
258 |
<tr> |
|
|
259 |
<td><code>stacked</code></td> |
|
|
260 |
<td><code>Boolean</code></td> |
|
|
261 |
<td>Indicates whether or not the chart is stacked.</td> |
|
|
262 |
</tr> |
|
|
263 |
<tr> |
|
|
264 |
<td><code>styles</code></td> |
|
|
265 |
<td><code>Object</code></td> |
|
|
266 |
<td>properties for the chart.</td> |
|
|
267 |
</tr> |
|
|
268 |
<tr> |
|
|
269 |
<td><code>tooltip</code></td> |
|
|
270 |
<td><code>Object</code></td> |
|
|
271 |
<td>Reference to the default tooltip available for the chart.</td> |
|
|
272 |
</tr> |
|
|
273 |
<tr> |
|
|
274 |
<td><code>type</code></td> |
|
|
275 |
<td><code>String</code></td> |
|
|
276 |
<td>Indicates the default series type for the chart. The default value is <code>combo</code></td> |
|
|
277 |
</tr> |
|
|
278 |
<tr> |
|
|
279 |
<td><code>valueAxisName</code></td> |
|
|
280 |
<td><code>String</code></td> |
|
|
281 |
<td>Indicates the key value used to identify the default value axis.</td> |
|
|
282 |
</tr> |
|
|
283 |
<tr> |
|
|
284 |
<td><code>verticalGridlines</code></td> |
|
|
285 |
<td><code>Gridlines</code></td> |
|
|
286 |
<td>Reference to the verticalGridlines for a cartesian chart.</td> |
|
|
287 |
</tr> |
|
|
288 |
</table> |
|
|
289 |
|
|
|
290 |
<h3 id="dataProvider">The <code>dataProvider</code> Attribute</h3> |
|
|
291 |
<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 |
|
|
292 |
in the configuration argument or called explicitly after instantiation.</p> |
|
|
293 |
<pre class="code prettyprint">mychart.render("#mychart");</pre> |
|
|
294 |
|
|
|
295 |
|
|
|
296 |
<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 |
|
|
297 |
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 |
|
|
298 |
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> |
|
|
299 |
<h4 id="multi-dimensional-array">Multi-dimensional Array</h4> |
|
|
300 |
<pre class="code prettyprint">var myDataValues = [ |
|
|
301 |
["5/1/2010", "5/2/2010", "5/3/2010", "5/4/2010", "5/5/2010"], |
|
|
302 |
[2000, 50, 400, 200, 5000] |
|
|
303 |
];</pre> |
|
|
304 |
|
|
|
305 |
<h4 id="object-literal-array">Object Literal Array</h4> |
|
|
306 |
<pre class="code prettyprint">var myDataValues = [ |
|
|
307 |
{category:"5/1/2010", values:2000}, |
|
|
308 |
{category:"5/2/2010", values:50}, |
|
|
309 |
{category:"5/3/2010", values:400}, |
|
|
310 |
{category:"5/4/2010", values:200}, |
|
|
311 |
{category:"5/5/2010", values:5000} |
|
|
312 |
];</pre> |
|
|
313 |
|
|
|
314 |
<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 |
|
|
315 |
<code>dataProvider</code>, it will convert the array to an array of object literals.</p> |
|
|
316 |
|
|
|
317 |
<h3 id="usingtooltip">Using the <code>tooltip</code> Attribute</h3> |
|
|
318 |
<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 |
|
|
319 |
properties:</p> |
|
|
320 |
|
|
|
321 |
<table> |
|
|
322 |
<tr><th>Property</th><th>Type</th><th>Description</th></tr> |
|
|
323 |
<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> |
|
|
324 |
<tr><td><code>markerEventHandler</code></td><td><code>Function</code></td><td>Displays and hides a tooltip based on marker events.</td></tr> |
|
|
325 |
<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: |
|
|
326 |
<dl> |
|
|
327 |
<dt>categoryItem</dt><dd>An object containing the following: |
|
|
328 |
<dl> |
|
|
329 |
<dt>axis</dt><dd>The axis that the category is bound to</dd> |
|
|
330 |
<dt>displayName</dt><dd>The display name set to the category (defaults to key if not provided)</dd> |
|
|
331 |
<dt>key</dt><dd>The key of the category</dd> |
|
|
332 |
<dt>value</dt><dd>The value of the category</dd> |
|
|
333 |
</dl> |
|
|
334 |
</dd> |
|
|
335 |
<dt>valueItem</dt><dd>An object containing the following: |
|
|
336 |
<dl> |
|
|
337 |
<dt>axis</dt><dd>The axis that the item's series is bound to</dd> |
|
|
338 |
<dt>displayName</dt><dd>The display name of the series (defaults to key if not provided)</dd> |
|
|
339 |
<dt>key</dt><dd>The key for the series</dd> |
|
|
340 |
<dt>value</dt><dd>The value for the series item<dd> |
|
|
341 |
</dl> |
|
|
342 |
</dd> |
|
|
343 |
<dt>itemIndex</dt><dd>The index of the item within its series.</dd> |
|
|
344 |
<dt>series</dt><dd>The series that the item belongs to</dd> |
|
|
345 |
<dt>seriesIndex</dt><dd>The index of the series in the seriesCollection</dd> |
|
|
346 |
</dl> |
|
|
347 |
The method returns an <code>HTMLElement</code> which is written into the DOM using <code>appendChild</code>. If you override this method and choose to return an html string, you |
|
|
348 |
will also need to override the tooltip's <code>setTextFunction</code> method to accept an html string. |
|
|
349 |
<p><strong>*NOTE:</strong> Previous to 3.5.0, this method used <code>innerHTML</code>. The functionality was changed to prevent potential security vectors. If you have current implementations |
|
|
350 |
in which your custom <code>markerLabelFunction</code> is dependent on <code>innerHTML</code> to format your text. You will need to either change them to work with <code>appendChild</code> or |
|
|
351 |
update the tooltip's <code>setFunction</code> method to accept an html string. |
|
|
352 |
<pre class="code prettyprint">tooltip: { |
|
|
353 |
setTextFunction: function(textField, val) { |
|
|
354 |
textField.setHTML(val); |
|
|
355 |
} |
|
|
356 |
}</pre> |
|
|
357 |
|
|
|
358 |
If you use such a strategy, please ensure your content is safe.</p> |
|
|
359 |
</td></tr> |
|
|
360 |
<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> |
|
|
361 |
<tr><td><code>planarEventHandler</code></td><td><code>Function</code></td><td>Displays and hides a tooltip based on planar events.</td></tr> |
|
|
362 |
<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: |
|
|
363 |
<dl> |
|
|
364 |
<dt>categoryAxis</dt><dd>Reference to the categoryAxis of the chart.</dd> |
|
|
365 |
<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: |
|
|
366 |
<dl> |
|
|
367 |
<dt>axis</dt><dd>The value axis of the series.</dd> |
|
|
368 |
<dt>key</dt><dd>The key for the series.</dd> |
|
|
369 |
<dt>value</dt><dd>The value for the series item.</dd> |
|
|
370 |
<dt>displayName</dt><dd>The display name of the series. (defaults to key if not provided)</dd> |
|
|
371 |
</dl> |
|
|
372 |
</dd> |
|
|
373 |
<dt><dt>index</dt><dd>The index of the item within its series.</dd> |
|
|
374 |
<dt>seriesArray</dt><dd>Array of series instances for each value item.</dd> |
|
|
375 |
<dt>seriesIndex</dt><dd>The index of the series in the <code>seriesCollection</code>.</dd> |
|
|
376 |
</dl> |
|
|
377 |
The method returns an <code>HTMLElement</code> which is written into the DOM using <code>appendChild</code>. If you override this method and choose to return an html string, you |
|
|
378 |
will also need to override the tooltip's <code>setTextFunction</code> method to accept an html string. |
|
|
379 |
<p><strong>*NOTE:</strong> Previous to 3.5.0, this method used <code>innerHTML</code>. The functionality was changed to prevent potential security vectors. If you have current implementations |
|
|
380 |
in which your custom <code>planarLabelFunction</code> is dependent on <code>innerHTML</code> to format your text. You will need to either change them to work with <code>appendChild</code> or |
|
|
381 |
update the tooltip's <code>setFunction</code> method to accept an html string. |
|
|
382 |
<pre class="code prettyprint">tooltip: { |
|
|
383 |
setTextFunction: function(textField, val) { |
|
|
384 |
textField.setHTML(val); |
|
|
385 |
} |
|
|
386 |
}</pre> |
|
|
387 |
|
|
|
388 |
If you use such a strategy, please ensure your content is safe.</p> |
|
|
389 |
</td></tr> |
|
|
390 |
<tr><td>setTextFunction</td><td><code>Function</code></td><td>Method that writes content returned from <code>planarLabelFunction</code> or <code>markerLabelFunction</code> into the the tooltip node. |
|
|
391 |
has the following signature: |
|
|
392 |
<dl> |
|
|
393 |
<dt>label</dt><dd>The <code>HTMLElement</code> that the content is to be added.</dd> |
|
|
394 |
<dt>val</dt><dd>The content to be rendered into tooltip. This can be a <code>String</code> or <code>HTMLElement</code>. If an HTML string is used, it will be rendered as a string.</dd> |
|
|
395 |
</dl> |
|
|
396 |
</td></tr> |
|
|
397 |
<tr><td><code>show</code></td><td><code>Boolean</code></td><td>Indicates whether to show a tooltip.</td></tr> |
|
|
398 |
<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> |
|
|
399 |
<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> |
|
|
400 |
</table> |
|
|
401 |
|
|
|
402 |
<h3 id="usingstyles">Styling a <code>CartesianChart</code> with the <code>styles</code> Attribute</h3> |
|
|
403 |
<p>The <code>styles</code> attribute can be used to update the properties of different chart components in a <code>CartesianChart</code>. |
|
|
404 |
|
|
|
405 |
<table> |
|
|
406 |
<tr><th>Property</th><th>Type</th><th>Description</th></tr> |
|
|
407 |
<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> |
|
|
408 |
<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> |
|
|
409 |
<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> |
|
|
410 |
</table> |
|
|
411 |
|
|
|
412 |
|
|
|
413 |
<h3 id="usingaxes">Using the <code>axes</code> Attribute</h3> |
|
|
414 |
<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 |
|
|
415 |
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: |
|
|
416 |
</p> |
|
|
417 |
<table> |
|
|
418 |
<tr><th>Property</th><th>Type</th><th>Description</th></tr> |
|
|
419 |
<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> |
|
|
420 |
<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> |
|
|
421 |
<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: |
|
|
422 |
<ul> |
|
|
423 |
<li>prefix</li> |
|
|
424 |
<li>thousandsSeparator</li> |
|
|
425 |
<li>decimalSeparator</li> |
|
|
426 |
<li>decimalPlaces</li> |
|
|
427 |
<li>suffix</li> |
|
|
428 |
</ul></td></tr> |
|
|
429 |
<tr><td><code>labelFunction</code></td><td><code>Function</code></td><td>Function used to format axis labels for display. The return value is added to the <code>Axis</code> with <code>appendChild</code>. |
|
|
430 |
<p><strong>*NOTE:</strong> Previous to 3.5.0, this method used <code>innerHTML</code>. The functionality was changed to prevent potential security vectors. If you have current implementations |
|
|
431 |
in which your custom <code>labelFunction</code> is dependent on <code>innerHTML</code> to format your text. You will need to either change them to work with <code>appendChild</code> or |
|
|
432 |
update the Axis' <code>appendLabelFunction</code> method to accept an html string. |
|
|
433 |
<pre class="code prettyprint">appendLabelFunction: function(textField, val) { |
|
|
434 |
textField.innerHTML = val; |
|
|
435 |
}</pre> |
|
|
436 |
|
|
|
437 |
If you use such a strategy, please ensure your content is safe.</p> |
|
|
438 |
</td></tr> |
|
|
439 |
<tr><td><code>appendLabelFunction</code></td><td><code>Function</code></td><td>Function used to add the output of the <code>labelFunction</code> to the <code>Axis</code> using <code>appendChild</code>. This attribute can be overridden |
|
|
440 |
as needed.</td></tr> |
|
|
441 |
<tr><td><code>title</code></td><td><code>String</code></td><td>Optional attribute that allows for specification of an axis title. The value of this attribute is added to the <code>Axis</code> with <code>appendChild</code>. |
|
|
442 |
<p><strong>*NOTE:</strong> Previous to 3.5.0, this attribute was added to the DOM using <code>innerHTML</code>. The functionality was changed to prevent potential security vectors. If you have current implementations |
|
|
443 |
in which the value of the <code>title</code> attribute is dependent on <code>innerHTML</code> to format your text. You will need to either change the value to an HTMLElement that can be |
|
|
444 |
added with <code>appendChild</code> or update the Axis' <code>appendTitleFunction</code> method to accept an html string. |
|
|
445 |
<pre class="code prettyprint">appendTitleFunction: function(textField, val) { |
|
|
446 |
textField.innerHTML = val; |
|
|
447 |
}</pre> |
|
|
448 |
|
|
|
449 |
If you use such a strategy, please ensure your content is safe.</p> |
|
|
450 |
</td></tr> |
|
|
451 |
<tr><td><code>appendTitleFunction</code></td><td><code>Function</code></td><td>Function used to add the <code>title</code> attribute to the <code>Axis</code> using <code>appendChild</code>. This attribute can be overridden as needed.</td></tr> |
|
|
452 |
<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> |
|
|
453 |
<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> |
|
|
454 |
<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> |
|
|
455 |
<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> |
|
|
456 |
</table> |
|
|
457 |
|
|
|
458 |
<h3 id="referenceseriesandaxis">Referencing Series and Axis Instances</h3> |
|
|
459 |
<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 |
|
|
460 |
<code>getSeries</code> methods. The <code>getAxisByKey</code> method looks up and returns an <code>Axis</code> instance based on its a key reference.</p></h4> |
|
|
461 |
<h4 id="using-getaxisbykey">Using <code>getAxisByKey</code></h4> |
|
|
462 |
<pre class="code prettyprint">var leftAxis = mychart.getAxisByKey("values"); |
|
|
463 |
leftAxis.set("styles", {label:{rotation:-45}});</pre> |
|
|
464 |
|
|
|
465 |
|
|
|
466 |
<p>The <code>getSeries</code> method will accept either an index or a key reference and return a series.</p> |
|
|
467 |
<h4 id="using-getseries-with-a-key-">Using <code>getSeries</code> with a Key </h4> |
|
|
468 |
<pre class="code prettyprint">var mySeries = mychart.getSeries("category"); |
|
|
469 |
mySeries.set("visible", false);</pre> |
|
|
470 |
|
|
|
471 |
|
|
|
472 |
<h4 id="using-getseries-with-an-index-">Using <code>getSeries</code> with an Index </h4> |
|
|
473 |
<pre class="code prettyprint">var mySeries = mychart.getSeries(0); |
|
|
474 |
mySeries.set("visible", false);</pre> |
|
|
475 |
|
|
|
476 |
|
|
|
477 |
<h3 id="usinglegend">Using the <code>legend</code> Attribute</h3> |
|
|
478 |
<p>The <code>legend</code> attribute allows you to define a legend for your <code>Chart</code> instance. The <code>legend</code> is an object containing the attributes necessary for defining and |
|
|
479 |
styling the legend. You must include the 'charts-legend' module if you want have legends in your chart.</p> |
|
|
480 |
<pre class="code prettyprint">YUI().use('charts-legend', function (Y) { |
|
|
481 |
// Charts is available and ready for use. Add implementation |
|
|
482 |
// code here. |
|
|
483 |
});</pre> |
|
|
484 |
|
|
|
485 |
|
|
|
486 |
<p>To see how to create a chart with a legend, check out the <a href="charts-legend.html">example</a>. Below is a list of the available attributes.</p> |
|
|
487 |
<table> |
|
|
488 |
<tr><th>Property</th><th>Type</th><th>Description</th></tr> |
|
|
489 |
<tr><td>chart</td><td><code>Chart</code></td><td>Reference to the <code>Chart</code> instance.</td></tr> |
|
|
490 |
<tr><td>direction</td><td><code>String</code></td><td>Indicates the direction in relation of the legend's layout. The <code>direction</code> of the legend is determined by its <code>position</code> value.</td></tr> |
|
|
491 |
<tr><td>position</td><td><code>String</code></td><td>Indicates the position and direction of the legend. Possible values are <code>left</code>, <code>top</code>, <code>right</code> and <code>bottom</code>. Values of <code>left</code> and |
|
|
492 |
<code>right</code> values have a <code>direction</code> of <code>vertical</code>. Values of <code>top</code> and <code>bottom</code> values have a <code>direction</code> of <code>horizontal</code>.</td></tr> |
|
|
493 |
<tr><td>width</td><td><code>Number</code></td><td>The width of the legend. Depending on the implementation of the ChartLegend, this value is <code>readOnly</code>. By default, the legend is included |
|
|
494 |
in the layout of the <code>Chart</code> that it references. Under this circumstance, <code>width</code> is always <code>readOnly</code>. When the legend is rendered in its own dom element, the |
|
|
495 |
<code>readOnly</code> status is determined by the direction of the legend. If the <code>position</code> is <code>left</code> or <code>right</code> or the <code>direction</code> is <code>vertical</code>, width is <code>readOnly</code>. |
|
|
496 |
If the position is <code>top</code> or <code>bottom</code> or the <code>direction</code> is <code>horizontal</code>, width can be explicitly set. If width is not explicitly set, the width will be determined |
|
|
497 |
by the width of the legend's parent element.</td></tr> |
|
|
498 |
<tr><td>height</td><td><code>Number</code></td><td>The height of the legend. Depending on the implementation of the ChartLegend, this value is <code>readOnly</code>. By default, the legend is included |
|
|
499 |
in the layout of the <code>Chart</code> that it references. Under this circumstance, <code>height</code> is always <code>readOnly</code>. When the legend is rendered in its own dom element, the |
|
|
500 |
<code>readOnly</code> status is determined by the direction of the legend. If the <code>position</code> is <code>top</code> or <code>bottom</code> or the <code>direction</code> is <code>horizontal</code>, height is <code>readOnly</code>. |
|
|
501 |
If the position is <code>left</code> or <code>right</code> or the <code>direction</code> is <code>vertical</code>, height can be explicitly set. If height is not explicitly set, the height will be determined |
|
|
502 |
by the width of the legend's parent element.</td></tr> |
|
|
503 |
<tr><td>x</td><td><code>Number</code></td><td>Indicates the x position of legend.</td></tr> |
|
|
504 |
<tr><td>y</td><td><code>Number</code></td><td>Indicates the y position of legend.</td></tr> |
|
|
505 |
<tr><td>styles</td><td><code>Object</code></td><td> |
|
|
506 |
Properties used to display and style the ChartLegend. This attribute is inherited from <code>Renderer</code>. Below are the default values: |
|
|
507 |
<dl> |
|
|
508 |
<dt>gap</dt><dd>Distance, in pixels, between the <code>ChartLegend</code> instance and the chart's content. When <code>ChartLegend</code> is rendered within a <code>Chart</code> instance this value is applied.</dd> |
|
|
509 |
<dt>hAlign</dt><dd>Defines the horizontal alignment of the <code>items</code> in a <code>ChartLegend</code> rendered in a horizontal direction. This value is applied when the instance's <code>position</code> is set to top or bottom. This attribute can be set to left, center or right. The default value is center.</dd> |
|
|
510 |
<dt>vAlign</dt><dd>Defines the vertical alignment of the <code>items</code> in a <code>ChartLegend</code> rendered in vertical direction. This value is applied when the instance's <code>position</code> is set to left or right. The attribute can be set to top, middle or bottom. The default value is middle.</dd> |
|
|
511 |
<dt>item</dt><dd>Set of style properties applied to the <code>items</code> of the <code>ChartLegend</code>. |
|
|
512 |
<dl> |
|
|
513 |
<dt>hSpacing</dt><dd>Horizontal distance, in pixels, between legend <code>items</code>.</dd> |
|
|
514 |
<dt>vSpacing</dt><dd>Vertical distance, in pixels, between legend <code>items</code>.</dd> |
|
|
515 |
<dt>label</dt><dd>Properties for the text of an <code>item</code>. |
|
|
516 |
<dl> |
|
|
517 |
<dt>color</dt><dd>Color of the text. The default values is "#808080".</dd> |
|
|
518 |
<dt>fontSize</dt><dd>Font size for the text. The default value is "85%".</dd> |
|
|
519 |
</dl> |
|
|
520 |
</dd> |
|
|
521 |
<dt>marker</dt><dd>Properties for the <code>item</code> markers. |
|
|
522 |
<dl> |
|
|
523 |
<dt>width</dt><dd>Specifies the width of the markers.</dd> |
|
|
524 |
<dt>height</dt><dd>Specifies the height of the markers.</dd> |
|
|
525 |
</dl> |
|
|
526 |
</dd> |
|
|
527 |
</dl> |
|
|
528 |
</dd> |
|
|
529 |
<dt>styles</dt><dd>Properties for the <code>ChartLegend</code> background. |
|
|
530 |
<dl> |
|
|
531 |
<dt>fill</dt><dd>Properties for the background fill. |
|
|
532 |
<dl> |
|
|
533 |
<dt>color</dt><dd>Color for the fill. The default value is "#faf9f2".</dd> |
|
|
534 |
</dl> |
|
|
535 |
</dd> |
|
|
536 |
<dt>stroke</dt><dd>Properties for the background stroke. |
|
|
537 |
<dl> |
|
|
538 |
<dt>color</dt><dd>Color for the stroke. The default value is "#dad8c9".</dd> |
|
|
539 |
<dt>weight</dt><dd>Weight of the stroke. The default values is 1.</dd> |
|
|
540 |
</dl> |
|
|
541 |
</dd> |
|
|
542 |
</dl> |
|
|
543 |
</dd> |
|
|
544 |
</dl> |
|
|
545 |
</td></tr> |
|
|
546 |
</table> |
|
|
547 |
|
|
|
548 |
</h3> |
|
|
549 |
<h2 id="issues">Known Issues</h2> |
|
|
550 |
<ul class="spaced"> |
|
|
551 |
<li> |
|
|
552 |
<p> |
|
|
553 |
Custom formatting for tooltip's and axis title and labels has been updated for 3.5.0 and higher to prevent potential security vectors. This may cause backward |
|
|
554 |
compatibility issues when upgrading from 3.4.x and below under the following circumstances: |
|
|
555 |
<ul> |
|
|
556 |
<li>If you have written a custom <code>labelFunction</code> for your axis that is dependent upon <code>innerHTML</code> for formatting, the current implementation will need |
|
|
557 |
to be changed so that it will work with <code>appendChild</code>. Alternatively, there is a newly created <code>appendLabelFunction</code> attribute that can be overridden |
|
|
558 |
to use <code>innerHTML</code>. More information can be found under the labelFunction section <a href="#usingaxes">here</a>.</li> |
|
|
559 |
<li>If you are dependent on <code>innerHTML</code> to format the value of an Axis <code>title</code>, you will need to pass in an HTMLElement that can be added using <code>appendChild</code>. |
|
|
560 |
Alternatively, there is a newly created <code>appendTitleFunction</code> attribute that can be overridden to use <code>innerHTML</code>. More information can be found under |
|
|
561 |
the title section <a href="#usingaxes">here</a>.</li> |
|
|
562 |
<li>If you are using the <code>tooltip</code> attribute's <code>markerLabelFunction</code> or <code>planarLabelFunction</code> to add custom formatting to a chart's tooltip. You will need |
|
|
563 |
to update it so that is not dependent on <code>innerHTML</code>. The <a href="charts-customizedtooltip.html">Customize a Chart's Tooltip</a> example has been |
|
|
564 |
updated to demonstrate the correct way to construct a custom tooltip function. Alternatively, there is a newly created <code>setTextFunction</code> property of the |
|
|
565 |
<code>tooltip</code> attribute that can be overridden to use <code>innerHTML</code>. More information can be found under the markerLabelFunction and planarLabelFunction sections |
|
|
566 |
<a href="#usingtooltip">here</a>. |
|
|
567 |
</ul> |
|
|
568 |
</p> |
|
|
569 |
</li> |
|
|
570 |
<li> |
|
|
571 |
<p> |
|
|
572 |
Charts load slowly in android devices. Performance optimizations will need to be added in a future release. |
|
|
573 |
</p> |
|
|
574 |
</li> |
|
|
575 |
<li> |
|
|
576 |
<p> |
|
|
577 |
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. |
|
|
578 |
</p> |
|
|
579 |
</li> |
|
|
580 |
<li> |
|
|
581 |
<p> |
|
|
582 |
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 |
|
|
583 |
the appropriate default events for touch devices. See the <a href="#usingtooltip"> Using the <code>tooltip</code> Attribute</a> section to |
|
|
584 |
see how to customize mouse events for the chart. |
|
|
585 |
</p> |
|
|
586 |
</li> |
|
|
587 |
</ul> |
|
|
588 |
</div> |
|
|
589 |
</div> |
|
|
590 |
</div> |
|
|
591 |
|
|
|
592 |
<div class="yui3-u-1-4"> |
|
|
593 |
<div class="sidebar"> |
|
|
594 |
|
|
|
595 |
<div id="toc" class="sidebox"> |
|
|
596 |
<div class="hd"> |
|
|
597 |
<h2 class="no-toc">Table of Contents</h2> |
|
|
598 |
</div> |
|
|
599 |
|
|
|
600 |
<div class="bd"> |
|
|
601 |
<ul class="toc"> |
|
|
602 |
<li> |
|
|
603 |
<a href="#getting-started">Getting Started</a> |
|
|
604 |
</li> |
|
|
605 |
<li> |
|
|
606 |
<a href="#using">Using the charts widget</a> |
|
|
607 |
<ul class="toc"> |
|
|
608 |
<li> |
|
|
609 |
<a href="#instantiating">Instantiating A Chart</a> |
|
|
610 |
<ul class="toc"> |
|
|
611 |
<li> |
|
|
612 |
<a href="#css">CSS</a> |
|
|
613 |
</li> |
|
|
614 |
<li> |
|
|
615 |
<a href="#html">HTML</a> |
|
|
616 |
</li> |
|
|
617 |
<li> |
|
|
618 |
<a href="#javascript">JavaScript</a> |
|
|
619 |
</li> |
|
|
620 |
</ul> |
|
|
621 |
</li> |
|
|
622 |
<li> |
|
|
623 |
<a href="#chartapplication">Chart Application</a> |
|
|
624 |
</li> |
|
|
625 |
<li> |
|
|
626 |
<a href="#attributes">Attributes</a> |
|
|
627 |
</li> |
|
|
628 |
<li> |
|
|
629 |
<a href="#dataProvider">The <code>dataProvider</code> Attribute</a> |
|
|
630 |
<ul class="toc"> |
|
|
631 |
<li> |
|
|
632 |
<a href="#multi-dimensional-array">Multi-dimensional Array</a> |
|
|
633 |
</li> |
|
|
634 |
<li> |
|
|
635 |
<a href="#object-literal-array">Object Literal Array</a> |
|
|
636 |
</li> |
|
|
637 |
</ul> |
|
|
638 |
</li> |
|
|
639 |
<li> |
|
|
640 |
<a href="#usingtooltip">Using the <code>tooltip</code> Attribute</a> |
|
|
641 |
</li> |
|
|
642 |
<li> |
|
|
643 |
<a href="#usingstyles">Styling a <code>CartesianChart</code> with the <code>styles</code> Attribute</a> |
|
|
644 |
</li> |
|
|
645 |
<li> |
|
|
646 |
<a href="#usingaxes">Using the <code>axes</code> Attribute</a> |
|
|
647 |
</li> |
|
|
648 |
<li> |
|
|
649 |
<a href="#referenceseriesandaxis">Referencing Series and Axis Instances</a> |
|
|
650 |
<ul class="toc"> |
|
|
651 |
<li> |
|
|
652 |
<a href="#using-getaxisbykey">Using <code>getAxisByKey</code></a> |
|
|
653 |
</li> |
|
|
654 |
<li> |
|
|
655 |
<a href="#using-getseries-with-a-key-">Using <code>getSeries</code> with a Key </a> |
|
|
656 |
</li> |
|
|
657 |
<li> |
|
|
658 |
<a href="#using-getseries-with-an-index-">Using <code>getSeries</code> with an Index </a> |
|
|
659 |
</li> |
|
|
660 |
</ul> |
|
|
661 |
</li> |
|
|
662 |
<li> |
|
|
663 |
<a href="#usinglegend">Using the <code>legend</code> Attribute</a> |
|
|
664 |
</li> |
|
|
665 |
</ul> |
|
|
666 |
</li> |
|
|
667 |
<li> |
|
|
668 |
<a href="#issues">Known Issues</a> |
|
|
669 |
</li> |
|
|
670 |
</ul> |
|
|
671 |
</div> |
|
|
672 |
</div> |
|
|
673 |
|
|
|
674 |
|
|
|
675 |
|
|
|
676 |
<div class="sidebox"> |
|
|
677 |
<div class="hd"> |
|
|
678 |
<h2 class="no-toc">Examples</h2> |
|
|
679 |
</div> |
|
|
680 |
|
|
|
681 |
<div class="bd"> |
|
|
682 |
<ul class="examples"> |
|
|
683 |
|
|
|
684 |
|
|
|
685 |
<li data-description="Shows how to use Charts to create a basic chart."> |
|
|
686 |
<a href="charts-simple.html">Basic Charts Implementation</a> |
|
|
687 |
</li> |
|
|
688 |
|
|
|
689 |
|
|
|
690 |
|
|
|
691 |
<li data-description="Shows how to create a chart with multiple series."> |
|
|
692 |
<a href="charts-multiseries.html">Chart with Multiple Series</a> |
|
|
693 |
</li> |
|
|
694 |
|
|
|
695 |
|
|
|
696 |
|
|
|
697 |
<li data-description="Shows how to create a column chart with multiple series."> |
|
|
698 |
<a href="charts-column.html">Specify Chart Type</a> |
|
|
699 |
</li> |
|
|
700 |
|
|
|
701 |
|
|
|
702 |
|
|
|
703 |
<li data-description="Shows how to create a column chart with a stacked numeric axis."> |
|
|
704 |
<a href="charts-stackedcolumn.html">Create Stacked Chart</a> |
|
|
705 |
</li> |
|
|
706 |
|
|
|
707 |
|
|
|
708 |
|
|
|
709 |
<li data-description="Shows how to create a chart with a time axis."> |
|
|
710 |
<a href="charts-timeaxis.html">Create a Chart with a Time Axis</a> |
|
|
711 |
</li> |
|
|
712 |
|
|
|
713 |
|
|
|
714 |
|
|
|
715 |
<li data-description="Shows how to add gridlines to a chart."> |
|
|
716 |
<a href="charts-gridlines.html">Add Gridlines to a Chart</a> |
|
|
717 |
</li> |
|
|
718 |
|
|
|
719 |
|
|
|
720 |
|
|
|
721 |
<li data-description="Shows how to create a chart with planar based events."> |
|
|
722 |
<a href="charts-stackedarea.html">Create a Stacked Area Chart with Planar Based Events</a> |
|
|
723 |
</li> |
|
|
724 |
|
|
|
725 |
|
|
|
726 |
|
|
|
727 |
<li data-description="Shows how to use a chart's styles attribute to customize a chart."> |
|
|
728 |
<a href="charts-globalstyles.html">Customize a Chart</a> |
|
|
729 |
</li> |
|
|
730 |
|
|
|
731 |
|
|
|
732 |
|
|
|
733 |
<li data-description="Shows how to customize the default tooltip of a chart."> |
|
|
734 |
<a href="charts-customizedtooltip.html">Customize a Chart's Tooltip</a> |
|
|
735 |
</li> |
|
|
736 |
|
|
|
737 |
|
|
|
738 |
|
|
|
739 |
<li data-description="Shows how to explicitly define the axes and series for a chart."> |
|
|
740 |
<a href="charts-objectstyles.html">Define a Chart's Axes and Series</a> |
|
|
741 |
</li> |
|
|
742 |
|
|
|
743 |
|
|
|
744 |
|
|
|
745 |
<li data-description="Shows how to use charts to create a pie chart."> |
|
|
746 |
<a href="charts-pie.html">Pie Chart</a> |
|
|
747 |
</li> |
|
|
748 |
|
|
|
749 |
|
|
|
750 |
|
|
|
751 |
<li data-description="Shows how to create a chart with multiple value axes."> |
|
|
752 |
<a href="charts-dualaxes.html">Dual Axes Chart</a> |
|
|
753 |
</li> |
|
|
754 |
|
|
|
755 |
|
|
|
756 |
|
|
|
757 |
<li data-description="Shows how to access a chart instance's value axis after the chart has rendered."> |
|
|
758 |
<a href="charts-axisupdate.html">Update Chart Axis</a> |
|
|
759 |
</li> |
|
|
760 |
|
|
|
761 |
|
|
|
762 |
|
|
|
763 |
<li data-description="Shows how to access a chart instance's seriesCollection after the chart has rendered."> |
|
|
764 |
<a href="charts-seriesupdate.html">Update Chart Series</a> |
|
|
765 |
</li> |
|
|
766 |
|
|
|
767 |
|
|
|
768 |
|
|
|
769 |
<li data-description="Shows how to add a legend to a chart."> |
|
|
770 |
<a href="charts-legend.html">Create Chart with a Legend</a> |
|
|
771 |
</li> |
|
|
772 |
|
|
|
773 |
|
|
|
774 |
|
|
|
775 |
<li data-description="Shows how to render multiple data points in a singe marker."> |
|
|
776 |
<a href="charts-groupmarkers.html">Group Marker Chart</a> |
|
|
777 |
</li> |
|
|
778 |
|
|
|
779 |
|
|
|
780 |
</ul> |
|
|
781 |
</div> |
|
|
782 |
</div> |
|
|
783 |
|
|
|
784 |
|
|
|
785 |
|
|
|
786 |
</div> |
|
|
787 |
</div> |
|
|
788 |
</div> |
|
|
789 |
</div> |
|
|
790 |
|
|
|
791 |
<script src="../assets/vendor/prettify/prettify-min.js"></script> |
|
|
792 |
<script>prettyPrint();</script> |
|
|
793 |
|
|
|
794 |
<script> |
|
|
795 |
YUI.Env.Tests = { |
|
|
796 |
examples: [], |
|
|
797 |
project: '../assets', |
|
|
798 |
assets: '../assets/charts', |
|
|
799 |
name: 'charts', |
|
|
800 |
title: 'Charts', |
|
|
801 |
newWindow: '', |
|
|
802 |
auto: false |
|
|
803 |
}; |
|
|
804 |
YUI.Env.Tests.examples.push('charts-simple'); |
|
|
805 |
YUI.Env.Tests.examples.push('charts-multiseries'); |
|
|
806 |
YUI.Env.Tests.examples.push('charts-column'); |
|
|
807 |
YUI.Env.Tests.examples.push('charts-stackedcolumn'); |
|
|
808 |
YUI.Env.Tests.examples.push('charts-timeaxis'); |
|
|
809 |
YUI.Env.Tests.examples.push('charts-gridlines'); |
|
|
810 |
YUI.Env.Tests.examples.push('charts-stackedarea'); |
|
|
811 |
YUI.Env.Tests.examples.push('charts-globalstyles'); |
|
|
812 |
YUI.Env.Tests.examples.push('charts-customizedtooltip'); |
|
|
813 |
YUI.Env.Tests.examples.push('charts-objectstyles'); |
|
|
814 |
YUI.Env.Tests.examples.push('charts-pie'); |
|
|
815 |
YUI.Env.Tests.examples.push('charts-dualaxes'); |
|
|
816 |
YUI.Env.Tests.examples.push('charts-axisupdate'); |
|
|
817 |
YUI.Env.Tests.examples.push('charts-seriesupdate'); |
|
|
818 |
YUI.Env.Tests.examples.push('charts-legend'); |
|
|
819 |
YUI.Env.Tests.examples.push('charts-groupmarkers'); |
|
|
820 |
|
|
|
821 |
</script> |
|
|
822 |
<script src="../assets/yui/test-runner.js"></script> |
|
|
823 |
|
|
|
824 |
|
|
|
825 |
|
|
|
826 |
</body> |
|
|
827 |
</html> |