Cross Reference: /yui3/src/charts/docs/charts-pie.mustache
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<style scoped>
2431f6aca1be7f7a136c5df34022e3f902490075Tripp#mychart {
2431f6aca1be7f7a136c5df34022e3f902490075Tripp margin:10px 10px 10px 10px;
2431f6aca1be7f7a136c5df34022e3f902490075Tripp width: 400px;
2431f6aca1be7f7a136c5df34022e3f902490075Tripp height:400px;
2431f6aca1be7f7a136c5df34022e3f902490075Tripp}
2431f6aca1be7f7a136c5df34022e3f902490075Tripp</style>
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<div class="intro">
d676c69348c891c2a261a6dbd4f450ddb2e312f3Tripp<p>This example shows how to use `Charts` to create a Pie Chart.</p>
2431f6aca1be7f7a136c5df34022e3f902490075Tripp</div>
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<div class="example">
2431f6aca1be7f7a136c5df34022e3f902490075Tripp{{>charts-pie-source}}
2431f6aca1be7f7a136c5df34022e3f902490075Tripp</div>
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<h3>Creating a Pie `Chart`.</h3>
2431f6aca1be7f7a136c5df34022e3f902490075Tripp
2431f6aca1be7f7a136c5df34022e3f902490075Tripp
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<p>The `Chart` class also allows you to create a Pie Chart. All you need to do is set the `type` attribute to "pie", define your `categoryKey`,
2431f6aca1be7f7a136c5df34022e3f902490075Tripp`seriesKey` and `seriesCollection`.</p>
2431f6aca1be7f7a136c5df34022e3f902490075Tripp
2431f6aca1be7f7a136c5df34022e3f902490075Tripp```
2431f6aca1be7f7a136c5df34022e3f902490075TrippYUI().use('charts', function (Y)
2431f6aca1be7f7a136c5df34022e3f902490075Tripp{
2431f6aca1be7f7a136c5df34022e3f902490075Tripp // Create data
2431f6aca1be7f7a136c5df34022e3f902490075Tripp var myDataValues = [
2431f6aca1be7f7a136c5df34022e3f902490075Tripp {day:"Monday", taxes:2000},
2431f6aca1be7f7a136c5df34022e3f902490075Tripp {day:"Tuesday", taxes:50},
2431f6aca1be7f7a136c5df34022e3f902490075Tripp {day:"Wednesday", taxes:4000},
2431f6aca1be7f7a136c5df34022e3f902490075Tripp {day:"Thursday", taxes:200},
2431f6aca1be7f7a136c5df34022e3f902490075Tripp {day:"Friday", taxes:2000}
2431f6aca1be7f7a136c5df34022e3f902490075Tripp ];
2431f6aca1be7f7a136c5df34022e3f902490075Tripp
2431f6aca1be7f7a136c5df34022e3f902490075Tripp var pieGraph = new Y.Chart({
2431f6aca1be7f7a136c5df34022e3f902490075Tripp render:"#mychart",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp categoryKey:"day",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp seriesKeys:["taxes"],
2431f6aca1be7f7a136c5df34022e3f902490075Tripp dataProvider:myDataValues,
2431f6aca1be7f7a136c5df34022e3f902490075Tripp type:"pie",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp seriesCollection:[
2431f6aca1be7f7a136c5df34022e3f902490075Tripp {
2431f6aca1be7f7a136c5df34022e3f902490075Tripp categoryKey:"day",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp valueKey:"taxes"
2431f6aca1be7f7a136c5df34022e3f902490075Tripp }
2431f6aca1be7f7a136c5df34022e3f902490075Tripp ]
2431f6aca1be7f7a136c5df34022e3f902490075Tripp });
2431f6aca1be7f7a136c5df34022e3f902490075Tripp});
2431f6aca1be7f7a136c5df34022e3f902490075Tripp```