Context Navigation

source: Dev/branches/rest-dojo-ui/Demo/RGraph/libraries/RGraph.odo.js @ 312

Last change on this file since 312 was 312, checked in by jkraaijeveld, 13 years ago

File size: 32.2 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 odometer constructor. Pass it the ID of the canvas tag, the start value of the odo,
19	* the end value, and the value that the pointer should point to.
20	*
21	* @param string id The ID of the canvas tag
22	* @param int start The start value of the Odo
23	* @param int end The end value of the odo
24	* @param int value The indicated value (what the needle points to)
25	*/
26	RGraph.Odometer = function (id, start, end, value)
27	{
28	this.id = id
29	this.canvas = document.getElementById(id);
30	this.context = this.canvas.getContext('2d');
31	this.canvas.__object__ = this;
32	this.type = 'odo';
33	this.isRGraph = true;
34	this.start = start;
35	this.end = end;
36	this.value = value;
37
38
39	/**
40	* Compatibility with older browsers
41	*/
42	RGraph.OldBrowserCompat(this.context);
43
44
45	this.properties = {
46	'chart.radius': null,
47	'chart.value.text': false,
48	'chart.needle.color': 'black',
49	'chart.needle.width': 2,
50	'chart.needle.head': true,
51	'chart.needle.tail': true,
52	'chart.needle.type': 'pointer',
53	'chart.needle.extra': [],
54	'chart.needle.triangle.border': '#aaa',
55	'chart.text.size': 10,
56	'chart.text.color': 'black',
57	'chart.text.font': 'Verdana',
58	'chart.green.max': end * 0.75,
59	'chart.red.min': end * 0.9,
60	'chart.green.color': 'green',
61	'chart.yellow.color': 'yellow',
62	'chart.red.color': 'red',
63	'chart.green.solid': false,
64	'chart.yellow.solid': false,
65	'chart.red.solid': false,
66	'chart.label.area': 35,
67	'chart.gutter.left': 25,
68	'chart.gutter.right': 25,
69	'chart.gutter.top': 25,
70	'chart.gutter.bottom': 25,
71	'chart.title': '',
72	'chart.title.background': null,
73	'chart.title.hpos': null,
74	'chart.title.vpos': null,
75	'chart.contextmenu': null,
76	'chart.linewidth': 1,
77	'chart.shadow.inner': false,
78	'chart.shadow.inner.color': 'black',
79	'chart.shadow.inner.offsetx': 3,
80	'chart.shadow.inner.offsety': 3,
81	'chart.shadow.inner.blur': 6,
82	'chart.shadow.outer': false,
83	'chart.shadow.outer.color': '#666',
84	'chart.shadow.outer.offsetx': 0,
85	'chart.shadow.outer.offsety': 0,
86	'chart.shadow.outer.blur': 15,
87	'chart.annotatable': false,
88	'chart.annotate.color': 'black',
89	'chart.scale.decimals': 0,
90	'chart.zoom.factor': 1.5,
91	'chart.zoom.fade.in': true,
92	'chart.zoom.fade.out': true,
93	'chart.zoom.hdir': 'right',
94	'chart.zoom.vdir': 'down',
95	'chart.zoom.frames': 10,
96	'chart.zoom.delay': 50,
97	'chart.zoom.shadow': true,
98	'chart.zoom.mode': 'canvas',
99	'chart.zoom.thumbnail.width': 75,
100	'chart.zoom.thumbnail.height': 75,
101	'chart.zoom.background': true,
102	'chart.zoom.action': 'zoom',
103	'chart.resizable': false,
104	'chart.resize.handle.adjust': [0,0],
105	'chart.resize.handle.background': null,
106	'chart.units.pre': '',
107	'chart.units.post': '',
108	'chart.border': false,
109	'chart.border.color1': '#BEBCB0',
110	'chart.border.color2': '#F0EFEA',
111	'chart.border.color3': '#BEBCB0',
112	'chart.tickmarks.highlighted': false,
113	'chart.zerostart': false,
114	'chart.labels': null,
115	'chart.units.pre': '',
116	'chart.units.post': '',
117	'chart.value.units.pre': '',
118	'chart.value.units.post': '',
119	'chart.key': [],
120	'chart.key.background': 'white',
121	'chart.key.position': 'graph',
122	'chart.key.shadow': false,
123	'chart.key.shadow.color': '#666',
124	'chart.key.shadow.blur': 3,
125	'chart.key.shadow.offsetx': 2,
126	'chart.key.shadow.offsety': 2,
127	'chart.key.position.gutter.boxed': true,
128	'chart.key.position.x': null,
129	'chart.key.position.y': null,
130	'chart.key.halign': 'right',
131	'chart.key.color.shape': 'square',
132	'chart.key.rounded': true,
133	'chart.key.text.size': 10,
134	}
135	}
136
137
138	/**
139	* A peudo setter
140	*
141	* @param name string The name of the property to set
142	* @param value mixed The value of the property
143	*/
144	RGraph.Odometer.prototype.Set = function (name, value)
145	{
146	if (name == 'chart.needle.style') {
147	alert('[RGRAPH] The RGraph property chart.needle.style has changed to chart.needle.color');
148	}
149
150	if (name == 'chart.needle.thickness') {
151	name = 'chart.needle.width';
152	}
153
154	this.properties[name.toLowerCase()] = value;
155	}
156
157
158	/**
159	* A getter
160	*
161	* @param name string The name of the property to get
162	*/
163	RGraph.Odometer.prototype.Get = function (name)
164	{
165	return this.properties[name.toLowerCase()];
166	}
167
168
169	/**
170	* Draws the odometer
171	*/
172	RGraph.Odometer.prototype.Draw = function ()
173	{
174	/**
175	* Fire the onbeforedraw event
176	*/
177	RGraph.FireCustomEvent(this, 'onbeforedraw');
178
179
180	/**
181	* This is new in May 2011 and facilitates indiviual gutter settings,
182	* eg chart.gutter.left
183	*/
184	this.gutterLeft = this.Get('chart.gutter.left');
185	this.gutterRight = this.Get('chart.gutter.right');
186	this.gutterTop = this.Get('chart.gutter.top');
187	this.gutterBottom = this.Get('chart.gutter.bottom');
188
189	// Work out a few things
190	this.radius = Math.min((RGraph.GetWidth(this) - this.gutterLeft - this.gutterRight) / 2, (RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom) / 2) - (this.Get('chart.border') ? 25 : 0);
191	this.diameter = 2 * this.radius;
192	this.centerx = RGraph.GetWidth(this) / 2;
193	this.centery = RGraph.GetHeight(this) / 2;
194	this.range = this.end - this.start;
195
196	if (typeof(this.Get('chart.radius')) == 'number') {
197	this.radius = this.Get('chart.radius');
198	}
199
200	/**
201	* Move the centerx if the key is defined
202	*/
203	if (this.Get('chart.key').length > 0 && this.canvas.width > this.canvas.height) {
204	this.centerx = 5 + this.radius;
205	}
206
207	this.context.lineWidth = this.Get('chart.linewidth');
208
209	// Draw the background
210	this.DrawBackground();
211
212	// And lastly, draw the labels
213	this.DrawLabels();
214
215	// Draw the needle
216	this.DrawNeedle(this.value, this.Get('chart.needle.color'));
217
218	/**
219	* Draw any extra needles
220	*/
221	if (this.Get('chart.needle.extra').length > 0) {
222	for (var i=0; i<this.Get('chart.needle.extra').length; ++i) {
223	var needle = this.Get('chart.needle.extra')[i];
224	this.DrawNeedle(needle[0], needle[1], needle[2]);
225	}
226	}
227
228	/**
229	* Draw the key if requested
230	*/
231	if (this.Get('chart.key').length > 0) {
232	// Build a colors array out of the needle colors
233	var colors = [this.Get('chart.needle.color')];
234
235	if (this.Get('chart.needle.extra').length > 0) {
236	for (var i=0; i<this.Get('chart.needle.extra').length; ++i) {
237	var needle = this.Get('chart.needle.extra')[i];
238	colors.push(needle[1]);
239	}
240	}
241
242	RGraph.DrawKey(this, this.Get('chart.key'), colors);
243	}
244
245
246	/**
247	* Setup the context menu if required
248	*/
249	if (this.Get('chart.contextmenu')) {
250	RGraph.ShowContext(this);
251	}
252
253	/**
254	* If the canvas is annotatable, do install the event handlers
255	*/
256	if (this.Get('chart.annotatable')) {
257	RGraph.Annotate(this);
258	}
259
260	/**
261	* This bit shows the mini zoom window if requested
262	*/
263	if (this.Get('chart.zoom.mode') == 'thumbnail' \|\| this.Get('chart.zoom.mode') == 'area') {
264	RGraph.ShowZoomWindow(this);
265	}
266
267
268	/**
269	* This function enables resizing
270	*/
271	if (this.Get('chart.resizable')) {
272	RGraph.AllowResizing(this);
273	}
274
275	/**
276	* Fire the RGraph ondraw event
277	*/
278	RGraph.FireCustomEvent(this, 'ondraw');
279	}
280
281	/**
282	* Draws the background
283	*/
284	RGraph.Odometer.prototype.DrawBackground = function ()
285	{
286	this.context.beginPath();
287
288	/**
289	* Turn on the shadow if need be
290	*/
291	if (this.Get('chart.shadow.outer')) {
292	RGraph.SetShadow(this, this.Get('chart.shadow.outer.color'), this.Get('chart.shadow.outer.offsetx'), this.Get('chart.shadow.outer.offsety'), this.Get('chart.shadow.outer.blur'));
293	}
294
295	var backgroundColor = '#eee';
296
297	// Draw the grey border
298	this.context.fillStyle = backgroundColor;
299	this.context.arc(this.centerx, this.centery, this.radius, 0.0001, 6.28, false);
300	this.context.fill();
301
302	/**
303	* Turn off the shadow
304	*/
305	RGraph.NoShadow(this);
306
307
308	// Draw a circle
309	this.context.strokeStyle = '#666';
310	this.context.arc(this.centerx, this.centery, this.radius, 0, 6.28, false);
311
312	// Now draw a big white circle to make the lines appear as tick marks
313	// This is solely for Chrome
314	this.context.fillStyle = backgroundColor;
315	this.context.arc(this.centerx, this.centery, this.radius, 0, 6.28, false);
316	this.context.fill();
317
318	/**
319	* Draw more tickmarks
320	*/
321	this.context.beginPath();
322	this.context.strokeStyle = '#bbb';
323
324	for (var i=0; i<=360; i+=3) {
325	this.context.arc(this.centerx, this.centery, this.radius, 0, RGraph.degrees2Radians(i), false);
326	this.context.lineTo(this.centerx, this.centery);
327	}
328	this.context.stroke();
329
330	this.context.beginPath();
331	this.context.lineWidth = 1;
332	this.context.strokeStyle = 'black';
333
334	// Now draw a big white circle to make the lines appear as tick marks
335	this.context.fillStyle = backgroundColor;
336	this.context.strokeStyle = backgroundColor;
337	this.context.arc(this.centerx, this.centery, this.radius - 5, 0, 6.28, false);
338	this.context.fill();
339	this.context.stroke();
340
341	// Gray lines at 18 degree intervals
342	this.context.beginPath();
343	this.context.strokeStyle = '#ddd';
344	for (var i=0; i<360; i+=18) {
345	this.context.arc(this.centerx, this.centery, this.radius, 0, RGraph.degrees2Radians(i), false);
346	this.context.lineTo(this.centerx, this.centery);
347	}
348	this.context.stroke();
349
350	// Redraw the outer circle
351	this.context.beginPath();
352	this.context.strokeStyle = 'black';
353	this.context.arc(this.centerx, this.centery, this.radius, 0, 6.2830, false);
354	this.context.stroke();
355
356	/**
357	* Now draw the center bits shadow if need be
358	*/
359	if (this.Get('chart.shadow.inner')) {
360	this.context.beginPath();
361	RGraph.SetShadow(this, this.Get('chart.shadow.inner.color'), this.Get('chart.shadow.inner.offsetx'), this.Get('chart.shadow.inner.offsety'), this.Get('chart.shadow.inner.blur'));
362	this.context.arc(this.centerx, this.centery, this.radius - this.Get('chart.label.area'), 0, 6.28, 0);
363	this.context.fill();
364	this.context.stroke();
365
366	/**
367	* Turn off the shadow
368	*/
369	RGraph.NoShadow(this);
370	}
371
372	/*******************************************************
373	* Draw the green area
374	*******************************************************/
375	if (this.Get('chart.green.solid')) {
376	var greengrad = this.Get('chart.green.color');
377
378	} else {
379	var greengrad = this.context.createRadialGradient(this.centerx,this.centery,0,this.centerx,this.centery,this.radius);
380	greengrad.addColorStop(0, 'white');
381	greengrad.addColorStop(1, this.Get('chart.green.color'));
382	}
383
384	// Draw the "tick highlight"
385	if (this.Get('chart.tickmarks.highlighted')) {
386	this.context.beginPath();
387	this.context.lineWidth = 5;
388	this.context.strokeStyle = greengrad;
389	this.context.arc(this.centerx, this.centery, this.radius - 2.5,
390
391	-1.57,
392	(((this.Get('chart.green.max') - this.start)/ (this.end - this.start)) * 6.2830) - 1.57,
393	0);
394
395	this.context.stroke();
396
397	this.context.lineWidth = 1;
398	}
399
400	this.context.beginPath();
401	this.context.fillStyle = greengrad;
402	this.context.arc(
403	this.centerx,
404	this.centery,
405	this.radius - this.Get('chart.label.area'),
406	-1.57,
407	(((this.Get('chart.green.max') - this.start)/ (this.end - this.start)) * 6.2830) - 1.57,
408	false
409	);
410	this.context.lineTo(this.centerx, this.centery);
411	this.context.closePath();
412	this.context.fill();
413
414
415	/*******************************************************
416	* Draw the yellow area
417	*******************************************************/
418	if (this.Get('chart.yellow.solid')) {
419	var yellowgrad = this.Get('chart.yellow.color');
420
421	} else {
422	var yellowgrad = this.context.createRadialGradient(this.centerx,this.centery,0,this.centerx,this.centery,this.radius);
423	yellowgrad.addColorStop(0, 'white');
424	yellowgrad.addColorStop(1, this.Get('chart.yellow.color'));
425	}
426
427	// Draw the "tick highlight"
428	if (this.Get('chart.tickmarks.highlighted')) {
429	this.context.beginPath();
430	this.context.lineWidth = 5;
431	this.context.strokeStyle = yellowgrad;
432	this.context.arc(this.centerx, this.centery, this.radius - 2.5, (
433
434	((this.Get('chart.green.max') - this.start) / (this.end - this.start)) * 6.2830) - 1.57,
435	(((this.Get('chart.red.min') - this.start) / (this.end - this.start)) * 6.2830) - 1.57,
436	0);
437
438	this.context.stroke();
439
440	this.context.lineWidth = 1;
441	}
442
443	this.context.beginPath();
444	this.context.fillStyle = yellowgrad;
445	this.context.arc(
446	this.centerx,
447	this.centery,
448	this.radius - this.Get('chart.label.area'),
449	( ((this.Get('chart.green.max') -this.start) / (this.end - this.start)) * 6.2830) - 1.57,
450	( ((this.Get('chart.red.min') - this.start) / (this.end - this.start)) * 6.2830) - 1.57,
451	false
452	);
453	this.context.lineTo(this.centerx, this.centery);
454	this.context.closePath();
455	this.context.fill();
456
457	/*******************************************************
458	* Draw the red area
459	*******************************************************/
460	if (this.Get('chart.red.solid')) {
461	var redgrad = this.Get('chart.red.color');
462
463	} else {
464	var redgrad = this.context.createRadialGradient(this.centerx,
465	this.centery,
466	0,
467	this.centerx,
468	this.centery,
469	this.radius);
470	redgrad.addColorStop(0, 'white');
471	redgrad.addColorStop(1, this.Get('chart.red.color'));
472	}
473
474
475	// Draw the "tick highlight"
476	if (this.Get('chart.tickmarks.highlighted')) {
477	this.context.beginPath();
478	this.context.lineWidth = 5;
479	this.context.strokeStyle = redgrad;
480	this.context.arc(this.centerx, this.centery, this.radius - 2.5,(((this.Get('chart.red.min') - this.start) / (this.end - this.start)) * 6.2830) - 1.57,(2 * Math.PI) - (0.5 * Math.PI),0);
481	this.context.stroke();
482
483	this.context.lineWidth = 1;
484	}
485
486	this.context.beginPath();
487	this.context.fillStyle = redgrad;
488	this.context.strokeStyle = redgrad;
489	this.context.arc(
490	this.centerx,
491	this.centery,
492	this.radius - this.Get('chart.label.area'),
493	(((this.Get('chart.red.min') - this.start) / (this.end - this.start)) * 6.2830) - 1.57,
494	6.2830 - (0.25 * 6.2830),
495	false
496	);
497	this.context.lineTo(this.centerx, this.centery);
498	this.context.closePath();
499	this.context.fill();
500
501
502	/**
503	* Draw the thick border
504	*/
505	if (this.Get('chart.border')) {
506	var grad = this.context.createRadialGradient(this.centerx, this.centery, this.radius, this.centerx, this.centery, this.radius + 15);
507	grad.addColorStop(1, this.Get('chart.border.color1'));
508	grad.addColorStop(0.5, this.Get('chart.border.color2'));
509	grad.addColorStop(0, this.Get('chart.border.color3'));
510
511	this.context.beginPath();
512	this.context.fillStyle = grad;
513	this.context.strokeStyle = grad;
514	this.context.lineWidth = 22;
515	this.context.lineCap = 'round';
516	this.context.arc(this.centerx, this.centery, this.radius + 9, 0, 6.2830, 0);
517	this.context.stroke();
518	}
519
520	// Put the linewidth back to what it was
521	this.context.lineWidth = this.Get('chart.linewidth');
522
523
524	/**
525	* Draw the title if specified
526	*/
527	if (this.Get('chart.title')) {
528	RGraph.DrawTitle(this.canvas,
529	this.Get('chart.title'),
530	this.centery - this.radius,
531	null,
532	this.Get('chart.text.size') + 2);
533	}
534
535
536	// Draw the big tick marks
537	if (!this.Get('chart.tickmarks.highlighted')) {
538	for (var i=18; i<=360; i+=36) {
539	this.context.beginPath();
540	this.context.strokeStyle = '#999';
541	this.context.lineWidth = 2;
542	this.context.arc(this.centerx, this.centery, this.radius - 1, RGraph.degrees2Radians(i), RGraph.degrees2Radians(i+0.01), false);
543	this.context.arc(this.centerx, this.centery, this.radius - 7, RGraph.degrees2Radians(i), RGraph.degrees2Radians(i+0.01), false);
544	this.context.stroke();
545	}
546	}
547	}
548
549
550	/**
551	* Draws the needle of the odometer
552	*
553	* @param number value The value to represent
554	* @param string color The color of the needle
555	* @param number The OPTIONAL length of the needle
556	*/
557	RGraph.Odometer.prototype.DrawNeedle = function (value, color)
558	{
559	// The optional length of the needle
560	var length = arguments[2] ? arguments[2] : this.radius - this.Get('chart.label.area');
561
562	// ===== First draw a grey background circle =====
563
564	this.context.fillStyle = '#999';
565
566	this.context.beginPath();
567	this.context.moveTo(this.centerx, this.centery);
568	this.context.arc(this.centerx, this.centery, 10, 0, 6.28, false);
569	this.context.fill();
570	this.context.closePath();
571
572	this.context.fill();
573
574	// ===============================================
575
576	this.context.fillStyle = color
577	this.context.strokeStyle = '#666';
578
579	// Draw the centre bit
580	this.context.beginPath();
581	this.context.moveTo(this.centerx, this.centery);
582	this.context.arc(this.centerx, this.centery, 8, 0, 6.28, false);
583	this.context.fill();
584	this.context.closePath();
585
586	this.context.stroke();
587	this.context.fill();
588
589	if (this.Get('chart.needle.type') == 'pointer') {
590
591	this.context.strokeStyle = color;
592	this.context.lineWidth = this.Get('chart.needle.width');
593	this.context.lineCap = 'round';
594	this.context.lineJoin = 'round';
595
596	// Draw the needle
597	this.context.beginPath();
598	// The trailing bit on the opposite side of the dial
599	this.context.beginPath();
600	this.context.moveTo(this.centerx, this.centery);
601
602	if (this.Get('chart.needle.tail')) {
603
604	this.context.arc(this.centerx,
605	this.centery,
606	20,
607	(((value / this.range) * 360) + 90) / 57.3,
608	(((value / this.range) * 360) + 90 + 0.01) / 57.3, // The 0.01 avoids a bug in ExCanvas and Chrome 6
609	false
610	);
611	}
612
613	// Draw the long bit on the opposite side
614	this.context.arc(this.centerx,
615	this.centery,
616	length - 10,
617	(((value / this.range) * 360) - 90) / 57.3,
618	(((value / this.range) * 360) - 90 + 0.1 ) / 57.3, // The 0.1 avoids a bug in ExCanvas and Chrome 6
619	false
620	);
621	this.context.closePath();
622
623	//this.context.stroke();
624	//this.context.fill();
625
626
627	} else if (this.Get('chart.needle.type') == 'triangle') {
628
629	this.context.lineWidth = 0.01;
630	this.context.lineEnd = 'square';
631	this.context.lineJoin = 'miter';
632
633	/**
634	* This draws the version of the pointer that becomes the border
635	*/
636	this.context.beginPath();
637	this.context.fillStyle = this.Get('chart.needle.triangle.border');
638	this.context.arc(this.centerx, this.centery, 11, (((value / this.range) * 360)) / 57.3, ((((value / this.range) * 360)) + 0.01) / 57.3, 0);
639	this.context.arc(this.centerx, this.centery, 11, (((value / this.range) * 360) + 180) / 57.3, ((((value / this.range) * 360) + 180) + 0.01)/ 57.3, 0);
640	this.context.arc(this.centerx, this.centery, length - 5, (((value / this.range) * 360) - 90) / 57.3, ((((value / this.range) * 360) - 90) / 57.3) + 0.01, 0);
641	this.context.closePath();
642	this.context.fill();
643
644	this.context.beginPath();
645	this.context.arc(this.centerx, this.centery, 15, 0, 6.28, 0);
646	this.context.closePath();
647	this.context.fill();
648
649	// This draws the pointer
650	this.context.beginPath();
651	this.context.strokeStyle = 'black';
652	this.context.fillStyle = color;
653	this.context.arc(this.centerx, this.centery, 7, (((value / this.range) * 360)) / 57.3, ((((value / this.range) * 360)) + 0.01) / 57.3, 0);
654	this.context.arc(this.centerx, this.centery, 7, (((value / this.range) * 360) + 180) / 57.3, ((((value / this.range) * 360) + 180) + 0.01)/ 57.3, 0);
655	this.context.arc(this.centerx, this.centery, length - 13, (((value / this.range) * 360) - 90) / 57.3, ((((value / this.range) * 360) - 90) / 57.3) + 0.01, 0);
656	this.context.closePath();
657	this.context.stroke();
658	this.context.fill();
659
660	/**
661	* This is here to accomodate the MSIE/ExCanvas combo
662	*/
663	this.context.beginPath();
664	this.context.arc(this.centerx, this.centery, 7, 0, 6.28, 0);
665	this.context.closePath();
666	this.context.fill();
667	}
668
669
670	this.context.stroke();
671	this.context.fill();
672
673	// Draw the mini center circle
674	this.context.beginPath();
675	this.context.fillStyle = color;
676	this.context.arc(this.centerx, this.centery, this.Get('chart.needle.type') == 'pointer' ? 7 : 12, 0.01, 6.2830, false);
677	this.context.fill();
678
679	// This draws the arrow at the end of the line
680	if (this.Get('chart.needle.head') && this.Get('chart.needle.type') == 'pointer') {
681	this.context.lineWidth = 1;
682	this.context.fillStyle = color;
683
684	// round, bevel, miter
685	this.context.lineJoin = 'miter';
686	this.context.lineCap = 'butt';
687
688	this.context.beginPath();
689	this.context.arc(this.centerx, this.centery, length - 5, (((value / this.range) * 360) - 90) / 57.3, (((value / this.range) * 360) - 90 + 0.1) / 57.3, false);
690
691	this.context.arc(this.centerx,
692	this.centery,
693	length - 20,
694	RGraph.degrees2Radians( ((value / this.range) * 360) - (length < 60 ? 80 : 85) ),
695	RGraph.degrees2Radians( ((value / this.range) * 360) - (length < 60 ? 100 : 95) ),
696	1);
697	this.context.closePath();
698
699	this.context.fill();
700	//this.context.stroke();
701	}
702
703	/**
704	* Draw a white circle at the centre
705	*/
706	this.context.beginPath();
707	this.context.fillStyle = 'gray';
708	this.context.moveTo(this.centerx, this.centery);
709	this.context.arc(this.centerx,this.centery,2,0,6.2795,false);
710	this.context.closePath();
711
712	this.context.fill();
713	}
714
715	/**
716	* Draws the labels for the Odo
717	*/
718	RGraph.Odometer.prototype.DrawLabels = function ()
719	{
720	var context = this.context;
721	var size = this.Get('chart.text.size');
722	var font = this.Get('chart.text.font');
723	var centerx = this.centerx;
724	var centery = this.centery;
725	var r = this.radius - (this.Get('chart.label.area') / 2);
726	var start = this.start;
727	var end = this.end;
728	var decimals = this.Get('chart.scale.decimals');
729	var labels = this.Get('chart.labels');
730	var units_pre = this.Get('chart.units.pre');
731	var units_post = this.Get('chart.units.post');
732
733	context.beginPath();
734	context.fillStyle = this.Get('chart.text.color');
735
736	/**
737	* If label are specified, use those
738	*/
739	if (labels) {
740	for (var i=0; i<labels.length; ++i) {
741
742	RGraph.Text(context,
743	font,
744	size,
745	centerx + (Math.cos(((i / labels.length) * 6.28) - 1.57) * (this.radius - (this.Get('chart.label.area') / 2) ) ), // Sin A = Opp / Hyp
746	centery + (Math.sin(((i / labels.length) * 6.28) - 1.57) * (this.radius - (this.Get('chart.label.area') / 2) ) ), // Cos A = Adj / Hyp
747	String(units_pre + labels[i] + units_post),
748	'center',
749	'center');
750	}
751
752	/**
753	* If not, use the maximum value
754	*/
755	} else {
756	RGraph.Text(context, font, size, centerx + (0.588 * r ), centery - (0.809 * r ), String(units_pre + (((end - start) * (1/10)) + start).toFixed(decimals) + units_post), 'center', 'center', false, 36);
757	RGraph.Text(context, font, size, centerx + (0.951 * r ), centery - (0.309 * r), String(units_pre + (((end - start) * (2/10)) + start).toFixed(decimals) + units_post), 'center', 'center', false, 72);
758	RGraph.Text(context, font, size, centerx + (0.949 * r), centery + (0.287 * r), String(units_pre + (((end - start) * (3/10)) + start).toFixed(decimals) + units_post), 'center', 'center', false, 108);
759	RGraph.Text(context, font, size, centerx + (0.588 * r ), centery + (0.809 * r ), String(units_pre + (((end - start) * (4/10)) + start).toFixed(decimals) + units_post), 'center', 'center', false, 144);
760	RGraph.Text(context, font, size, centerx, centery + r, String(units_pre + (((end - start) * (5/10)) + start).toFixed(decimals) + units_post), 'center', 'center', false, 180);
761	RGraph.Text(context, font, size, centerx - (0.588 * r ), centery + (0.809 * r ), String(units_pre + (((end - start) * (6/10)) + start).toFixed(decimals) + units_post), 'center', 'center', false, 216);
762	RGraph.Text(context, font, size, centerx - (0.949 * r), centery + (0.300 * r), a = String(units_pre + (((end - start) * (7/10)) + start).toFixed(decimals) + units_post), 'center', 'center', false, 252);
763	RGraph.Text(context, font, size, centerx - (0.951 * r), centery - (0.309 * r), String(units_pre + (((end - start) * (8/10)) + start).toFixed(decimals) + units_post), 'center', 'center', false, 288);
764	RGraph.Text(context, font, size, centerx - (0.588 * r ), centery - (0.809 * r ), String(units_pre + (((end - start) * (9/10)) + start).toFixed(decimals) + units_post), 'center', 'center', false, 324);
765	RGraph.Text(context, font, size, centerx, centery - r, this.Get('chart.zerostart') ? units_pre + String(this.start) + units_post : String(units_pre + (((end - start) * (10/10)) + start).toFixed(decimals) + units_post), 'center', 'center', false, 360);
766	}
767
768	this.context.fill();
769
770	/**
771	* Draw the text label below the center point
772	*/
773	if (this.Get('chart.value.text')) {
774	context.strokeStyle = 'black';
775	RGraph.Text(context, font, size + 2, centerx, centery + size + 2 + 10, String(this.Get('chart.value.units.pre') + this.value + this.Get('chart.value.units.post')), 'center', 'center', true, null, 'white');
776	}
777	}

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

Download in other formats: