source: Dev/trunk/RGraph/libraries/RGraph.odo.js @ 107

Last change on this file since 107 was 77, checked in by fpvanagthoven, 14 years ago

RGraph
File size: 32.2 KB
RevLine 
[77]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.