Context Navigation

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

Last change on this file since 77 was 77, checked in by fpvanagthoven, 14 years ago
RGraph
File size: 24.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 chart constuctor
19	*
20	* @param object canvas
21	* @param array data
22	*/
23	RGraph.Rscatter = 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 = 'rscatter';
31	this.hasTooltips = false;
32	this.isRGraph = true;
33
34
35	/**
36	* Compatibility with older browsers
37	*/
38	RGraph.OldBrowserCompat(this.context);
39
40
41	this.centerx = 0;
42	this.centery = 0;
43	this.radius = 0;
44	this.max = 0;
45
46	this.properties = {
47	'chart.radius': null,
48	'chart.colors': [], // This is used internally for the key
49	'chart.colors.default': 'black',
50	'chart.gutter.left': 25,
51	'chart.gutter.right': 25,
52	'chart.gutter.top': 25,
53	'chart.gutter.bottom': 25,
54	'chart.title': '',
55	'chart.title.background': null,
56	'chart.title.hpos': null,
57	'chart.title.vpos': null,
58	'chart.labels': null,
59	'chart.labels.position': 'center',
60	'chart.labels.axes': 'nsew',
61	'chart.text.color': 'black',
62	'chart.text.font': 'Verdana',
63	'chart.text.size': 10,
64	'chart.key': null,
65	'chart.key.background': 'white',
66	'chart.key.position': 'graph',
67	'chart.key.halign': 'right',
68	'chart.key.shadow': false,
69	'chart.key.shadow.color': '#666',
70	'chart.key.shadow.blur': 3,
71	'chart.key.shadow.offsetx': 2,
72	'chart.key.shadow.offsety': 2,
73	'chart.key.position.gutter.boxed': true,
74	'chart.key.position.x': null,
75	'chart.key.position.y': null,
76	'chart.key.color.shape': 'square',
77	'chart.key.rounded': true,
78	'chart.key.linewidth': 1,
79	'chart.contextmenu': null,
80	'chart.tooltips.effect': 'fade',
81	'chart.tooltips.css.class': 'RGraph_tooltip',
82	'chart.tooltips.highlight': true,
83	'chart.tooltips.hotspot': 3,
84	'chart.annotatable': false,
85	'chart.annotate.color': 'black',
86	'chart.zoom.factor': 1.5,
87	'chart.zoom.fade.in': true,
88	'chart.zoom.fade.out': true,
89	'chart.zoom.hdir': 'right',
90	'chart.zoom.vdir': 'down',
91	'chart.zoom.frames': 10,
92	'chart.zoom.delay': 50,
93	'chart.zoom.shadow': true,
94	'chart.zoom.mode': 'canvas',
95	'chart.zoom.thumbnail.width': 75,
96	'chart.zoom.thumbnail.height': 75,
97	'chart.zoom.background': true,
98	'chart.zoom.action': 'zoom',
99	'chart.resizable': false,
100	'chart.resize.handle.adjust': [0,0],
101	'chart.resize.handle.background': null,
102	'chart.adjustable': false,
103	'chart.ymax': null,
104	'chart.ymin': 0,
105	'chart.tickmarks': 'cross',
106	'chart.ticksize': 3,
107	'chart.scale.decimals': null,
108	'chart.scale.round': false
109	}
110	}
111
112
113	/**
114	* A simple setter
115	*
116	* @param string name The name of the property to set
117	* @param string value The value of the property
118	*/
119	RGraph.Rscatter.prototype.Set = function (name, value)
120	{
121	this.properties[name.toLowerCase()] = value;
122	}
123
124
125	/**
126	* A simple getter
127	*
128	* @param string name The name of the property to get
129	*/
130	RGraph.Rscatter.prototype.Get = function (name)
131	{
132	return this.properties[name.toLowerCase()];
133	}
134
135
136	/**
137	* This method draws the rose chart
138	*/
139	RGraph.Rscatter.prototype.Draw = function ()
140	{
141	/**
142	* Fire the onbeforedraw event
143	*/
144	RGraph.FireCustomEvent(this, 'onbeforedraw');
145
146	/**
147	* Clear all of this canvases event handlers (the ones installed by RGraph)
148	*/
149	RGraph.ClearEventListeners(this.id);
150
151
152	/**
153	* This doesn't affect the chart, but is used for compatibility
154	*/
155	this.gutterLeft = this.Get('chart.gutter.left');
156	this.gutterRight = this.Get('chart.gutter.right');
157	this.gutterTop = this.Get('chart.gutter.top');
158	this.gutterBottom = this.Get('chart.gutter.bottom');
159
160	// Calculate the radius
161	this.radius = (Math.min(RGraph.GetWidth(this) - this.gutterLeft - this.gutterRight, RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom) / 2);
162	this.centerx = RGraph.GetWidth(this) / 2;
163	this.centery = RGraph.GetHeight(this) / 2;
164	this.coords = [];
165
166	/**
167	* If there's a user specified radius, use that
168	*/
169	if (typeof(this.Get('chart.radius')) == 'number') {
170	this.radius = this.Get('chart.radius');
171	}
172
173	/**
174	* Work out the scale
175	*/
176	var max = this.Get('chart.ymax');
177	var min = this.Get('chart.ymin');
178
179	if (typeof(max) == 'number') {
180	this.max = max;
181	this.scale = [((max - min) * 0.2) + min,((max - min) * 0.4) + min,((max - min) * 0.6) + min,((max - min) * 0.8) + min,((max - min) * 1.0) + min,];
182
183	} else {
184	for (var i=0; i<this.data.length; ++i) {
185	this.max = Math.max(this.max, this.data[i][1]);
186	}
187	this.scale = RGraph.getScale(this.max, this);
188	this.max = this.scale[4];
189
190	// Hmmmmmmmm
191	if (String(this.scale[0]).indexOf('e') == -1) {
192	this.scale[0] = Number(this.scale[0]).toFixed(this.Get('chart.scale.decimals'));
193	this.scale[1] = Number(this.scale[1]).toFixed(this.Get('chart.scale.decimals'));
194	this.scale[2] = Number(this.scale[2]).toFixed(this.Get('chart.scale.decimals'));
195	this.scale[3] = Number(this.scale[3]).toFixed(this.Get('chart.scale.decimals'));
196	this.scale[4] = Number(this.scale[4]).toFixed(this.Get('chart.scale.decimals'));
197	}
198	}
199
200	/**
201	* Change the centerx marginally if the key is defined
202	*/
203	if (this.Get('chart.key') && this.Get('chart.key').length > 0 && this.Get('chart.key').length >= 3) {
204	this.centerx = this.centerx - this.Get('chart.gutter.right') + 5;
205	}
206
207	/**
208	* Populate the colors array for the purposes of generating the key
209	*/
210	if (typeof(this.Get('chart.key')) == 'object' && RGraph.is_array(this.Get('chart.key')) && this.Get('chart.key')[0]) {
211	for (var i=0; i<this.data.length; ++i) {
212	if (this.data[i][2] && typeof(this.data[i][2]) == 'string') {
213	this.Get('chart.colors').push(this.data[i][2]);
214	}
215	}
216	}
217
218	this.DrawBackground();
219	this.DrawRscatter();
220	this.DrawLabels();
221
222	/**
223	* Setup the context menu if required
224	*/
225	if (this.Get('chart.contextmenu')) {
226	RGraph.ShowContext(this);
227	}
228
229	/**
230	* Tooltips
231	*/
232	if (this.hasTooltips) {
233
234	/**
235	* Register this object for redrawing
236	*/
237	RGraph.Register(this);
238
239	/**
240	* The onmousemove event
241	*/
242	var canvas_onmousemove_func = function (event)
243	{
244	event = RGraph.FixEventObject(event);
245
246	var mouseCoords = RGraph.getMouseXY(event);
247	var mouseX = mouseCoords[0];
248	var mouseY = mouseCoords[1];
249	var obj = event.target.__object__;
250	var canvas = obj.canvas;
251	var context = obj.context;
252	var overHotspot = false;
253	var offset = obj.Get('chart.tooltips.hotspot'); // This is how far the hotspot extends
254
255	for (var i=0; i<obj.coords.length; ++i) {
256
257	var xCoord = obj.coords[i][0];
258	var yCoord = obj.coords[i][1];
259	var tooltip = obj.coords[i][3];
260
261	if (
262	mouseX < (xCoord + offset) &&
263	mouseX > (xCoord - offset) &&
264	mouseY < (yCoord + offset) &&
265	mouseY > (yCoord - offset) &&
266	typeof(tooltip) == 'string' &&
267	tooltip.length > 0
268	) {
269
270	overHotspot = true;
271	canvas.style.cursor = 'pointer';
272
273	if (!RGraph.Registry.Get('chart.tooltip') \|\| RGraph.Registry.Get('chart.tooltip').__text__ != tooltip) {
274
275	if (obj.Get('chart.tooltips.highlight')) {
276	RGraph.Redraw();
277	}
278
279	/**
280	* Get the tooltip text
281	*/
282	if (typeof(tooltip) == 'function') {
283	var text = String(tooltip(i));
284
285	} else {
286	var text = String(tooltip);
287	}
288
289	RGraph.Tooltip(canvas, text, event.pageX + 5, event.pageY - 5, i);
290
291	/**
292	* Highlight the tickmark
293	*/
294	if (obj.Get('chart.tooltips.highlight')) {
295	context.beginPath();
296	context.fillStyle = 'rgba(255,255,255,0.5)';
297	context.arc(xCoord, yCoord, 3, 0, 6.2830, 0);
298	context.fill();
299	}
300	}
301	}
302	}
303
304	if (!overHotspot) {
305	canvas.style.cursor = 'default';
306	}
307	}
308	this.canvas.addEventListener('mousemove', canvas_onmousemove_func, false);
309	RGraph.AddEventListener(this.id, 'mousemove', canvas_onmousemove_func);
310	}
311
312	// Draw the title if any has been set
313	if (this.Get('chart.title')) {
314	RGraph.DrawTitle(this.canvas,
315	this.Get('chart.title'),
316	(this.canvas.height / 2) - this.radius - 5,
317	this.centerx,
318	this.Get('chart.text.size') + 2);
319	}
320
321	/**
322	* If the canvas is annotatable, do install the event handlers
323	*/
324	if (this.Get('chart.annotatable')) {
325	RGraph.Annotate(this);
326	}
327
328	/**
329	* This bit shows the mini zoom window if requested
330	*/
331	if (this.Get('chart.zoom.mode') == 'thumbnail' \|\| this.Get('chart.zoom.mode') == 'area') {
332	RGraph.ShowZoomWindow(this);
333	}
334
335
336	/**
337	* This function enables resizing
338	*/
339	if (this.Get('chart.resizable')) {
340	RGraph.AllowResizing(this);
341	}
342
343	/**
344	* Fire the RGraph ondraw event
345	*/
346	RGraph.FireCustomEvent(this, 'ondraw');
347	}
348
349	/**
350	* This method draws the rose charts background
351	*/
352	RGraph.Rscatter.prototype.DrawBackground = function ()
353	{
354	this.context.lineWidth = 1;
355
356	// Draw the background grey circles
357	this.context.strokeStyle = '#ccc';
358	for (var i=15; i<this.radius - (document.all ? 5 : 0); i+=15) {// Radius must be greater than 0 for Opera to work
359	//this.context.moveTo(this.centerx + i, this.centery);
360
361	// Radius must be greater than 0 for Opera to work
362	this.context.arc(this.centerx, this.centery, i, 0, (2 * Math.PI), 0);
363	}
364	this.context.stroke();
365
366	// Draw the background lines that go from the center outwards
367	this.context.beginPath();
368	for (var i=15; i<360; i+=15) {
369
370	// Radius must be greater than 0 for Opera to work
371	this.context.arc(this.centerx, this.centery, this.radius, i / 57.3, (i + 0.01) / 57.3, 0);
372
373	this.context.lineTo(this.centerx, this.centery);
374	}
375	this.context.stroke();
376
377	this.context.beginPath();
378	this.context.strokeStyle = 'black';
379
380	// Draw the X axis
381	this.context.moveTo(this.centerx - this.radius, this.centery);
382	this.context.lineTo(this.centerx + this.radius, this.centery);
383
384	// Draw the X ends
385	this.context.moveTo(this.centerx - this.radius, this.centery - 5);
386	this.context.lineTo(this.centerx - this.radius, this.centery + 5);
387	this.context.moveTo(this.centerx + this.radius, this.centery - 5);
388	this.context.lineTo(this.centerx + this.radius, this.centery + 5);
389
390	// Draw the X check marks
391	for (var i=(this.centerx - this.radius); i<(this.centerx + this.radius); i+=20) {
392	this.context.moveTo(i, this.centery - 3);
393	this.context.lineTo(i, this.centery + 3);
394	}
395
396	// Draw the Y check marks
397	for (var i=(this.centery - this.radius); i<(this.centery + this.radius); i+=20) {
398	this.context.moveTo(this.centerx - 3, i);
399	this.context.lineTo(this.centerx + 3, i);
400	}
401
402	// Draw the Y axis
403	this.context.moveTo(this.centerx, this.centery - this.radius);
404	this.context.lineTo(this.centerx, this.centery + this.radius);
405
406	// Draw the Y ends
407	this.context.moveTo(this.centerx - 5, this.centery - this.radius);
408	this.context.lineTo(this.centerx + 5, this.centery - this.radius);
409
410	this.context.moveTo(this.centerx - 5, this.centery + this.radius);
411	this.context.lineTo(this.centerx + 5, this.centery + this.radius);
412
413	// Stroke it
414	this.context.closePath();
415	this.context.stroke();
416	}
417
418
419	/**
420	* This method draws a set of data on the graph
421	*/
422	RGraph.Rscatter.prototype.DrawRscatter = function ()
423	{
424	var data = this.data;
425
426	for (var i=0; i<data.length; ++i) {
427
428	var d1 = data[i][0];
429	var d2 = data[i][1];
430	var a = d1 / (180 / Math.PI); // RADIANS
431	var r = ( (d2 - this.Get('chart.ymin')) / (this.max - this.Get('chart.ymin')) ) * this.radius;
432	var x = Math.sin(a) * r;
433	var y = Math.cos(a) * r;
434	var color = data[i][2] ? data[i][2] : this.Get('chart.colors.default');
435	var tooltip = data[i][3] ? data[i][3] : null;
436
437	if (tooltip && tooltip.length) {
438	this.hasTooltips = true;
439	}
440
441	/**
442	* Account for the correct quadrant
443	*/
444	x = x + this.centerx;
445	y = this.centery - y;
446
447
448	this.DrawTick(x, y, color);
449
450	// Populate the coords array with the coordinates and the tooltip
451	this.coords.push([x, y, color, tooltip]);
452	}
453	}
454
455
456	/**
457	* Unsuprisingly, draws the labels
458	*/
459	RGraph.Rscatter.prototype.DrawLabels = function ()
460	{
461	this.context.lineWidth = 1;
462	var key = this.Get('chart.key');
463
464	// Set the color to black
465	this.context.fillStyle = 'black';
466	this.context.strokeStyle = 'black';
467
468	var r = this.radius;
469	var color = this.Get('chart.text.color');
470	var font_face = this.Get('chart.text.font');
471	var font_size = this.Get('chart.text.size');
472	var context = this.context;
473	var axes = this.Get('chart.labels.axes').toLowerCase();
474
475	this.context.fillStyle = this.Get('chart.text.color');
476
477	// Draw any labels
478	if (typeof(this.Get('chart.labels')) == 'object' && this.Get('chart.labels')) {
479	this.DrawCircularLabels(context, this.Get('chart.labels'), font_face, font_size, r);
480	}
481
482
483	var color = 'rgba(255,255,255,0.8)';
484
485	// The "North" axis labels
486	if (axes.indexOf('n') > -1) {
487	RGraph.Text(context,font_face,font_size,this.centerx,this.centery - ((r) * 0.2),String(this.scale[0]),'center','center',true,false,color);
488	RGraph.Text(context, font_face, font_size, this.centerx, this.centery - ((r) * 0.4), String(this.scale[1]), 'center', 'center', true, false, color);
489	RGraph.Text(context, font_face, font_size, this.centerx, this.centery - ((r) * 0.6), String(this.scale[2]), 'center', 'center', true, false, color);
490	RGraph.Text(context, font_face, font_size, this.centerx, this.centery - ((r) * 0.8), String(this.scale[3]), 'center', 'center', true, false, color);
491	RGraph.Text(context, font_face, font_size, this.centerx, this.centery - r, String(this.scale[4]), 'center', 'center', true, false, color);
492	}
493
494	// The "South" axis labels
495	if (axes.indexOf('s') > -1) {
496	RGraph.Text(context, font_face, font_size, this.centerx, this.centery + ((r) * 0.2), String(this.scale[0]), 'center', 'center', true, false, color);
497	RGraph.Text(context, font_face, font_size, this.centerx, this.centery + ((r) * 0.4), String(this.scale[1]), 'center', 'center', true, false, color);
498	RGraph.Text(context, font_face, font_size, this.centerx, this.centery + ((r) * 0.6), String(this.scale[2]), 'center', 'center', true, false, color);
499	RGraph.Text(context, font_face, font_size, this.centerx, this.centery + ((r) * 0.8), String(this.scale[3]), 'center', 'center', true, false, color);
500	RGraph.Text(context, font_face, font_size, this.centerx, this.centery + r, String(this.scale[4]), 'center', 'center', true, false, color);
501	}
502
503	// The "East" axis labels
504	if (axes.indexOf('e') > -1) {
505	RGraph.Text(context, font_face, font_size, this.centerx + ((r) * 0.2), this.centery, String(this.scale[0]), 'center', 'center', true, false, color);
506	RGraph.Text(context, font_face, font_size, this.centerx + ((r) * 0.4), this.centery, String(this.scale[1]), 'center', 'center', true, false, color);
507	RGraph.Text(context, font_face, font_size, this.centerx + ((r) * 0.6), this.centery, String(this.scale[2]), 'center', 'center', true, false, color);
508	RGraph.Text(context, font_face, font_size, this.centerx + ((r) * 0.8), this.centery, String(this.scale[3]), 'center', 'center', true, false, color);
509	RGraph.Text(context, font_face, font_size, this.centerx + r, this.centery, String(this.scale[4]), 'center', 'center', true, false, color);
510	}
511
512	// The "West" axis labels
513	if (axes.indexOf('w') > -1) {
514	RGraph.Text(context, font_face, font_size, this.centerx - ((r) * 0.2), this.centery, String(this.scale[0]), 'center', 'center', true, false, color);
515	RGraph.Text(context, font_face, font_size, this.centerx - ((r) * 0.4), this.centery, String(this.scale[1]), 'center', 'center', true, false, color);
516	RGraph.Text(context, font_face, font_size, this.centerx - ((r) * 0.6), this.centery, String(this.scale[2]), 'center', 'center', true, false, color);
517	RGraph.Text(context, font_face, font_size, this.centerx - ((r) * 0.8), this.centery, String(this.scale[3]), 'center', 'center', true, false, color);
518	RGraph.Text(context, font_face, font_size, this.centerx - r, this.centery, String(this.scale[4]), 'center', 'center', true, false, color);
519	}
520
521	// Draw the center minimum value (but only if there's at least one axes labels stipulated)
522	if (this.Get('chart.labels.axes').length > 0) {
523	RGraph.Text(context, font_face, font_size, this.centerx, this.centery, this.Get('chart.ymin') > 0 ? String(this.Get('chart.ymin').toFixed(this.Get('chart.scale.decimals'))) : '0', 'center', 'center', true, false, color);
524	}
525
526	/**
527	* Draw the key
528	*/
529	if (key && key.length) {
530	RGraph.DrawKey(this, key, this.Get('chart.colors'));
531	}
532	}
533
534
535	/**
536	* Draws the circular labels that go around the charts
537	*
538	* @param labels array The labels that go around the chart
539	*/
540	RGraph.Rscatter.prototype.DrawCircularLabels = function (context, labels, font_face, font_size, r)
541	{
542	var position = this.Get('chart.labels.position');
543	var r = r + 10;
544
545	for (var i=0; i<labels.length; ++i) {
546
547
548	var a = (360 / labels.length) * (i + 1) - (360 / (labels.length * 2));
549	var a = a - 90 + (this.Get('chart.labels.position') == 'edge' ? ((360 / labels.length) / 2) : 0);
550
551	var x = Math.cos(a / 57.29577866666) * (r + 10);
552	var y = Math.sin(a / 57.29577866666) * (r + 10);
553
554	RGraph.Text(context, font_face, font_size, this.centerx + x, this.centery + y, String(labels[i]), 'center', 'center');
555	}
556	}
557
558
559	/**
560	* Draws a single tickmark
561	*/
562	RGraph.Rscatter.prototype.DrawTick = function (x, y, color)
563	{
564	var tickmarks = this.Get('chart.tickmarks');
565	var ticksize = this.Get('chart.ticksize');
566
567	this.context.strokeStyle = color;
568	this.context.fillStyle = color;
569
570	// Cross
571	if (tickmarks == 'cross') {
572
573	this.context.beginPath();
574	this.context.moveTo(x + ticksize, y + ticksize);
575	this.context.lineTo(x - ticksize, y - ticksize);
576	this.context.stroke();
577
578	this.context.beginPath();
579	this.context.moveTo(x - ticksize, y + ticksize);
580	this.context.lineTo(x + ticksize, y - ticksize);
581	this.context.stroke();
582
583	// Circle
584	} else if (tickmarks == 'circle') {
585
586	this.context.beginPath();
587	this.context.arc(x, y, ticksize, 0, 6.2830, false);
588	this.context.fill();
589
590	// Square
591	} else if (tickmarks == 'square') {
592
593	this.context.beginPath();
594	this.context.fillRect(x - ticksize, y - ticksize, 2 * ticksize, 2 * ticksize);
595	this.context.fill();
596
597	// Diamond shape tickmarks
598	} else if (tickmarks == 'diamond') {
599
600	this.context.beginPath();
601	this.context.moveTo(x, y - ticksize);
602	this.context.lineTo(x + ticksize, y);
603	this.context.lineTo(x, y + ticksize);
604	this.context.lineTo(x - ticksize, y);
605	this.context.closePath();
606	this.context.fill();
607
608	// Plus style tickmarks
609	} else if (tickmarks == 'plus') {
610
611	this.context.lineWidth = 1;
612
613	this.context.beginPath();
614	this.context.moveTo(x, y - ticksize);
615	this.context.lineTo(x, y + ticksize);
616	this.context.moveTo(x - ticksize, y);
617	this.context.lineTo(x + ticksize, y);
618	this.context.stroke();
619	}
620	}

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

Download in other formats: