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
151
152
153
154
155
156
157
158
159
|
# g.line.js #
## Requirements ##
+ raphael.js
+ g.raphael.js
+ g.line.js
## Overview ##
Creates a line chart.
## Parameters ##
**1. x** number **X coordinate of the centre**
**2. y** number **Y coordinate of the centre**
**3. width** number **width**
**4. height** number **height**
**5. valuesx** array of numbers **Values for x-axis.**
**6. valuesy** array of numbers **Values for y-axis.**
**7. opts** object **Options (more info soon.)**
_opts_
**colors**
Value - an array of color values, such as ["#444","#666"...]. If omitted, random colors will be used. (actually, Raphael.fn.g.colors. More info on this in the g.raphael.js documentation) For more information, refer to the [supported color formats](http://raphaeljs.com/reference.html#colour) section of the Raphaeljs documention.
**symbol**
Values are,
_(shorthand: full name)_
+ o: "disc"
+ f: "flower"
+ d: "diamond"
+ s: "square"
+ t: "triangle"
+ *: "star"
+ x: "cross"
+ +: "plus"
+ ->: "arrow"
If omitted, an empty "" is assigned to indicate no symbols.
**shade**
Value - boolean. If omitted, false is assumed. If true, the area underneath the line will be shaded with the same color as the line, with opacity set to .3. You can affect this by setting nostroke (see below) option to true.
**nostroke**
Value - boolean. If omitted, false is assumed.
**axis**
Value - "_top_ _right_ _bottom_ _left_". If omitted, no axis will be rendered for the line chart. For example, if you wanted axis rendered for the left and bottom, (as in a typical x-y chart), you'll add 'axis:"0 0 1 1"' to opts. The axis is created using g.axis (for more information, see the g documentation).
**smooth**
Value - boolean. If omitted, false is assumed. If true, smoothing/rounding is applied to the path between data points.
**gutter**
Value - number. If omitted, value of '10' is assigned. Think of this as a general padding value between the chart and the bounding box/container.
## Methods ##
**1. .hover(fin, fout)** - fin/fout: **callbacks to trigger when mouse hovers in and out respectively over the data points.**
**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 data points and returning each as a 'dot' 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.symbol); // the symbol used to represent the data point on the line chart
}
**4. .hoverColumn(fin, fout)** - fin/fout: **callbacks to trigger when mouse hovers in and out respectively over the data columns.**
**5. .clickColumn(f)** - f: **callback to trigger on click event.**
**6. .hrefColumn(cols)** - _coming soon_
**7. .eachColumn(f)** - f: **callback applied to each iteration.**
## Usage ##
Create a Raphael instance,
// bare bones
var r = Raphael();
// create at top left corner of #element
var r = Raphael('line-chart');
Create a line chart,
// bare bones
var linechart = r.g.linechart(_params);
// example
var linechart = r.g.linechart(10,10,300,220,[1,2,3,4,5],[10,20,15,35,30], {"colors":["#444"], "symbol":"s", axis:"0 0 1 1"});
Attach hover event to linechart,
// example
r.g.linechart.hover(function() {
this.symbol.attr({'fill':'#CCC'});
}, function() {
this.symbol.attr({'fill':'#444'});
});
Attach click event to linechart,
// example
r.g.linechart.click(function() {
alert("You clicked on the line chart!");
});
## Others ##
There's two important internal methods that are used to create and return the objects for interaction with a gRaphael line chart, based on what methods you call.
.hover(), .click(), .each() create and return representations ('dots') of the data points used to plot the line. The dots have the following properties when they're returned in the context of 'this' to the methods you call,
+ x
+ y
+ value
+ line
+ shade
+ symbol
+ symbols
+ axis
.hoverColumn(), .clickColumn(), .eachColumn() create and return groupings of data 'dots'. Columns have similar properties to their atomic counterparts but are usually array of values.
## Written by ##
Kenny Shen, www.northpole.sg.
|
