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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
|
# g.pie.js #
## Requirements ##
+ raphael.js
+ g.raphael.js
+ g.pie.js
## Overview ##
Creates a pie chart.
## Parameters ##
**1. x** number **X coordinate of the centre**
**2. y** number **Y coordinate of the centre**
**3. r** number **radius**
**4. values** array of numbers **Values for your slices.**
**5. opts** object **Options (more info soon.)**
_opts_
**legend**
Values are,
+ legend - e.g. ["apples", "oranges"]
+ legendothers
+ legendmark
+ legendpos - e.g. "west"
legend is required. If legendpos is omitted, 'east' is assumed. If legendmark is omitted, 'disc' is assumed. The current possible options for legendmark and legendpos are,
**legendmark**
Values are,
_(shorthand: full name)_
+ o: "disc"
+ f: "flower"
+ d: "diamond"
+ s: "square"
+ t: "triangle"
+ *: "star"
+ x: "cross"
+ +: "plus"
+ ->: "arrow"
**legendpos**
Values are,
+ "north"
+ "south"
+ "east"
+ "west"
## Methods ##
**1. .hover(fin, fout)** - fin/fout: **callbacks to trigger when mouse hovers in and out respectively over the pie sectors.**
**2. .click(f)** - f: **callback to trigger on click event.**
**3. .each(f)** - f: **callback applied to each iteration.**
.each(f) works by iterating through each of the slices and returning each as an object to the callback f(). Within the callback, you can access the object returned on each iteration in the context of 'this', for example
var f = function() {
console.log(this.r); // the radius of the slice
}
## Usage ##
Create a Raphael instance,
// bare bones
var r = Raphael();
// create at top left corner of #element
var r = Raphael('pie-chart');
Create a pie chart,
// bare bones
var pie = r.g.piechart(_params);
// example
var pie = r.g.piechart(10, 10, 90, [10,20,30]);
Create legends,
// example
r.g.piechart(320, 240, 100, [10,20,30,40], {legend:['%% apples', '%% bananas', '%% cherries', '%% durians'], legendmark:"*", legendpos: "south"});
Attach hover event to piechart,
// example
r.g.piechart(10, 10, 90, [10,20,30]).hover(function() {
// when mouse hovers over slice, change color
this.sector.attr({fill:"#FAA"});
}, function() {
// when mouse hovers out, restore color
this.sector.attr({fill:"#666"});
});
Attach click event to piechart,
// example
r.g.piechart.click(function() {
alert("You clicked on the pie chart!");
});
## Others ##
Each pie chart in g.raphael.js is composed of a 'series', or a collection of slices/sectors. Each slice has its own 'sector' property which carries information like the value, the color and other attributes, as well as its own 'cover' which can be thought of as a layer (really set to opacity 0) to which you attach events like click or hover.
When you iterate through each slice of the pie chart using .each(), the returned slice has the following properties:
+ sector
+ cover
+ cx
+ cy
+ x (middle x coordinate of the sector)
+ y (middle y coordinate of the sector)
+ mangle
+ r (radius)
+ value
+ total
+ label
When you attach a hover event for example, using .hover(), g.raphael.js is essentially iterating through each slice, as it does in .each(), and passing the returned slice to the callbacks to be called, and setting the events to happen by binding mouseover and mouseout events to the covers.
All of this is container within the 'chart' object, which is initialized and returned to you when you first call g.piechart.
## Written by ##
Kenny Shen, www.northpole.sg.
|
