|
525
|
1 |
<!DOCTYPE html> |
|
|
2 |
<html lang="en"> |
|
|
3 |
<head> |
|
|
4 |
<meta charset="utf-8"> |
|
|
5 |
<title>Example: Customize a Chart</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: Customize a Chart</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 use a <code>Chart</code>'s <code>styles</code> attribute to customize 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 |
var myDataValues = [ |
|
|
46 |
{date:"5/1/2010", international:2000, expenses:3700, domestic:2200}, |
|
|
47 |
{date:"5/2/2010", international:50, expenses:9100, domestic:100}, |
|
|
48 |
{date:"5/3/2010", international:400, expenses:1100, domestic:1500}, |
|
|
49 |
{date:"5/4/2010", international:200, expenses:1900, domestic:2800}, |
|
|
50 |
{date:"5/5/2010", international:5000, expenses:5000, domestic:2650} |
|
|
51 |
]; |
|
|
52 |
var styleDef = { |
|
|
53 |
axes:{ |
|
|
54 |
values:{ |
|
|
55 |
label:{ |
|
|
56 |
rotation:-45, |
|
|
57 |
color:"#ff0000" |
|
|
58 |
} |
|
|
59 |
}, |
|
|
60 |
date:{ |
|
|
61 |
label:{ |
|
|
62 |
rotation:-45, |
|
|
63 |
color: "#ff0000" |
|
|
64 |
} |
|
|
65 |
} |
|
|
66 |
}, |
|
|
67 |
series:{ |
|
|
68 |
international:{ |
|
|
69 |
marker:{ |
|
|
70 |
fill:{ |
|
|
71 |
color:"#ff8888" |
|
|
72 |
}, |
|
|
73 |
border:{ |
|
|
74 |
color:"#ff0000" |
|
|
75 |
}, |
|
|
76 |
over:{ |
|
|
77 |
fill:{ |
|
|
78 |
color:"#ffffff" |
|
|
79 |
}, |
|
|
80 |
border:{ |
|
|
81 |
color:"#fe0000" |
|
|
82 |
}, |
|
|
83 |
width: 12, |
|
|
84 |
height: 12 |
|
|
85 |
} |
|
|
86 |
}, |
|
|
87 |
line:{ |
|
|
88 |
color:"#ff0000" |
|
|
89 |
} |
|
|
90 |
}, |
|
|
91 |
expenses:{ |
|
|
92 |
line:{ |
|
|
93 |
color:"#999" |
|
|
94 |
}, |
|
|
95 |
marker: |
|
|
96 |
{ |
|
|
97 |
fill:{ |
|
|
98 |
color:"#ddd" |
|
|
99 |
}, |
|
|
100 |
border:{ |
|
|
101 |
color:"#999" |
|
|
102 |
}, |
|
|
103 |
over: { |
|
|
104 |
fill: { |
|
|
105 |
color: "#eee" |
|
|
106 |
}, |
|
|
107 |
border: { |
|
|
108 |
color: "#000" |
|
|
109 |
}, |
|
|
110 |
width: 12, |
|
|
111 |
height: 12 |
|
|
112 |
} |
|
|
113 |
} |
|
|
114 |
}, |
|
|
115 |
domestic: { |
|
|
116 |
marker: { |
|
|
117 |
over: { |
|
|
118 |
fill: { |
|
|
119 |
color: "#eee" |
|
|
120 |
}, |
|
|
121 |
width: 12, |
|
|
122 |
height: 12 |
|
|
123 |
} |
|
|
124 |
} |
|
|
125 |
} |
|
|
126 |
} |
|
|
127 |
}; |
|
|
128 |
|
|
|
129 |
var mychart = new Y.Chart({ |
|
|
130 |
dataProvider:myDataValues, |
|
|
131 |
interactionType:"planar", |
|
|
132 |
categoryKey:"date", |
|
|
133 |
styles:styleDef, |
|
|
134 |
horizontalGridlines:true, |
|
|
135 |
verticalGridlines:true, |
|
|
136 |
render:"#mychart" |
|
|
137 |
}); |
|
|
138 |
|
|
|
139 |
}); |
|
|
140 |
})(); |
|
|
141 |
</script> |
|
|
142 |
|
|
|
143 |
</div> |
|
|
144 |
<h3>Customizing a <code>Chart</code> with the <code>styles</code> attribute.</h3> |
|
|
145 |
|
|
|
146 |
<p>Many properties of the chart and its components can be customized through the <code>Chart</code>'s <code>styles</code> attribute. The <code>styles</code> attribute is an object literal containing |
|
|
147 |
references to different components of a chart. These references each containing object literals specifying different properties for each component. The <code>styles</code> attribute breaks up |
|
|
148 |
as follows.</p> |
|
|
149 |
|
|
|
150 |
<ul> |
|
|
151 |
<li>graph: a key based object referencing the customizable properties of the <code>Chart</code> instance's <code>Graph</code>.</li> |
|
|
152 |
<li>axes: a key based object containing references to the customizable properties of each axis in the <code>Chart</code>. By default, the primary category axis key is "category" and the primary value |
|
|
153 |
axis key is "values".</li> |
|
|
154 |
<li>series: a key based object container references to the customizable properties of each series in the <code>Chart</code>. |
|
|
155 |
</ul> |
|
|
156 |
|
|
|
157 |
<p>In this example, we'll style the axis labels and the series colors. For both axes, we will change the colors and rotation. For two of the series, we will change their line and marker colors. |
|
|
158 |
For all of the series, we will change over properties of the markers to create a mouseover effect.</p> |
|
|
159 |
|
|
|
160 |
<h4>CSS</h4> |
|
|
161 |
<pre class="code prettyprint">#mychart { |
|
|
162 |
margin:10px 10px 10px 10px; |
|
|
163 |
width:90%; |
|
|
164 |
max-width: 800px; |
|
|
165 |
height:400px; |
|
|
166 |
}</pre> |
|
|
167 |
|
|
|
168 |
|
|
|
169 |
<h4>HTML</h4> |
|
|
170 |
<pre class="code prettyprint"><div id="mychart"></div></pre> |
|
|
171 |
|
|
|
172 |
|
|
|
173 |
<h4>JavaScript</h4> |
|
|
174 |
<pre class="code prettyprint">YUI().use('charts', function (Y) |
|
|
175 |
{ |
|
|
176 |
var styleDef = { |
|
|
177 |
axes:{ |
|
|
178 |
values:{ |
|
|
179 |
label:{ |
|
|
180 |
rotation:-45, |
|
|
181 |
color:"#ff0000" |
|
|
182 |
} |
|
|
183 |
}, |
|
|
184 |
date:{ |
|
|
185 |
label:{ |
|
|
186 |
rotation:-45, |
|
|
187 |
color: "#ff0000" |
|
|
188 |
} |
|
|
189 |
} |
|
|
190 |
}, |
|
|
191 |
series:{ |
|
|
192 |
international:{ |
|
|
193 |
marker:{ |
|
|
194 |
fill:{ |
|
|
195 |
color:"#ff8888" |
|
|
196 |
}, |
|
|
197 |
border:{ |
|
|
198 |
color:"#ff0000" |
|
|
199 |
}, |
|
|
200 |
over:{ |
|
|
201 |
fill:{ |
|
|
202 |
color:"#ffffff" |
|
|
203 |
}, |
|
|
204 |
border:{ |
|
|
205 |
color:"#fe0000" |
|
|
206 |
}, |
|
|
207 |
width: 12, |
|
|
208 |
height: 12 |
|
|
209 |
} |
|
|
210 |
}, |
|
|
211 |
line:{ |
|
|
212 |
color:"#ff0000" |
|
|
213 |
} |
|
|
214 |
}, |
|
|
215 |
expenses:{ |
|
|
216 |
line:{ |
|
|
217 |
color:"#999" |
|
|
218 |
}, |
|
|
219 |
marker: |
|
|
220 |
{ |
|
|
221 |
fill:{ |
|
|
222 |
color:"#ddd" |
|
|
223 |
}, |
|
|
224 |
border:{ |
|
|
225 |
color:"#999" |
|
|
226 |
}, |
|
|
227 |
over: { |
|
|
228 |
fill: { |
|
|
229 |
color: "#eee" |
|
|
230 |
}, |
|
|
231 |
border: { |
|
|
232 |
color: "#000" |
|
|
233 |
}, |
|
|
234 |
width: 12, |
|
|
235 |
height: 12 |
|
|
236 |
} |
|
|
237 |
} |
|
|
238 |
}, |
|
|
239 |
domestic: { |
|
|
240 |
marker: { |
|
|
241 |
over: { |
|
|
242 |
fill: { |
|
|
243 |
color: "#eee" |
|
|
244 |
}, |
|
|
245 |
width: 12, |
|
|
246 |
height: 12 |
|
|
247 |
} |
|
|
248 |
} |
|
|
249 |
} |
|
|
250 |
} |
|
|
251 |
}; |
|
|
252 |
var mychart = new Y.Chart({ |
|
|
253 |
dataProvider:myDataValues, |
|
|
254 |
interactionType:"planar", |
|
|
255 |
categoryKey:"date", |
|
|
256 |
styles:styleDef, |
|
|
257 |
horizontalGridlines:true, |
|
|
258 |
verticalGridlines:true, |
|
|
259 |
render:"#mychart" |
|
|
260 |
}); |
|
|
261 |
});</pre> |
|
|
262 |
|
|
|
263 |
</div> |
|
|
264 |
</div> |
|
|
265 |
</div> |
|
|
266 |
|
|
|
267 |
<div class="yui3-u-1-4"> |
|
|
268 |
<div class="sidebar"> |
|
|
269 |
|
|
|
270 |
|
|
|
271 |
|
|
|
272 |
<div class="sidebox"> |
|
|
273 |
<div class="hd"> |
|
|
274 |
<h2 class="no-toc">Examples</h2> |
|
|
275 |
</div> |
|
|
276 |
|
|
|
277 |
<div class="bd"> |
|
|
278 |
<ul class="examples"> |
|
|
279 |
|
|
|
280 |
|
|
|
281 |
<li data-description="Shows how to use Charts to create a basic chart."> |
|
|
282 |
<a href="charts-simple.html">Basic Charts Implementation</a> |
|
|
283 |
</li> |
|
|
284 |
|
|
|
285 |
|
|
|
286 |
|
|
|
287 |
<li data-description="Shows how to create a chart with multiple series."> |
|
|
288 |
<a href="charts-multiseries.html">Chart with Multiple Series</a> |
|
|
289 |
</li> |
|
|
290 |
|
|
|
291 |
|
|
|
292 |
|
|
|
293 |
<li data-description="Shows how to create a column chart with multiple series."> |
|
|
294 |
<a href="charts-column.html">Specify Chart Type</a> |
|
|
295 |
</li> |
|
|
296 |
|
|
|
297 |
|
|
|
298 |
|
|
|
299 |
<li data-description="Shows how to create a column chart with a stacked numeric axis."> |
|
|
300 |
<a href="charts-stackedcolumn.html">Create Stacked Chart</a> |
|
|
301 |
</li> |
|
|
302 |
|
|
|
303 |
|
|
|
304 |
|
|
|
305 |
<li data-description="Shows how to create a chart with a time axis."> |
|
|
306 |
<a href="charts-timeaxis.html">Create a Chart with a Time Axis</a> |
|
|
307 |
</li> |
|
|
308 |
|
|
|
309 |
|
|
|
310 |
|
|
|
311 |
<li data-description="Shows how to add gridlines to a chart."> |
|
|
312 |
<a href="charts-gridlines.html">Add Gridlines to a Chart</a> |
|
|
313 |
</li> |
|
|
314 |
|
|
|
315 |
|
|
|
316 |
|
|
|
317 |
<li data-description="Shows how to create a chart with planar based events."> |
|
|
318 |
<a href="charts-stackedarea.html">Create a Stacked Area Chart with Planar Based Events</a> |
|
|
319 |
</li> |
|
|
320 |
|
|
|
321 |
|
|
|
322 |
|
|
|
323 |
<li data-description="Shows how to use a chart's styles attribute to customize a chart."> |
|
|
324 |
<a href="charts-globalstyles.html">Customize a Chart</a> |
|
|
325 |
</li> |
|
|
326 |
|
|
|
327 |
|
|
|
328 |
|
|
|
329 |
<li data-description="Shows how to customize the default tooltip of a chart."> |
|
|
330 |
<a href="charts-customizedtooltip.html">Customize a Chart's Tooltip</a> |
|
|
331 |
</li> |
|
|
332 |
|
|
|
333 |
|
|
|
334 |
|
|
|
335 |
<li data-description="Shows how to explicitly define the axes and series for a chart."> |
|
|
336 |
<a href="charts-objectstyles.html">Define a Chart's Axes and Series</a> |
|
|
337 |
</li> |
|
|
338 |
|
|
|
339 |
|
|
|
340 |
|
|
|
341 |
<li data-description="Shows how to use charts to create a pie chart."> |
|
|
342 |
<a href="charts-pie.html">Pie Chart</a> |
|
|
343 |
</li> |
|
|
344 |
|
|
|
345 |
|
|
|
346 |
|
|
|
347 |
<li data-description="Shows how to create a chart with multiple value axes."> |
|
|
348 |
<a href="charts-dualaxes.html">Dual Axes Chart</a> |
|
|
349 |
</li> |
|
|
350 |
|
|
|
351 |
|
|
|
352 |
|
|
|
353 |
<li data-description="Shows how to access a chart instance's value axis after the chart has rendered."> |
|
|
354 |
<a href="charts-axisupdate.html">Update Chart Axis</a> |
|
|
355 |
</li> |
|
|
356 |
|
|
|
357 |
|
|
|
358 |
|
|
|
359 |
<li data-description="Shows how to access a chart instance's seriesCollection after the chart has rendered."> |
|
|
360 |
<a href="charts-seriesupdate.html">Update Chart Series</a> |
|
|
361 |
</li> |
|
|
362 |
|
|
|
363 |
|
|
|
364 |
|
|
|
365 |
<li data-description="Shows how to add a legend to a chart."> |
|
|
366 |
<a href="charts-legend.html">Create Chart with a Legend</a> |
|
|
367 |
</li> |
|
|
368 |
|
|
|
369 |
|
|
|
370 |
|
|
|
371 |
<li data-description="Shows how to render multiple data points in a singe marker."> |
|
|
372 |
<a href="charts-groupmarkers.html">Group Marker Chart</a> |
|
|
373 |
</li> |
|
|
374 |
|
|
|
375 |
|
|
|
376 |
</ul> |
|
|
377 |
</div> |
|
|
378 |
</div> |
|
|
379 |
|
|
|
380 |
|
|
|
381 |
|
|
|
382 |
</div> |
|
|
383 |
</div> |
|
|
384 |
</div> |
|
|
385 |
</div> |
|
|
386 |
|
|
|
387 |
<script src="../assets/vendor/prettify/prettify-min.js"></script> |
|
|
388 |
<script>prettyPrint();</script> |
|
|
389 |
|
|
|
390 |
<script> |
|
|
391 |
YUI.Env.Tests = { |
|
|
392 |
examples: [], |
|
|
393 |
project: '../assets', |
|
|
394 |
assets: '../assets/charts', |
|
|
395 |
name: 'charts-globalstyles', |
|
|
396 |
title: 'Customize a Chart', |
|
|
397 |
newWindow: '', |
|
|
398 |
auto: false |
|
|
399 |
}; |
|
|
400 |
YUI.Env.Tests.examples.push('charts-simple'); |
|
|
401 |
YUI.Env.Tests.examples.push('charts-multiseries'); |
|
|
402 |
YUI.Env.Tests.examples.push('charts-column'); |
|
|
403 |
YUI.Env.Tests.examples.push('charts-stackedcolumn'); |
|
|
404 |
YUI.Env.Tests.examples.push('charts-timeaxis'); |
|
|
405 |
YUI.Env.Tests.examples.push('charts-gridlines'); |
|
|
406 |
YUI.Env.Tests.examples.push('charts-stackedarea'); |
|
|
407 |
YUI.Env.Tests.examples.push('charts-globalstyles'); |
|
|
408 |
YUI.Env.Tests.examples.push('charts-customizedtooltip'); |
|
|
409 |
YUI.Env.Tests.examples.push('charts-objectstyles'); |
|
|
410 |
YUI.Env.Tests.examples.push('charts-pie'); |
|
|
411 |
YUI.Env.Tests.examples.push('charts-dualaxes'); |
|
|
412 |
YUI.Env.Tests.examples.push('charts-axisupdate'); |
|
|
413 |
YUI.Env.Tests.examples.push('charts-seriesupdate'); |
|
|
414 |
YUI.Env.Tests.examples.push('charts-legend'); |
|
|
415 |
YUI.Env.Tests.examples.push('charts-groupmarkers'); |
|
|
416 |
|
|
|
417 |
</script> |
|
|
418 |
<script src="../assets/yui/test-runner.js"></script> |
|
|
419 |
|
|
|
420 |
|
|
|
421 |
|
|
|
422 |
</body> |
|
|
423 |
</html> |