Context Navigation

source: Dev/trunk/RGraph/libraries/RGraph.rose.js @ 77

Last change on this file since 77 was 77, checked in by fpvanagthoven, 14 years ago
RGraph
File size: 37.1 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 rose chart constuctor
19	*
20	* @param object canvas
21	* @param array data
22	*/
23	RGraph.Rose = function (id, data)
24	{
25	this.id = id;
26	this.canvas = document.getElementById(id);
27	this.context = this.canvas.getContext('2d');
28	this.data = data;
29	this.canvas.__object__ = this;
30	this.type = 'rose';
31	this.isRGraph = true;
32
33
34	/**
35	* Compatibility with older browsers
36	*/
37	RGraph.OldBrowserCompat(this.context);
38
39
40	this.centerx = 0;
41	this.centery = 0;
42	this.radius = 0;
43	this.max = 0;
44
45	this.properties = {
46	'chart.radius': null,
47	'chart.colors': ['red', 'rgb(0,255,255)', 'rgb(0,255,0)', 'gray', 'blue', 'rgb(255,128,255)','green', 'pink', 'gray', 'aqua'],
48	'chart.colors.sequential': false,
49	'chart.colors.alpha': null,
50	'chart.strokestyle': 'rgba(0,0,0,0.5)',
51	'chart.gutter.left': 25,
52	'chart.gutter.right': 25,
53	'chart.gutter.top': 25,
54	'chart.gutter.bottom': 25,
55	'chart.title': '',
56	'chart.title.background': null,
57	'chart.title.hpos': null,
58	'chart.title.vpos': null,
59	'chart.labels': null,
60	'chart.labels.position': 'center',
61	'chart.labels.axes': 'nsew',
62	'chart.labels.offset': 0,
63	'chart.text.color': 'black',
64	'chart.text.font': 'Verdana',
65	'chart.text.size': 10,
66	'chart.key': null,
67	'chart.key.background': 'white',
68	'chart.key.position': 'graph',
69	'chart.key.halign': 'right',
70	'chart.key.shadow': false,
71	'chart.key.shadow.color': '#666',
72	'chart.key.shadow.blur': 3,
73	'chart.key.shadow.offsetx': 2,
74	'chart.key.shadow.offsety': 2,
75	'chart.key.position.gutter.boxed': true,
76	'chart.key.position.x': null,
77	'chart.key.position.y': null,
78	'chart.key.color.shape': 'square',
79	'chart.key.rounded': true,
80	'chart.key.linewidth': 1,
81	'chart.contextmenu': null,
82	'chart.tooltips': null,
83	'chart.tooltips.event': 'onclick',
84	'chart.tooltips.effect': 'fade',
85	'chart.tooltips.css.class': 'RGraph_tooltip',
86	'chart.tooltips.highlight': true,
87	'chart.highlight.stroke': 'black',
88	'chart.highlight.fill': 'rgba(255,255,255,0.5)',
89	'chart.annotatable': false,
90	'chart.annotate.color': 'black',
91	'chart.zoom.factor': 1.5,
92	'chart.zoom.fade.in': true,
93	'chart.zoom.fade.out': true,
94	'chart.zoom.hdir': 'right',
95	'chart.zoom.vdir': 'down',
96	'chart.zoom.frames': 10,
97	'chart.zoom.delay': 50,
98	'chart.zoom.shadow': true,
99	'chart.zoom.mode': 'canvas',
100	'chart.zoom.thumbnail.width': 75,
101	'chart.zoom.thumbnail.height': 75,
102	'chart.zoom.background': true,
103	'chart.zoom.action': 'zoom',
104	'chart.resizable': false,
105	'chart.resize.handle.adjust': [0,0],
106	'chart.resize.handle.background': null,
107	'chart.adjustable': false,
108	'chart.ymax': null,
109	'chart.ymin': 0,
110	'chart.scale.decimals': null,
111	'chart.variant': 'stacked'
112	}
113
114
115	/**
116	* Set the .getShape commonly named method
117	*/
118	this.getShape = this.getSegment;
119	}
120
121
122	/**
123	* A simple setter
124	*
125	* @param string name The name of the property to set
126	* @param string value The value of the property
127	*/
128	RGraph.Rose.prototype.Set = function (name, value)
129	{
130	this.properties[name.toLowerCase()] = value;
131	}
132
133
134	/**
135	* A simple getter
136	*
137	* @param string name The name of the property to get
138	*/
139	RGraph.Rose.prototype.Get = function (name)
140	{
141	return this.properties[name.toLowerCase()];
142	}
143
144
145	/**
146	* This method draws the rose chart
147	*/
148	RGraph.Rose.prototype.Draw = function ()
149	{
150	/**
151	* Fire the onbeforedraw event
152	*/
153	RGraph.FireCustomEvent(this, 'onbeforedraw');
154
155	/**
156	* Clear all of this canvases event handlers (the ones installed by RGraph)
157	*/
158	RGraph.ClearEventListeners(this.id);
159
160
161	/**
162	* This doesn't affect the chart, but is used for compatibility
163	*/
164	this.gutterLeft = this.Get('chart.gutter.left');
165	this.gutterRight = this.Get('chart.gutter.right');
166	this.gutterTop = this.Get('chart.gutter.top');
167	this.gutterBottom = this.Get('chart.gutter.bottom');
168
169	// Calculate the radius
170	this.radius = (Math.min(RGraph.GetWidth(this) - this.gutterLeft - this.gutterRight, RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom) / 2);
171	this.centerx = RGraph.GetWidth(this) / 2;
172	this.centery = RGraph.GetHeight(this) / 2;
173	this.angles = [];
174	this.total = 0;
175	this.startRadians = 0;
176
177	// User specified radius
178	if (typeof(this.Get('chart.radius')) == 'number') {
179	this.radius = this.Get('chart.radius');
180	}
181
182	/**
183	* Change the centerx marginally if the key is defined
184	*/
185	if (this.Get('chart.key') && this.Get('chart.key').length > 0 && this.Get('chart.key').length >= 3) {
186	this.centerx = this.centerx - this.Get('chart.gutter.right') + 5;
187	}
188
189	this.DrawBackground();
190	this.DrawRose();
191	this.DrawLabels();
192
193	/**
194	* Setup the context menu if required
195	*/
196	if (this.Get('chart.contextmenu')) {
197	RGraph.ShowContext(this);
198	}
199
200	/**
201	* Tooltips
202	*/
203	if (this.Get('chart.tooltips')) {
204
205	/**
206	* Register this object for redrawing
207	*/
208	RGraph.Register(this);
209
210	/**
211	* The onclick event
212	*/
213	var canvas_onclick_func = function (e)
214	{
215	var obj = e.target.__object__;
216	var canvas = e.target;
217	var context = canvas.getContext('2d');
218
219	e = RGraph.FixEventObject(e);
220
221	RGraph.Redraw();
222
223	var segment = obj.getSegment(e);
224
225	if (segment && obj.Get('chart.tooltips')) {
226
227	/**
228	* Get the tooltip text
229	*/
230	if (typeof(obj.Get('chart.tooltips')) == 'function') {
231	var text = String(obj.Get('chart.tooltips')(segment[6]));
232	} else if (typeof(obj.Get('chart.tooltips')) == 'object' && typeof(obj.Get('chart.tooltips')[segment[6]]) == 'function') {
233	var text = String(obj.Get('chart.tooltips')[segment[6]](segment[6]));
234	} else if (typeof(obj.Get('chart.tooltips')) == 'object' && (typeof(obj.Get('chart.tooltips')[segment[6]]) == 'string' \|\| typeof(obj.Get('chart.tooltips')[segment[6]]) == 'number')) {
235	var text = String(obj.Get('chart.tooltips')[segment[6]]);
236	} else {
237	var text = null;
238	}
239
240	if (text) {
241	context.beginPath();
242	context.strokeStyle = obj.Get('chart.highlight.stroke');
243	context.fillStyle = obj.Get('chart.highlight.fill');
244
245	// This highlights the chart
246	context.arc(obj.centerx, obj.centery, segment[3], segment[4] / 57.3, segment[5] / 57.3, false);
247	context.arc(obj.centerx, obj.centery, segment[2] + 0.01, segment[5] / 57.3, segment[4] / 57.3, true);
248
249	context.closePath();
250
251	context.fill();
252	context.stroke();
253
254	context.strokeStyle = 'rgba(0,0,0,0)';
255
256	// Taken out on 12th June 2011
257	//obj.DrawLabels();
258
259	/**
260	* Show the tooltip
261	*/
262	RGraph.Tooltip(canvas, text, e.pageX, e.pageY, segment[6]);
263
264	e.stopPropagation();
265	}
266
267	return;
268	}
269	}
270	this.canvas.addEventListener('click', canvas_onclick_func, false);
271	RGraph.AddEventListener(this.id, 'click', canvas_onclick_func);
272
273
274	/**
275	* The onmousemove event
276	*/
277	var canvas_onmousemove_func = function (e)
278	{
279
280	var obj = e.target.__object__;
281	var canvas = e.target;
282	var context = canvas.getContext('2d');
283
284	e = RGraph.FixEventObject(e);
285
286	var segment = obj.getSegment(e);
287
288	if (segment && obj.Get('chart.tooltips')) {
289
290	/**
291	* Get the tooltip text
292	*/
293	if (typeof(obj.Get('chart.tooltips')) == 'function') {
294	var text = String(obj.Get('chart.tooltips')(segment[6]));
295	} else if (typeof(obj.Get('chart.tooltips')) == 'object' && typeof(obj.Get('chart.tooltips')[segment[6]]) == 'function') {
296	var text = String(obj.Get('chart.tooltips')[segment[6]](segment[6]));
297	} else if (typeof(obj.Get('chart.tooltips')) == 'object' && (typeof(obj.Get('chart.tooltips')[segment[6]]) == 'string' \|\| typeof(obj.Get('chart.tooltips')[segment[6]]) == 'number')) {
298	var text = String(obj.Get('chart.tooltips')[segment[6]]);
299	} else {
300	var text = null;
301	}
302
303	if (text) {
304	canvas.style.cursor = 'pointer';
305
306	/*******************************************************
307	* This is here in case tooltips are using the
308	* onmousemove event
309	*******************************************************/
310	if (obj.Get('chart.tooltips.event') == 'onmousemove') {
311	if (!RGraph.Registry.Get('chart.tooltip') \|\| RGraph.Registry.Get('chart.tooltip').__index__ != segment[6]) {
312	canvas_onclick_func(e);
313	}
314	}
315
316	} else {
317	canvas.style.cursor = 'default';
318	}
319
320	return;
321	}
322
323	canvas.style.cursor = 'default';
324	}
325	this.canvas.addEventListener('mousemove', canvas_onmousemove_func, false);
326	RGraph.AddEventListener(this.id, 'mousemove', canvas_onmousemove_func);
327	}
328
329	/**
330	* If the canvas is annotatable, do install the event handlers
331	*/
332	if (this.Get('chart.annotatable')) {
333	RGraph.Annotate(this);
334	}
335
336	/**
337	* This bit shows the mini zoom window if requested
338	*/
339	if (this.Get('chart.zoom.mode') == 'thumbnail' \|\| this.Get('chart.zoom.mode') == 'area') {
340	RGraph.ShowZoomWindow(this);
341	}
342
343
344	/**
345	* This function enables resizing
346	*/
347	if (this.Get('chart.resizable')) {
348	RGraph.AllowResizing(this);
349	}
350
351
352	/**
353	* This function enables adjusting
354	*/
355	if (this.Get('chart.adjustable')) {
356	RGraph.AllowAdjusting(this);
357	}
358
359	/**
360	* Fire the RGraph ondraw event
361	*/
362	RGraph.FireCustomEvent(this, 'ondraw');
363	}
364
365	/**
366	* This method draws the rose charts background
367	*/
368	RGraph.Rose.prototype.DrawBackground = function ()
369	{
370	this.context.lineWidth = 1;
371
372	// Draw the background grey circles
373	this.context.strokeStyle = '#ccc';
374	for (var i=15; i<this.radius - (RGraph.isIE8() ? 5 : 0); i+=15) {// Radius must be greater than 0 for Opera to work
375	//this.context.moveTo(this.centerx + i, this.centery);
376
377	// Radius must be greater than 0 for Opera to work
378	this.context.arc(this.centerx, this.centery, i, 0, (2 * Math.PI), 0);
379	}
380	this.context.stroke();
381
382	// Draw the background lines that go from the center outwards
383	this.context.beginPath();
384	for (var i=15; i<360; i+=15) {
385
386	// Radius must be greater than 0 for Opera to work
387	this.context.arc(this.centerx, this.centery, this.radius, i / 57.3, (i + 0.1) / 57.3, 0); // The 0.1 avoids a bug in Chrome 6
388
389	this.context.lineTo(this.centerx, this.centery);
390	}
391	this.context.stroke();
392
393	this.context.beginPath();
394	this.context.strokeStyle = 'black';
395
396	// Draw the X axis
397	this.context.moveTo(this.centerx - this.radius, this.centery);
398	this.context.lineTo(this.centerx + this.radius, this.centery);
399
400	// Draw the X ends
401	this.context.moveTo(this.centerx - this.radius, this.centery - 5);
402	this.context.lineTo(this.centerx - this.radius, this.centery + 5);
403	this.context.moveTo(this.centerx + this.radius, this.centery - 5);
404	this.context.lineTo(this.centerx + this.radius, this.centery + 5);
405
406	// Draw the X check marks
407	for (var i=(this.centerx - this.radius); i<(this.centerx + this.radius); i+=20) {
408	this.context.moveTo(i, this.centery - 3);
409	this.context.lineTo(i, this.centery + 3);
410	}
411
412	// Draw the Y check marks
413	for (var i=(this.centery - this.radius); i<(this.centery + this.radius); i+=20) {
414	this.context.moveTo(this.centerx - 3, i);
415	this.context.lineTo(this.centerx + 3, i);
416	}
417
418	// Draw the Y axis
419	this.context.moveTo(this.centerx, this.centery - this.radius);
420	this.context.lineTo(this.centerx, this.centery + this.radius);
421
422	// Draw the Y ends
423	this.context.moveTo(this.centerx - 5, this.centery - this.radius);
424	this.context.lineTo(this.centerx + 5, this.centery - this.radius);
425
426	this.context.moveTo(this.centerx - 5, this.centery + this.radius);
427	this.context.lineTo(this.centerx + 5, this.centery + this.radius);
428
429	// Stroke it
430	this.context.closePath();
431	this.context.stroke();
432	}
433
434
435	/**
436	* This method draws the data on the graph
437	*/
438	RGraph.Rose.prototype.DrawRose = function ()
439	{
440	var max = 0;
441	var data = this.data;
442
443	// Must be at least two data points
444	if (data.length < 2) {
445	alert('[ROSE] Must be at least two data points! [' + data + ']');
446	return;
447	}
448
449	// Work out the maximum value and the sum
450	if (!this.Get('chart.ymax')) {
451	// Work out the max
452	for (var i=0; i<data.length; ++i) {
453	if (typeof(data[i]) == 'number') {
454	max = Math.max(max, data[i]);
455	} else if (typeof(data[i]) == 'object' && this.Get('chart.variant') == 'non-equi-angular') {
456	max = Math.max(max, data[i][0]);
457
458	// Fallback is stacked
459	} else {
460	max = Math.max(max, RGraph.array_sum(data[i]));
461	}
462	}
463
464	this.scale = RGraph.getScale(max, this);
465	this.max = this.scale[4];
466	} else {
467	var ymax = this.Get('chart.ymax');
468	var ymin = this.Get('chart.ymin');
469
470	this.scale = [
471	((ymax - ymin) * 0.2) + ymin,
472	((ymax - ymin) * 0.4) + ymin,
473	((ymax - ymin) * 0.6) + ymin,
474	((ymax - ymin) * 0.8) + ymin,
475	((ymax - ymin) * 1.0) + ymin
476	];
477	this.max = this.scale[4];
478	}
479
480	this.sum = RGraph.array_sum(data);
481
482	// Move to the centre
483	this.context.moveTo(this.centerx, this.centery);
484
485	this.context.stroke(); // Stroke the background so it stays grey
486
487	// Transparency
488	if (this.Get('chart.colors.alpha')) {
489	this.context.globalAlpha = this.Get('chart.colors.alpha');
490	}
491
492	/*******************************************************
493	* A non-equi-angular Rose chart
494	*******************************************************/
495	if (typeof(this.Get('chart.variant')) == 'string' && this.Get('chart.variant') == 'non-equi-angular') {
496	/*******************************************************
497	* NON-EQUI-ANGULAR GOES HERE
498	*******************************************************/
499	var total=0;
500	for (var i=0; i<data.length; ++i) {
501	total += data[i][1];
502	}
503
504
505	for (var i=0; i<this.data.length; ++i) {
506
507	var segmentRadians = (this.data[i][1] / total) * (2 * Math.PI);
508	var radius = ((this.data[i][0] - this.Get('chart.ymin')) / (this.max - this.Get('chart.ymin'))) * (this.radius - 10);
509
510	this.context.strokeStyle = this.Get('chart.strokestyle');
511	this.context.fillStyle = this.Get('chart.colors')[0];
512
513	if (this.Get('chart.colors.sequential')) {
514	this.context.fillStyle = this.Get('chart.colors')[i];
515	}
516
517	this.context.beginPath(); // Begin the segment
518	this.context.arc(this.centerx, this.centery, radius, this.startRadians - (Math.PI / 2), this.startRadians + segmentRadians - (Math.PI / 2), 0);
519	this.context.lineTo(this.centerx, this.centery);
520	this.context.closePath(); // End the segment
521
522	this.context.stroke();
523	this.context.fill();
524
525	// Store the start and end angles
526	this.angles.push([
527	((this.startRadians - (Math.PI / 2)) * 57.3) + 90,
528	(((this.startRadians + segmentRadians) - (Math.PI / 2)) * 57.3) + 90,
529	0,
530	radius
531	]);
532
533	this.startRadians += segmentRadians;
534	}
535	} else {
536	/*******************************************************
537	* Draw the segments
538	*******************************************************/
539	for (var i=0; i<this.data.length; ++i) {
540
541	this.context.strokeStyle = this.Get('chart.strokestyle');
542	this.context.fillStyle = this.Get('chart.colors')[0];
543
544	/*******************************************************
545	* This allows sequential colors
546	*******************************************************/
547	if (this.Get('chart.colors.sequential')) {
548	this.context.fillStyle = this.Get('chart.colors')[i];
549	}
550
551	var segmentRadians = (1 / this.data.length) * (2 * Math.PI);
552
553	if (typeof(this.data[i]) == 'number') {
554	this.context.beginPath(); // Begin the segment
555	var radius = ((this.data[i] - this.Get('chart.ymin')) / (this.max - this.Get('chart.ymin'))) * (this.radius - 10);
556
557	this.context.arc(this.centerx, this.centery, radius, this.startRadians - (Math.PI / 2), this.startRadians + segmentRadians - (Math.PI / 2), 0);
558	this.context.lineTo(this.centerx, this.centery);
559	this.context.closePath(); // End the segment
560	this.context.stroke();
561	this.context.fill();
562
563	// Store the start and end angles
564	this.angles.push([
565	((this.startRadians - (Math.PI / 2)) * 57.3) + 90,
566	(((this.startRadians + segmentRadians) - (Math.PI / 2)) * 57.3) + 90,
567	0,
568	radius
569	]);
570	/*******************************************************
571	* Draw a stacked segment
572	*******************************************************/
573	} else if (typeof(this.data[i]) == 'object') {
574
575	for (var j=0; j<this.data[i].length; ++j) {
576
577	this.context.fillStyle = this.Get('chart.colors')[j];
578	if (j == 0) {
579	this.context.beginPath(); // Begin the segment
580	var startRadius = 0;
581	var endRadius = ((this.data[i][j] - this.Get('chart.ymin')) / (this.max - this.Get('chart.ymin'))) * (this.radius - 10);
582
583	this.context.arc(this.centerx,
584	this.centery,
585	endRadius,
586	this.startRadians - (Math.PI / 2),
587	this.startRadians + segmentRadians - (Math.PI / 2),
588	0);
589	this.context.lineTo(this.centerx, this.centery);
590	this.context.closePath(); // End the segment
591	this.context.stroke();
592	this.context.fill();
593
594	this.angles.push([
595	((this.startRadians - (Math.PI / 2)) * 57.3) + 90,
596	(((this.startRadians + segmentRadians) - (Math.PI / 2)) * 57.3) + 90,
597	0,
598	endRadius
599	]);
600
601	} else {
602
603	this.context.beginPath(); // Begin the segment
604	var startRadius = endRadius; // This comes from the prior iteration of this loop
605	var endRadius = (((this.data[i][j] - this.Get('chart.ymin')) / (this.max - this.Get('chart.ymin'))) * (this.radius - 10)) + startRadius;
606
607	this.context.arc(this.centerx,
608	this.centery,
609	startRadius,
610	this.startRadians - (Math.PI / 2),
611	this.startRadians + segmentRadians - (Math.PI / 2),
612	0);
613
614	this.context.arc(this.centerx,
615	this.centery,
616	endRadius,
617	this.startRadians + segmentRadians - (Math.PI / 2),
618	this.startRadians - (Math.PI / 2),
619	true);
620
621	this.context.closePath(); // End the segment
622	this.context.stroke();
623	this.context.fill();
624
625	this.angles.push([
626	((this.startRadians - (Math.PI / 2)) * 57.3) + 90,
627	((this.startRadians + segmentRadians - (Math.PI / 2)) * 57.3) + 90,
628	startRadius,
629	endRadius
630	]);
631	}
632	}
633	}
634
635	this.startRadians += segmentRadians;
636	}
637	}
638
639	// Turn off the transparency
640	if (this.Get('chart.colors.alpha')) {
641	this.context.globalAlpha = 1;
642	}
643
644	// Draw the title if any has been set
645	if (this.Get('chart.title')) {
646	RGraph.DrawTitle(this.canvas,
647	this.Get('chart.title'),
648	(this.canvas.height / 2) - this.radius,
649	this.centerx,
650	this.Get('chart.text.size') + 2);
651	}
652	}
653
654
655	/**
656	* Unsuprisingly, draws the labels
657	*/
658	RGraph.Rose.prototype.DrawLabels = function ()
659	{
660	this.context.lineWidth = 1;
661	var key = this.Get('chart.key');
662
663	if (key && key.length) {
664	RGraph.DrawKey(this, key, this.Get('chart.colors'));
665	}
666
667	// Set the color to black
668	this.context.fillStyle = 'black';
669	this.context.strokeStyle = 'black';
670
671	var r = this.radius - 10;
672	var font_face = this.Get('chart.text.font');
673	var font_size = this.Get('chart.text.size');
674	var context = this.context;
675	var axes = this.Get('chart.labels.axes').toLowerCase();
676
677	// Draw any labels
678
679	if (typeof(this.Get('chart.labels')) == 'object' && this.Get('chart.labels')) {
680	this.DrawCircularLabels(context, this.Get('chart.labels'), font_face, font_size, r + 10);
681	}
682
683
684	var color = 'rgba(255,255,255,0.8)';
685
686	// The "North" axis labels
687	if (axes.indexOf('n') > -1) {
688	RGraph.Text(context, font_face, font_size, this.centerx, this.centery - (r * 0.2), String(Number(this.scale[0]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color);
689	RGraph.Text(context, font_face, font_size, this.centerx, this.centery - (r * 0.4), String(Number(this.scale[1]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color);
690	RGraph.Text(context, font_face, font_size, this.centerx, this.centery - (r * 0.6), String(Number(this.scale[2]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color);
691	RGraph.Text(context, font_face, font_size, this.centerx, this.centery - (r * 0.8), String(Number(this.scale[3]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color);
692	RGraph.Text(context, font_face, font_size, this.centerx, this.centery - r, String(Number(this.scale[4]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color);
693	}
694
695	// The "South" axis labels
696	if (axes.indexOf('s') > -1) {
697	RGraph.Text(context, font_face, font_size, this.centerx, this.centery + (r * 0.2), String(Number(this.scale[0]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color);
698	RGraph.Text(context, font_face, font_size, this.centerx, this.centery + (r * 0.4), String(Number(this.scale[1]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color);
699	RGraph.Text(context, font_face, font_size, this.centerx, this.centery + (r * 0.6), String(Number(this.scale[2]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color);
700	RGraph.Text(context, font_face, font_size, this.centerx, this.centery + (r * 0.8), String(Number(this.scale[3]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color);
701	RGraph.Text(context, font_face, font_size, this.centerx, this.centery + r, String(Number(this.scale[4]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color);
702	}
703
704	// The "East" axis labels
705	if (axes.indexOf('e') > -1) {
706	RGraph.Text(context, font_face, font_size, this.centerx + (r * 0.2), this.centery, String(Number(this.scale[0]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color);
707	RGraph.Text(context, font_face, font_size, this.centerx + (r * 0.4), this.centery, String(Number(this.scale[1]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color);
708	RGraph.Text(context, font_face, font_size, this.centerx + (r * 0.6), this.centery, String(Number(this.scale[2]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color);
709	RGraph.Text(context, font_face, font_size, this.centerx + (r * 0.8), this.centery, String(Number(this.scale[3]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color);
710	RGraph.Text(context, font_face, font_size, this.centerx + r, this.centery, String(Number(this.scale[4]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color);
711	}
712
713	// The "West" axis labels
714	if (axes.indexOf('w') > -1) {
715	RGraph.Text(context, font_face, font_size, this.centerx - (r * 0.2), this.centery, String(Number(this.scale[0]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color);
716	RGraph.Text(context, font_face, font_size, this.centerx - (r * 0.4), this.centery, String(Number(this.scale[1]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color);
717	RGraph.Text(context, font_face, font_size, this.centerx - (r * 0.6), this.centery, String(Number(this.scale[2]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color);
718	RGraph.Text(context, font_face, font_size, this.centerx - (r * 0.8), this.centery, String(Number(this.scale[3]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color);
719	RGraph.Text(context, font_face, font_size, this.centerx - r, this.centery, String(Number(this.scale[4]).toFixed(this.Get('chart.scale.decimals'))), 'center', 'center', true, false, color);
720	}
721
722	RGraph.Text(context, font_face, font_size, this.centerx, this.centery, typeof(this.Get('chart.ymin')) == 'number' ? String(Number(this.Get('chart.ymin')).toFixed(this.Get('chart.scale.decimals'))) : '0', 'center', 'center', true, false, color);
723	}
724
725
726	/**
727	* Draws the circular labels that go around the charts
728	*
729	* @param labels array The labels that go around the chart
730	*/
731	RGraph.Rose.prototype.DrawCircularLabels = function (context, labels, font_face, font_size, r)
732	{
733	var variant = this.Get('chart.variant');
734	var position = this.Get('chart.labels.position');
735	var r = r + 10 + this.Get('chart.labels.offset');
736
737	for (var i=0; i<labels.length; ++i) {
738
739	if (typeof(variant) == 'string' && variant == 'non-equi-angular') {
740
741	var a = Number(this.angles[i][0]) + ((this.angles[i][1] - this.angles[i][0]) / 2);
742	a -= 90;
743	var halign = 'center'; // Default halign
744
745	var x = Math.cos(a / 57.29577866666) * (r + 10);
746	var y = Math.sin(a / 57.29577866666) * (r + 10);
747
748	RGraph.Text(context, font_face, font_size, this.centerx + x, this.centery + y, String(labels[i]), 'center', halign);
749
750	} else {
751
752	var a = (360 / labels.length) * (i + 1) - (360 / (labels.length * 2));
753	var a = a - 90 + (this.Get('chart.labels.position') == 'edge' ? ((360 / labels.length) / 2) : 0);
754	var halign = 'center'; // Default halign
755
756	// Horizontal alignment
757	//if (a == 0) {
758	// var halign = 'left';
759	//} else if (a == 180) {
760	// var halign = 'right';
761	//}
762
763	var x = Math.cos(a / 57.29577866666) * (r + 10);
764	var y = Math.sin(a / 57.29577866666) * (r + 10);
765
766	RGraph.Text(context, font_face, font_size, this.centerx + x, this.centery + y, String(labels[i]), 'center', halign);
767	}
768	}
769	}
770
771
772	/**
773	* This function is for use with circular graph types, eg the Pie or Rose. Pass it your event object
774	* and it will pass you back the corresponding segment details as an array:
775	*
776	* [x, y, r, startAngle, endAngle]
777	*
778	* Angles are measured in degrees, and are measured from the "east" axis (just like the canvas).
779	*
780	* @param object e Your event object
781	*/
782	RGraph.Rose.prototype.getSegment = function (e)
783	{
784	RGraph.FixEventObject(e);
785
786	// The optional arg provides a way of allowing some accuracy (pixels)
787	var accuracy = arguments[1] ? arguments[1] : 0;
788
789	var obj = e.target.__object__;
790	var canvas = obj.canvas;
791	var context = obj.context;
792	var mouseCoords = RGraph.getMouseXY(e);
793	var x = mouseCoords[0] - obj.centerx;
794	var y = mouseCoords[1] - obj.centery;
795	var r = obj.radius;
796	var theta = Math.atan(y / x); // RADIANS
797	var hyp = y / Math.sin(theta);
798	var angles = obj.angles;
799	var ret = [];
800	var hyp = (hyp < 0) ? hyp + accuracy : hyp - accuracy;
801
802
803
804	// Put theta in DEGREES
805	theta *= 57.3
806
807	// hyp should not be greater than radius if it's a Rose chart
808	if (obj.type == 'rose') {
809	if ( (isNaN(hyp) && Math.abs(mouseCoords[0]) < (obj.centerx - r) )
810	\|\| (isNaN(hyp) && Math.abs(mouseCoords[0]) > (obj.centerx + r))
811	\|\| (!isNaN(hyp) && Math.abs(hyp) > r)) {
812	return;
813	}
814	}
815
816	/**
817	* Account for the correct quadrant
818	*/
819	if (x < 0 && y >= 0) {
820	theta += 180;
821	} else if (x < 0 && y < 0) {
822	theta += 180;
823	} else if (x > 0 && y < 0) {
824	theta += 360;
825	}
826
827	/**
828	* Account for the rose chart angle displacement
829	*/
830	theta += 90;
831
832	if (theta > 360) {
833	theta -= 360;
834	}
835
836	hyp = Math.abs(hyp);
837
838	for (var i=0; i<angles.length; ++i) {
839	if (theta >= angles[i][0] && theta < angles[i][1] && hyp > angles[i][2] && hyp < angles[i][3]) {
840
841	if (!(hyp > angles[i][2] && hyp < angles[i][3])) {
842	return null;
843	}
844
845	if (!hyp) {
846	return null;
847	}
848
849	ret[0] = obj.centerx;
850	ret[1] = obj.centery;
851	ret[2] = angles[i][2]; // Start angle
852	ret[3] = angles[i][3]; // End angle
853
854	ret[4] = angles[i][0]; // Start radius
855	ret[5] = angles[i][1]; // End radius
856	ret[6] = i;
857
858	ret[4] -= 90;
859	ret[5] -= 90;
860
861	if (x > 0 && y < 0) {
862	ret[4] += 360;
863	ret[5] += 360;
864	}
865
866	if (ret[4] < 0) ret[4] += 360;
867	if (ret[5] > 360) ret[5] -= 360;
868
869	return ret;
870	}
871	}
872
873	return null;
874	}

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

Download in other formats: