Context Navigation

source: Dev/trunk/RGraph/libraries/RGraph.funnel.js @ 201

Last change on this file since 201 was 77, checked in by fpvanagthoven, 14 years ago
RGraph
File size: 21.5 KB

Line
1	/**
2	* o------------------------------------------------------------------------------o
3	* \| This file is part of the RGraph package - you can learn more at: \|
4	* \| \|
5	* \| http://www.rgraph.net \|
6	* \| \|
7	* \| This package is licensed under the RGraph license. For all kinds of business \|
8	* \| purposes there is a small one-time licensing fee to pay and for non \|
9	* \| commercial purposes it is free to use. You can read the full license here: \|
10	* \| \|
11	* \| http://www.rgraph.net/LICENSE.txt \|
12	* o------------------------------------------------------------------------------o
13	*/
14
15	if (typeof(RGraph) == 'undefined') RGraph = {};
16
17	/**
18	* The bar chart constructor
19	*
20	* @param object canvas The canvas object
21	* @param array data The chart data
22	*/
23	RGraph.Funnel = function (id, data)
24	{
25	// Get the canvas and context objects
26	this.id = id;
27	this.canvas = document.getElementById(id);
28	this.context = this.canvas.getContext ? this.canvas.getContext("2d") : null;
29	this.canvas.__object__ = this;
30	this.type = 'funnel';
31	this.coords = [];
32	this.isRGraph = true;
33
34
35	/**
36	* Compatibility with older browsers
37	*/
38	RGraph.OldBrowserCompat(this.context);
39
40
41	// Check for support
42	if (!this.canvas) {
43	alert('[FUNNEL] No canvas support');
44	return;
45	}
46
47	/**
48	* The funnel charts properties
49	*/
50	this.properties = {
51	'chart.strokestyle': 'black',
52	'chart.gutter.left': 25,
53	'chart.gutter.right': 25,
54	'chart.gutter.top': 25,
55	'chart.gutter.bottom': 25,
56	'chart.labels': null,
57	'chart.title': '',
58	'chart.title.background': null,
59	'chart.title.hpos': null,
60	'chart.title.vpos': null,
61	'chart.colors': ['red', 'green', 'gray', 'blue', 'black', 'gray'],
62	'chart.text.size': 10,
63	'chart.text.boxed': true,
64	'chart.text.halign': 'left',
65	'chart.text.color': 'black',
66	'chart.text.font': 'Verdana',
67	'chart.contextmenu': null,
68	'chart.shadow': false,
69	'chart.shadow.color': '#666',
70	'chart.shadow.blur': 3,
71	'chart.shadow.offsetx': 3,
72	'chart.shadow.offsety': 3,
73	'chart.key': [],
74	'chart.key.background': 'white',
75	'chart.key.position': 'graph',
76	'chart.key.halign': 'right',
77	'chart.key.shadow': false,
78	'chart.key.shadow.color': '#666',
79	'chart.key.shadow.blur': 3,
80	'chart.key.shadow.offsetx': 2,
81	'chart.key.shadow.offsety': 2,
82	'chart.key.position.gutter.boxed': true,
83	'chart.key.position.x': null,
84	'chart.key.position.y': null,
85	'chart.key.color.shape': 'square',
86	'chart.key.rounded': true,
87	'chart.key.linewidth': 1,
88	'chart.tooltips': null,
89	'chart.tooltips.effect': 'fade',
90	'chart.tooltips.css.class': 'RGraph_tooltip',
91	'chart.highlight.stroke': 'black',
92	'chart.highlight.fill': 'rgba(255,255,255,0.5)',
93	'chart.tooltips.highlight': true,
94	'chart.annotatable': false,
95	'chart.annotate.color': 'black',
96	'chart.zoom.factor': 1.5,
97	'chart.zoom.fade.in': true,
98	'chart.zoom.fade.out': true,
99	'chart.zoom.factor': 1.5,
100	'chart.zoom.fade.in': true,
101	'chart.zoom.fade.out': true,
102	'chart.zoom.hdir': 'right',
103	'chart.zoom.vdir': 'down',
104	'chart.zoom.frames': 10,
105	'chart.zoom.delay': 50,
106	'chart.zoom.shadow': true,
107	'chart.zoom.mode': 'canvas',
108	'chart.zoom.thumbnail.width': 75,
109	'chart.zoom.thumbnail.height': 75,
110	'chart.zoom.background': true,
111	'chart.zoom.action': 'zoom',
112	'chart.resizable': false,
113	'chart.resize.handle.adjust': [0,0],
114	'chart.resize.handle.background': null
115	}
116
117	// Store the data
118	this.data = data;
119
120	/**
121	* Set the .getShape commonly named method
122	*/
123	this.getShape = this.getSegment;
124	}
125
126
127	/**
128	* A setter
129	*
130	* @param name string The name of the property to set
131	* @param value mixed The value of the property
132	*/
133	RGraph.Funnel.prototype.Set = function (name, value)
134	{
135	this.properties[name.toLowerCase()] = value;
136	}
137
138
139	/**
140	* A getter
141	*
142	* @param name string The name of the property to get
143	*/
144	RGraph.Funnel.prototype.Get = function (name)
145	{
146	return this.properties[name.toLowerCase()];
147	}
148
149
150	/**
151	* The function you call to draw the bar chart
152	*/
153	RGraph.Funnel.prototype.Draw = function ()
154	{
155	/**
156	* Fire the onbeforedraw event
157	*/
158	RGraph.FireCustomEvent(this, 'onbeforedraw');
159
160	/**
161	* Clear all of this canvases event handlers (the ones installed by RGraph)
162	*/
163	RGraph.ClearEventListeners(this.id);
164
165	/**
166	* This is new in May 2011 and facilitates indiviual gutter settings,
167	* eg chart.gutter.left
168	*/
169	this.gutterLeft = this.Get('chart.gutter.left');
170	this.gutterRight = this.Get('chart.gutter.right');
171	this.gutterTop = this.Get('chart.gutter.top');
172	this.gutterBottom = this.Get('chart.gutter.bottom');
173
174	// This stops the coords array from growing
175	this.coords = [];
176
177	RGraph.DrawTitle(this.canvas, this.Get('chart.title'), this.gutterTop, null, this.Get('chart.text.size') + 2);
178	this.DrawFunnel();
179
180
181	/**
182	* Setup the context menu if required
183	*/
184	if (this.Get('chart.contextmenu')) {
185	RGraph.ShowContext(this);
186	}
187
188	/**
189	* The tooltip handler
190	*/
191	if (this.Get('chart.tooltips')) {
192
193	RGraph.Register(this);
194
195	var canvas_onclick_func = function (e)
196	{
197	RGraph.Redraw();
198
199	var e = RGraph.FixEventObject(e);
200	var canvas = e.target;
201	var context = canvas.getContext('2d');
202	var obj = canvas.__object__;
203
204	var mouseCoords = RGraph.getMouseXY(e);
205	var coords = obj.coords;
206	var x = mouseCoords[0];
207	var y = mouseCoords[1];
208	var segment = obj.getSegment(e);
209
210	if (segment) {
211
212	var idx = segment[2];
213
214	// Is there a tooltip defined?
215	if (!obj.Get('chart.tooltips')[idx] && typeof(obj.Get('chart.tooltips')) != 'function') {
216	return;
217	}
218
219	context.beginPath();
220
221	RGraph.NoShadow(obj);
222
223	context.strokeStyle = obj.Get('chart.highlight.stroke');
224	context.fillStyle = obj.Get('chart.highlight.fill');
225
226	context.moveTo(coords[idx][0], coords[idx][1]);
227	context.lineTo(coords[idx][2], coords[idx][3]);
228	context.lineTo(coords[idx][4], coords[idx][5]);
229	context.lineTo(coords[idx][6], coords[idx][7]);
230	context.closePath();
231
232	context.stroke();
233	context.fill();
234
235	/**
236	* Draw the key again for in-graph keys so they don't appear "under" the highlight
237	*/
238	if (obj.Get('chart.key').length && obj.Get('chart.key.position') == 'graph') {
239	RGraph.DrawKey(obj, obj.Get('chart.key'), obj.Get('chart.colors'));
240	}
241
242	/**
243	* Redraw the labels if necessary
244	*/
245	if (obj.Get('chart.labels')) {
246	obj.DrawLabels();
247	}
248
249	/**
250	* Get the tooltip text
251	*/
252	if (typeof(obj.Get('chart.tooltips')) == 'function') {
253	var text = obj.Get('chart.tooltips')(idx);
254
255	} else if (typeof(obj.Get('chart.tooltips')) == 'object' && typeof(obj.Get('chart.tooltips')[idx]) == 'function') {
256	var text = obj.Get('chart.tooltips')[idx](idx);
257
258	} else if (typeof(obj.Get('chart.tooltips')) == 'object') {
259	var text = obj.Get('chart.tooltips')[idx];
260
261	} else {
262	var text = '';
263	}
264
265	// Show the tooltip
266	RGraph.Tooltip(canvas, text, e.pageX, e.pageY, idx);
267
268	// Stop the event propagating
269	e.stopPropagation();
270	}
271	}
272	this.canvas.addEventListener('click', canvas_onclick_func, false);
273	RGraph.AddEventListener(this.id, 'click', canvas_onclick_func);
274
275	/**
276	* Onmousemove event handler
277	*/
278	var canvas_onmousemove_func = function (e)
279	{
280	var e = RGraph.FixEventObject(e);
281
282	var canvas = e.target;
283	var context = canvas.getContext('2d');
284	var obj = canvas.__object__;
285	var overFunnel = false;
286	var coords = obj.coords;
287
288	var mouseCoords = RGraph.getMouseXY(e);
289	var x = mouseCoords[0];
290	var y = mouseCoords[1];
291	var segment = obj.getSegment(e);
292
293	if (segment) {
294
295	var idx = segment[2];
296
297	// Is there a tooltip defined?
298	if (obj.Get('chart.tooltips')[idx] \|\| typeof(obj.Get('chart.tooltips')) == 'function') {
299
300	overFunnel = true;
301	canvas.style.cursor = 'pointer';
302
303	// Stop the event propagating
304	e.stopPropagation();
305
306	}
307	}
308
309	if (!overFunnel) {
310	canvas.style.cursor = 'default';
311	canvas.style.cursor = 'default';
312	}
313	}
314	this.canvas.addEventListener('mousemove', canvas_onmousemove_func, false);
315	RGraph.AddEventListener(this.id, 'mousemove', canvas_onmousemove_func);
316	}
317
318
319	/**
320	* Draw the labels on the chart
321	*/
322	this.DrawLabels();
323
324	/**
325	* If the canvas is annotatable, do install the event handlers
326	*/
327	if (this.Get('chart.annotatable')) {
328	RGraph.Annotate(this);
329	}
330
331	/**
332	* This bit shows the mini zoom window if requested
333	*/
334	if (this.Get('chart.zoom.mode') == 'thumbnail'\|\| this.Get('chart.zoom.mode') == 'area') {
335	RGraph.ShowZoomWindow(this);
336	}
337
338
339	/**
340	* This function enables resizing
341	*/
342	if (this.Get('chart.resizable')) {
343	RGraph.AllowResizing(this);
344	}
345
346	/**
347	* Fire the RGraph ondraw event
348	*/
349	RGraph.FireCustomEvent(this, 'ondraw');
350	}
351
352
353	/**
354	* This function actually draws the chart
355	*/
356	RGraph.Funnel.prototype.DrawFunnel = function ()
357	{
358	var context = this.context;
359	var canvas = this.canvas;
360	var width = RGraph.GetWidth(this) - this.gutterLeft - this.gutterRight;
361	var height = RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom;
362	var total = RGraph.array_max(this.data);
363	var accheight = this.gutterTop;
364
365
366	/**
367	* Loop through each segment to draw
368	*/
369
370	// Set a shadow if it's been requested
371	if (this.Get('chart.shadow')) {
372	context.shadowColor = this.Get('chart.shadow.color');
373	context.shadowBlur = this.Get('chart.shadow.blur');
374	context.shadowOffsetX = this.Get('chart.shadow.offsetx');
375	context.shadowOffsetY = this.Get('chart.shadow.offsety');
376	}
377
378	for (i=0; i<this.data.length; ++i) {
379
380	i = Number(i);
381
382	var firstvalue = this.data[0];
383	var firstwidth = (firstvalue / total) * width;
384	var curvalue = this.data[i];
385	var curwidth = (curvalue / total) * width;
386	var curheight = height / this.data.length;
387	var halfCurWidth = (curwidth / 2);
388	var nextvalue = this.data[i + 1] ? this.data[i + 1] : 0;
389	var nextwidth = this.data[i + 1] ? (nextvalue / total) * width : 0;
390	var halfNextWidth = (nextwidth / 2);
391	var center = this.gutterLeft + (firstwidth / 2);
392
393	/**
394	* First segment
395	*/
396	if (i == 0) {
397	var x1 = center - halfCurWidth;
398	var y1 = this.gutterTop;
399	var x2 = center + halfCurWidth;
400	var y2 = this.gutterTop;
401	var x3 = center + halfNextWidth;
402	var y3 = accheight + curheight;
403	var x4 = center - halfNextWidth;
404	var y4 = accheight + curheight;
405
406	/**
407	* Subsequent segments
408	*/
409	} else {
410	var x1 = center - halfCurWidth;
411	var y1 = accheight;
412	var x2 = center + halfCurWidth;
413	var y2 = accheight;
414	var x3 = center + halfNextWidth;
415	var y3 = accheight + curheight;
416	var x4 = center - halfNextWidth;
417	var y4 = accheight + curheight;
418	}
419
420	/**
421	* Set the fill colour. If i is over 0 then don't use an offset
422	*/
423	if (document.all && this.Get('chart.shadow')) {
424	this.DrawIEShadow([x1, y1, x2, y2, x3, y3, x4, y4], i > 0 && this.Get('chart.shadow.offsety') < 0);
425	}
426
427	context.strokeStyle = this.Get('chart.strokestyle');
428	context.fillStyle = this.Get('chart.colors')[i];
429
430	context.beginPath();
431	context.moveTo(x1, y1);
432	context.lineTo(x2, y2);
433	context.lineTo(x3, y3);
434	context.lineTo(x4, y4);
435	context.closePath();
436
437	/**
438	* Store the coordinates
439	*/
440	this.coords.push([x1, y1, x2, y2, x3, y3, x4, y4]);
441
442	// The redrawing if the shadow is on will do the stroke
443	if (!this.Get('chart.shadow')) {
444	context.stroke();
445	}
446
447	context.fill();
448
449	accheight += curheight;
450	}
451
452	/**
453	* If the shadow is enabled, redraw every segment, in order to allow for shadows going upwards
454	*/
455	if (this.Get('chart.shadow')) {
456
457	RGraph.NoShadow(this);
458
459	for (i=0; i<this.coords.length; ++i) {
460
461	context.strokeStyle = this.Get('chart.strokestyle');
462	context.fillStyle = this.Get('chart.colors')[i];
463
464	context.beginPath();
465	context.moveTo(this.coords[i][0], this.coords[i][1]);
466	context.lineTo(this.coords[i][2], this.coords[i][3]);
467	context.lineTo(this.coords[i][4], this.coords[i][5]);
468	context.lineTo(this.coords[i][6], this.coords[i][7]);
469	context.closePath();
470
471	context.stroke();
472	context.fill();
473	}
474	}
475
476	/**
477	* Lastly, draw the key if necessary
478	*/
479	if (this.Get('chart.key') && this.Get('chart.key').length) {
480	RGraph.DrawKey(this, this.Get('chart.key'), this.Get('chart.colors'));
481	}
482	}
483
484	/**
485	* Draws the labels
486	*/
487	RGraph.Funnel.prototype.DrawLabels = function ()
488	{
489	/**
490	* Draws the labels
491	*/
492	if (this.Get('chart.labels') && this.Get('chart.labels').length > 0) {
493
494	var context = this.context;
495
496	for (var j=0; j<this.coords.length; ++j) { // MUST be "j"
497	context.beginPath();
498
499	// Set the color back to black
500	context.strokeStyle = 'black';
501	context.fillStyle = this.Get('chart.text.color');
502
503	// Turn off any shadow
504	RGraph.NoShadow(this);
505
506	var label = this.Get('chart.labels')[j];
507
508	RGraph.Text(context,
509	this.Get('chart.text.font'),
510	this.Get('chart.text.size'),
511	this.Get('chart.text.halign') == 'left' ? (this.gutterLeft - 15) : ((this.canvas.width - this.gutterLeft - this.gutterRight) / 2) + this.gutterLeft,
512	this.coords[j][1],
513	label,
514	'center',
515	this.Get('chart.text.halign') == 'left' ? 'left' : 'center',
516	true,
517	null,
518	this.Get('chart.text.boxed') ? 'white' : null);
519	}
520	}
521	}
522
523
524	/**
525	* This function is used by MSIE only to manually draw the shadow
526	*
527	* @param array coords The coords for the bar
528	*/
529	RGraph.Funnel.prototype.DrawIEShadow = function (coords, noOffset)
530	{
531	var prevFillStyle = this.context.fillStyle;
532	var offsetx = this.Get('chart.shadow.offsetx');
533	var offsety = this.Get('chart.shadow.offsety');
534	var context = this.context;
535
536	context.lineWidth = 1;
537	context.fillStyle = this.Get('chart.shadow.color');
538
539	// Draw the shadow
540	context.beginPath();
541	context.moveTo(coords[0] + (noOffset ? 0 : offsetx), coords[1] + (noOffset ? 0 : offsety));
542	context.lineTo(coords[2] + (noOffset ? 0 : offsetx), coords[3] + (noOffset ? 0 : offsety));
543	context.lineTo(coords[4] + (noOffset ? 0 : offsetx), coords[5] + (noOffset ? 0 : offsety));
544	context.lineTo(coords[6] + (noOffset ? 0 : offsetx), coords[7] + (noOffset ? 0 : offsety));
545	context.closePath();
546
547	context.fill();
548
549
550
551	// Change the fillstyle back to what it was
552	this.context.fillStyle = prevFillStyle;
553	}
554
555
556	/**
557	* Gets the appropriate segment that has been highlighted
558	*/
559	RGraph.Funnel.prototype.getSegment = function (e)
560	{
561	var canvas = e.target;
562	var obj = canvas.__object__;
563	var mouseCoords = RGraph.getMouseXY(e);
564	var coords = obj.coords;
565	var x = mouseCoords[0];
566	var y = mouseCoords[1];
567
568
569
570	for (i=0; i<coords.length; ++i) {
571	if (
572	x > coords[i][0]
573	&& x < coords[i][2]
574	&& y > coords[i][1]
575	&& y < coords[i][5]
576	) {
577
578	/**
579	* Handle the right corner
580	*/
581	if (x > coords[i][4]) {
582	var w1 = coords[i][2] - coords[i][4];
583	var h1 = coords[i][5] - coords[i][3];;
584	var a1 = Math.atan(h1 / w1) * 57.3; // DEGREES
585
586	var w2 = coords[i][2] - mouseCoords[0];
587	var h2 = mouseCoords[1] - coords[i][1];
588	var a2 = Math.atan(h2 / w2) * 57.3; // DEGREES
589
590	if (a2 > a1) {
591	continue;
592	}
593
594	/**
595	* Handle the left corner
596	*/
597	} else if (x < coords[i][6]) {
598	var w1 = coords[i][6] - coords[i][0];
599	var h1 = coords[i][7] - coords[i][1];;
600	var a1 = Math.atan(h1 / w1) * 57.3; // DEGREES
601
602	var w2 = mouseCoords[0] - coords[i][0];
603	var h2 = mouseCoords[1] - coords[i][1];
604	var a2 = Math.atan(h2 / w2) * 57.3; // DEGREES
605
606	if (a2 > a1) {
607	continue;
608	}
609	}
610
611	return [obj, coords[i], i];
612	}
613	}
614
615	return null;
616	}

Note: See TracBrowser for help on using the repository browser.

Download in other formats: