1 function streamgraph($selector, $slider) { |
1 function Streamgraph($selector) { |
2 |
2 |
3 /* Constants */ |
3 /* Constants */ |
4 |
4 |
5 var VMARGIN = 3, |
5 var VMARGIN = 3, |
6 YEARSHEIGHT = 20, |
6 YEARSHEIGHT = 20, |
7 STARTTIME = new Date(2007,6,1), |
7 STARTTIME = new Date(2007,6,1), |
8 ENDTIME = new Date(), |
8 ENDTIME = new Date(), |
9 CURVE = .3, |
9 CURVE = .25, |
|
10 DATEPADDING = 10, |
10 COLORS = [ "#943a23", "#fbee97", "#cfbb95", "#da9761", "#ba5036" ], |
11 COLORS = [ "#943a23", "#fbee97", "#cfbb95", "#da9761", "#ba5036" ], |
11 SELECTEDCOLOR = "#c51810"; |
12 SELECTEDCOLOR = "#c51810"; |
12 |
13 |
13 /* Generating random data */ |
14 /* Generating random data */ |
14 |
15 |
92 |
93 |
93 var paper = new Raphael($selector[0]); |
94 var paper = new Raphael($selector[0]); |
94 |
95 |
95 _(paths).each(function(path, index) { |
96 _(paths).each(function(path, index) { |
96 var color = COLORS[index % COLORS.length], |
97 var color = COLORS[index % COLORS.length], |
97 path = paper.path(path); |
98 p = paper.path(path); |
98 path.attr({ |
99 p.attr({ |
99 stroke: "none", |
100 stroke: "none", |
100 fill: color |
101 fill: color |
101 }).mouseover(function() { |
|
102 path.attr({ |
|
103 fill: SELECTEDCOLOR |
|
104 }); |
|
105 }).mouseout(function() { |
|
106 path.attr({ |
|
107 fill: color |
|
108 }) |
|
109 }); |
102 }); |
110 }); |
103 }); |
111 |
104 |
112 /* Drawing years */ |
105 /* Drawing years */ |
113 |
106 |
122 "text-anchor": "middle", |
115 "text-anchor": "middle", |
123 "font-family": "Times New Roman, serif", |
116 "font-family": "Times New Roman, serif", |
124 "font-size": "14px" |
117 "font-size": "14px" |
125 }); |
118 }); |
126 } |
119 } |
|
120 |
|
121 /* Drawing range window */ |
|
122 |
|
123 var carregauche = paper.rect(width,-1,width,(2+height)), |
|
124 carredroite = paper.rect(-width,-1,width,(2+height)), |
|
125 attrcarres = { |
|
126 fill: "#333333", |
|
127 "fill-opacity": .5, |
|
128 stroke: SELECTEDCOLOR |
|
129 }; |
|
130 carregauche.attr(attrcarres); |
|
131 carredroite.attr(attrcarres); |
|
132 |
|
133 var rangerect = paper.rect(0, (height - YEARSHEIGHT), width, YEARSHEIGHT); |
|
134 rangerect.attr({ |
|
135 fill: SELECTEDCOLOR, |
|
136 stroke: "none" |
|
137 }); |
|
138 |
|
139 function datetext(date) { |
|
140 var d = new Date(date), |
|
141 m = 1+d.getMonth(), |
|
142 y = d.getFullYear(); |
|
143 return ((m < 10 ? "0" : "") + m + "/" + y); |
|
144 } |
|
145 |
|
146 var startdate = paper.text(DATEPADDING, height - .5 * YEARSHEIGHT, datetext(STARTTIME)); |
|
147 startdate.attr({ |
|
148 fill: "#ffffff", |
|
149 "text-anchor": "start" |
|
150 }); |
|
151 var enddate = paper.text(width - DATEPADDING, height - .5 * YEARSHEIGHT, datetext(ENDTIME)); |
|
152 enddate.attr({ |
|
153 fill: "#ffffff", |
|
154 "text-anchor": "end" |
|
155 }); |
|
156 |
|
157 /* Redrawing time slices for rollover effect */ |
|
158 |
|
159 _(paths).each(function(path, index) { |
|
160 var p = paper.path(path); |
|
161 p.attr({ |
|
162 stroke: "none", |
|
163 fill: SELECTEDCOLOR, |
|
164 opacity: .01 |
|
165 }).mouseover(function() { |
|
166 p.attr({ |
|
167 opacity: 1 |
|
168 }); |
|
169 }).mouseout(function() { |
|
170 p.attr({ |
|
171 opacity: .01 |
|
172 }) |
|
173 }); |
|
174 }); |
|
175 |
|
176 /* Returning a handler for slide value change */ |
|
177 |
|
178 this.slidevalues = function(left, right) { |
|
179 left = left || 0; |
|
180 right = right || width; |
|
181 carregauche.attr({x: left - width}); |
|
182 carredroite.attr({x: right}); |
|
183 startdate.attr({ |
|
184 x: DATEPADDING + left, |
|
185 text: datetext(STARTTIME.valueOf() + left / txscale) |
|
186 }); |
|
187 enddate.attr({ |
|
188 x: right - DATEPADDING, |
|
189 text: datetext(STARTTIME.valueOf() + right / txscale) |
|
190 }); |
|
191 rangerect.attr({ |
|
192 x: left, |
|
193 width: right - left |
|
194 }); |
|
195 } |
127 |
196 |
128 } |
197 } |
129 |
198 |
130 $(function() { |
199 $(function() { |
131 streamgraph($(".streamgraph"), $("#slider-range")); |
200 window.streamgraph = new Streamgraph($(".streamgraph")); |
|
201 streamgraph.slidevalues.apply(streamgraph,$("#slider-range").dragslider("values")); |
132 }) |
202 }) |