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