Context Navigation

source: Dev/branches/jQueryUI/client/RGraph/libraries/RGraph.odo.js @ 249

Last change on this file since 249 was 249, checked in by hendrikvanantwerpen, 13 years ago

This one's for Subversion, because it's so close...

First widget (stripped down sequencer).
Seperated client and server code in two direcotry trees.

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: