source: Dev/trunk/RGraph/libraries/RGraph.hprogress.js @ 212

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

RGraph
File size: 22.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 progress bar constructor
19    *
20    * @param int id    The ID of the canvas tag
21    * @param int value The indicated value of the meter.
22    * @param int max   The end value (the upper most) of the meter
23    */
24    RGraph.HProgress = function (id, value, max)
25    {
26        this.id                = id;
27        this.max               = max;
28        this.value             = value;
29        this.canvas            = document.getElementById(id);
30        this.context           = this.canvas.getContext('2d');
31        this.canvas.__object__ = this;
32        this.type              = 'hprogress';
33        this.coords            = [];
34        this.isRGraph          = true;
35
36
37        /**
38        * Compatibility with older browsers
39        */
40        RGraph.OldBrowserCompat(this.context);
41
42        this.properties = {
43            'chart.min':                0,
44            'chart.colors':             ['#0c0'],
45            'chart.tickmarks':          true,
46            'chart.tickmarks.color':    'black',
47            'chart.tickmarks.inner':    false,
48            'chart.gutter.left':        25,
49            'chart.gutter.right':       25,
50            'chart.gutter.top':         25,
51            'chart.gutter.bottom':      25,
52            'chart.numticks':           10,
53            'chart.numticks.inner':     50,
54            'chart.background.color':   '#eee',
55            'chart.shadow':             false,
56            'chart.shadow.color':       'rgba(0,0,0,0.5)',
57            'chart.shadow.blur':        3,
58            'chart.shadow.offsetx':     3,
59            'chart.shadow.offsety':     3,
60            'chart.title':              '',
61            'chart.title.background':   null,
62            'chart.title.hpos':         null,
63            'chart.title.vpos':         null,
64            'chart.width':              0,
65            'chart.height':             0,
66            'chart.text.size':          10,
67            'chart.text.color':         'black',
68            'chart.text.font':          'Verdana',
69            'chart.contextmenu':        null,
70            'chart.units.pre':          '',
71            'chart.units.post':         '',
72            'chart.tooltips':           [],
73            'chart.tooltips.effect':    'fade',
74            'chart.tooltips.css.class': 'RGraph_tooltip',
75            'chart.tooltips.highlight': true,
76            'chart.highlight.stroke':   'black',
77            'chart.highlight.fill':     'rgba(255,255,255,0.5)',
78            'chart.annotatable':        false,
79            'chart.annotate.color':     'black',
80            'chart.zoom.mode':          'canvas',
81            'chart.zoom.factor':        1.5,
82            'chart.zoom.fade.in':       true,
83            'chart.zoom.fade.out':      true,
84            'chart.zoom.hdir':          'right',
85            'chart.zoom.vdir':          'down',
86            'chart.zoom.frames':        10,
87            'chart.zoom.delay':         50,
88            'chart.zoom.shadow':        true,
89            'chart.zoom.background':    true,
90            'chart.zoom.thumbnail.width': 100,
91            'chart.zoom.thumbnail.height': 100,
92            'chart.arrows':             false,
93            'chart.margin':             0,
94            'chart.resizable':              false,
95            'chart.resize.handle.adjust':   [0,0],
96            'chart.resize.handle.background': null,
97            'chart.label.inner':        false,
98            'chart.adjustable':         false,
99            'chart.scale.decimals':     0,
100            'chart.key':                [],
101            'chart.key.background':     'white',
102            'chart.key.position':       'gutter',
103            'chart.key.halign':             'right',
104            'chart.key.shadow':         false,
105            'chart.key.shadow.color':   '#666',
106            'chart.key.shadow.blur':    3,
107            'chart.key.shadow.offsetx': 2,
108            'chart.key.shadow.offsety': 2,
109            'chart.key.position.gutter.boxed': false,
110            'chart.key.position.x':     null,
111            'chart.key.position.y':     null,
112            'chart.key.color.shape':    'square',
113            'chart.key.rounded':        true,
114            'chart.key.linewidth':      1,
115            'chart.key.color.shape':    'square',
116            'chart.labels.position':     'bottom'
117        }
118
119        // Check for support
120        if (!this.canvas) {
121            alert('[PROGRESS] No canvas support');
122            return;
123        }
124    }
125
126
127    /**
128    * A generic setter
129    *
130    * @param string name  The name of the property to set
131    * @param string value The value of the poperty
132    */
133    RGraph.HProgress.prototype.Set = function (name, value)
134    {
135        this.properties[name.toLowerCase()] = value;
136    }
137
138
139    /**
140    * A generic getter
141    *
142    * @param string name  The name of the property to get
143    */
144    RGraph.HProgress.prototype.Get = function (name)
145    {
146        return this.properties[name.toLowerCase()];
147    }
148
149
150    /**
151    * Draws the progress bar
152    */
153    RGraph.HProgress.prototype.Draw = function ()
154    {
155        /**
156        * Fire the onbeforedraw event
157        */
158        RGraph.FireCustomEvent(this, 'onbeforedraw');
159
160        /**
161        * Clear all of this canvases event handlers (the ones installed by RGraph)
162        */
163        RGraph.ClearEventListeners(this.id);
164       
165        /**
166        * This is new in May 2011 and facilitates indiviual gutter settings,
167        * eg chart.gutter.left
168        */
169        this.gutterLeft   = this.Get('chart.gutter.left');
170        this.gutterRight  = this.Get('chart.gutter.right');
171        this.gutterTop    = this.Get('chart.gutter.top');
172        this.gutterBottom = this.Get('chart.gutter.bottom');
173
174        // Figure out the width and height
175        this.width  = RGraph.GetWidth(this) - this.gutterLeft - this.gutterRight;
176        this.height = RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom;
177        this.coords = [];
178
179        this.Drawbar();
180        this.DrawTickMarks();
181        this.DrawLabels();
182
183        this.context.stroke();
184        this.context.fill();
185
186        /**
187        * Setup the context menu if required
188        */
189        if (this.Get('chart.contextmenu')) {
190            RGraph.ShowContext(this);
191        }
192       
193        /**
194        * Alternatively, show the tooltip if requested
195        */
196        if (typeof(this.Get('chart.tooltips')) == 'function' || this.Get('chart.tooltips').length) {
197
198            // Need to register this object for redrawing
199            RGraph.Register(this);
200
201            /**
202            * Install the window onclick handler
203            */
204            var window_onclick = function ()
205            {
206                RGraph.Redraw();
207            }
208            window.addEventListener('click', window_onclick, false);
209            RGraph.AddEventListener('window_' + this.id, 'click', window_onclick);
210
211
212            /**
213            * Install the onclick event handler for the tooltips
214            */
215            var canvas_onclick_func = function (e)
216            {
217                e = RGraph.FixEventObject(e);
218
219                var canvas = document.getElementById(this.id);
220                var obj = canvas.__object__;
221
222                /**
223                * Redraw the graph first, in effect resetting the graph to as it was when it was first drawn
224                * This "deselects" any already selected bar
225                */
226                RGraph.Redraw();
227   
228                /**
229                * Get the mouse X/Y coordinates
230                */
231                var mouseCoords = RGraph.getMouseXY(e);
232
233                /**
234                * Loop through the bars determining if the mouse is over a bar
235                */
236                for (var i=0; i<obj.coords.length; i++) {
237
238                    var mouseX = mouseCoords[0];
239                    var mouseY = mouseCoords[1];
240                    var left   = obj.coords[i][0];
241                    var top    = obj.coords[i][1];
242                    var width  = obj.coords[i][2];
243                    var height = obj.coords[i][3];
244                    var idx    = i;
245
246                    if (mouseX >= left && mouseX <= (left + width) && mouseY >= top && mouseY <= (top + height) ) {
247   
248                        /**
249                        * Get the tooltip text
250                        */
251                        if (typeof(obj.Get('chart.tooltips')) == 'function') {
252                            var text = obj.Get('chart.tooltips')(idx);
253                       
254                        } else if (typeof(obj.Get('chart.tooltips')) == 'object' && typeof(obj.Get('chart.tooltips')[idx]) == 'function') {
255                            var text = obj.Get('chart.tooltips')[idx](idx);
256                       
257                        } else if (typeof(obj.Get('chart.tooltips')) == 'object') {
258                            var text = obj.Get('chart.tooltips')[idx];
259
260                        } else {
261                            var text = null;
262                        }
263
264                        /**
265                        * Show a tooltip if it's defined
266                        */
267                        if (text) {
268
269                            obj.context.beginPath();
270                            obj.context.strokeStyle = obj.Get('chart.highlight.stroke');
271                            obj.context.fillStyle   = obj.Get('chart.highlight.fill');
272                            obj.context.strokeRect(left, top, width, height);
273                            obj.context.fillRect(left, top, width, height);
274       
275                            obj.context.stroke();
276                            obj.context.fill();
277
278                            RGraph.Tooltip(canvas, text, e.pageX, e.pageY, i);
279                        }
280                    }
281                }
282
283                /**
284                * Stop the event bubbling
285                */
286                e.stopPropagation();
287            }
288            this.canvas.addEventListener('click', canvas_onclick_func, false);
289            RGraph.AddEventListener(this.id, 'click', canvas_onclick_func);
290
291            /**
292            * If the cursor is over a hotspot, change the cursor to a hand
293            */
294            var canvas_onmousemove_func = function (e)
295            {
296                e = RGraph.FixEventObject(e);
297
298                var canvas = document.getElementById(this.id);
299                var obj = canvas.__object__;
300
301                /**
302                * Get the mouse X/Y coordinates
303                */
304                var mouseCoords = RGraph.getMouseXY(e);
305
306                /**
307                * Loop through the bars determining if the mouse is over a bar
308                */
309                for (var i=0; i<obj.coords.length; i++) {
310
311                    var mouseX = mouseCoords[0];  // In relation to the canvas
312                    var mouseY = mouseCoords[1];  // In relation to the canvas
313                    var left   = obj.coords[i][0];
314                    var top    = obj.coords[i][1];
315                    var width  = obj.coords[i][2];
316                    var height = obj.coords[i][3];
317
318                    if (mouseX >= left && mouseX <= (left + width) && mouseY >= top && mouseY <= (top + height) ) {
319                        canvas.style.cursor = 'pointer';
320                        break;
321                    }
322                   
323                    canvas.style.cursor = 'default';
324                }
325            }
326            this.canvas.addEventListener('mousemove', canvas_onmousemove_func, false);
327            RGraph.AddEventListener(this.id, 'mousemove', canvas_onmousemove_func);
328        }
329       
330        /**
331        * If the canvas is annotatable, do install the event handlers
332        */
333        if (this.Get('chart.annotatable')) {
334            RGraph.Annotate(this);
335        }
336
337
338        // Draw the key if necessary
339        if (this.Get('chart.key').length) {
340            RGraph.DrawKey(this, this.Get('chart.key'), this.Get('chart.colors'));
341        }
342       
343        /**
344        * This bit shows the mini zoom window if requested
345        */
346        if (this.Get('chart.zoom.mode') == 'thumbnail' || this.Get('chart.zoom.mode') == 'area') {
347            RGraph.ShowZoomWindow(this);
348        }
349
350       
351        /**
352        * This function enables resizing
353        */
354        if (this.Get('chart.resizable')) {
355            RGraph.AllowResizing(this);
356        }
357       
358        /**
359        * Instead of using RGraph.common.adjusting.js, handle them here
360        */
361        if (this.Get('chart.adjustable')) {
362            RGraph.AllowAdjusting(this);
363        }
364       
365        /**
366        * Fire the RGraph ondraw event
367        */
368        RGraph.FireCustomEvent(this, 'ondraw');
369    }
370
371    /**
372    * Draws the bar
373    */
374    RGraph.HProgress.prototype.Drawbar = function ()
375    {
376        // Set a shadow if requested
377        if (this.Get('chart.shadow')) {
378            RGraph.SetShadow(this, this.Get('chart.shadow.color'), this.Get('chart.shadow.offsetx'), this.Get('chart.shadow.offsety'), this.Get('chart.shadow.blur'));
379        }
380
381        // Draw the shadow for MSIE
382        if (RGraph.isIE8() && this.Get('chart.shadow')) {
383            this.context.fillStyle = this.Get('chart.shadow.color');
384            this.context.fillRect(this.gutterLeft + this.Get('chart.shadow.offsetx'), this.gutterTop + this.Get('chart.shadow.offsety'), this.width, this.height);
385        }
386
387        // Draw the outline
388        this.context.fillStyle   = this.Get('chart.background.color');
389        this.context.strokeStyle = 'black';
390        this.context.strokeRect(this.gutterLeft, this.gutterTop, this.width, this.height);
391        this.context.fillRect(this.gutterLeft, this.gutterTop, this.width, this.height);
392
393        // Turn off any shadow
394        RGraph.NoShadow(this);
395
396        this.context.fillStyle   = this.Get('chart.color');
397        this.context.strokeStyle = 'black';
398       
399        var margin = this.Get('chart.margin');
400
401        // Draw the actual bar itself
402        var barWidth = Math.min(this.width, ((RGraph.array_sum(this.value) - this.Get('chart.min')) / (this.max - this.Get('chart.min')) ) * this.width);
403
404        if (this.Get('chart.tickmarks.inner')) {
405
406            var spacing = (RGraph.GetWidth(this) - this.gutterLeft - this.gutterRight) / this.Get('chart.numticks.inner');
407
408            this.context.lineWidth   = 1;
409            this.context.strokeStyle = '#999';
410
411            this.context.beginPath();
412            for (var x = this.gutterLeft; x<RGraph.GetWidth(this) - this.gutterRight; x+=spacing) {
413                this.context.moveTo(x, this.gutterTop);
414                this.context.lineTo(x, this.gutterTop + 2);
415
416                this.context.moveTo(x, RGraph.GetHeight(this) - this.gutterBottom);
417                this.context.lineTo(x, RGraph.GetHeight(this) - this.gutterBottom - 2);
418            }
419            this.context.stroke();
420        }
421       
422        /**
423        * This bit draws the actual progress bar
424        */
425        if (typeof(this.value) == 'number') {
426            this.context.beginPath();
427            this.context.strokeStyle = 'black';
428            this.context.fillStyle = this.Get('chart.colors')[0];
429            this.context.strokeRect(this.gutterLeft, this.gutterTop + margin, barWidth, this.height - margin - margin);
430            this.context.fillRect(this.gutterLeft, this.gutterTop + margin, barWidth, this.height - margin - margin);
431
432            // Store the coords
433            this.coords.push([this.gutterLeft,
434                              this.gutterTop + margin,
435                              barWidth,
436                              this.height - margin - margin]);
437
438        } else if (typeof(this.value) == 'object') {
439
440            this.context.beginPath();
441            this.context.strokeStyle = 'black';
442
443            var startPoint = this.gutterLeft;
444           
445            for (var i=0; i<this.value.length; ++i) {
446
447                var segmentLength = (this.value[i] / RGraph.array_sum(this.value)) * barWidth;
448                this.context.fillStyle = this.Get('chart.colors')[i];
449
450                this.context.strokeRect(startPoint, this.gutterTop + margin, segmentLength, this.height - margin - margin);
451                this.context.fillRect(startPoint, this.gutterTop + margin, segmentLength, this.height - margin - margin);
452
453
454                // Store the coords
455                this.coords.push([startPoint,
456                                  this.gutterTop + margin,
457                                  segmentLength,
458                                  this.height - margin - margin]);
459
460                startPoint += segmentLength;
461            }
462        }
463
464        /**
465        * Draw the arrows indicating the level if requested
466        */
467        if (this.Get('chart.arrows')) {
468            var x = this.gutterLeft + barWidth;
469            var y = this.gutterTop;
470           
471            this.context.lineWidth = 1;
472            this.context.fillStyle = 'black';
473            this.context.strokeStyle = 'black';
474
475            this.context.beginPath();
476                this.context.moveTo(x, y - 3);
477                this.context.lineTo(x + 2, y - 7);
478                this.context.lineTo(x - 2, y - 7);
479            this.context.closePath();
480
481            this.context.stroke();
482            this.context.fill();
483
484            this.context.beginPath();
485                this.context.moveTo(x, y + this.height + 4);
486                this.context.lineTo(x + 2, y + this.height + 9);
487                this.context.lineTo(x - 2, y + this.height + 9);
488            this.context.closePath();
489
490            this.context.stroke();
491            this.context.fill()
492
493
494            /**
495            * Draw the "in-bar" label
496            */
497            if (this.Get('chart.label.inner')) {
498                this.context.beginPath();
499                this.context.fillStyle = 'black';
500                RGraph.Text(this.context, this.Get('chart.text.font'), this.Get('chart.text.size') + 2, this.gutterLeft + barWidth + 5, RGraph.GetHeight(this) / 2, String(this.Get('chart.units.pre') + this.value + this.Get('chart.units.post')), 'center', 'left');
501                this.context.fill();
502            }
503        }
504
505    }
506
507    /**
508    * The function that draws the tick marks. Apt name...
509    */
510    RGraph.HProgress.prototype.DrawTickMarks = function ()
511    {
512        var context = this.context;
513
514        context.strokeStyle = this.Get('chart.tickmarks.color');
515
516        if (this.Get('chart.tickmarks')) {
517           
518            this.context.beginPath();       
519
520            // This is used by the label function below
521            this.tickInterval = this.width / this.Get('chart.numticks');
522           
523            var start   = this.Get('chart.tickmarks.zerostart') ? 0 : this.tickInterval;
524
525            if (this.Get('chart.labels.position') == 'top') {
526                for (var i=this.gutterLeft + start; i<=(this.width + this.gutterLeft + 0.1); i+=this.tickInterval) {
527                    context.moveTo(i, this.gutterTop);
528                    context.lineTo(i, this.gutterTop - 4);
529                }
530
531            } else {
532
533                for (var i=this.gutterLeft + start; i<=(this.width + this.gutterLeft + 0.1); i+=this.tickInterval) {
534                    context.moveTo(i, this.gutterTop + this.height);
535                    context.lineTo(i, this.gutterTop + this.height + 4);
536                }
537            }
538
539            this.context.stroke();
540        }
541    }
542
543
544    /**
545    * The function that draws the labels
546    */
547    RGraph.HProgress.prototype.DrawLabels = function ()
548    {
549        var context = this.context;
550        this.context.fillStyle = this.Get('chart.text.color');
551
552        var xPoints = [];
553        var yPoints = [];
554
555        for (i=0; i<this.Get('chart.numticks'); i++) {
556
557            var font       = this.Get('chart.text.font');
558            var size       = this.Get('chart.text.size');
559
560            if (this.Get('chart.labels.position') == 'top') {
561                var x = this.width * (i/this.Get('chart.numticks')) + this.gutterLeft + (this.width / this.Get('chart.numticks'));
562                var y = this.gutterTop - 6;
563                var valign = 'bottom';
564            } else {
565                var x = this.width * (i/this.Get('chart.numticks')) + this.gutterLeft + (this.width / this.Get('chart.numticks'));
566                var y = this.height + this.gutterTop + 4;
567                var valign = 'top';
568            }
569               
570            RGraph.Text(this.context,font,size,x,y,this.Get('chart.units.pre') + String((((this.max - this.Get('chart.min')) / this.Get('chart.numticks') ) * (i + 1) + this.Get('chart.min')).toFixed(this.Get('chart.scale.decimals'))) + this.Get('chart.units.post'),valign,'center');
571        }
572
573        if (this.Get('chart.tickmarks.zerostart')) {
574            if (this.Get('chart.labels.position') == 'top') {
575                RGraph.Text(this.context,font,size,this.gutterLeft,this.gutterTop - 6,this.Get('chart.units.pre') + Number(this.Get('chart.min')).toFixed(this.Get('chart.scale.decimals')) + this.Get('chart.units.post'),'bottom','center');
576            } else {
577                RGraph.Text(this.context,font,size,this.gutterLeft,this.canvas.height - this.gutterBottom + 5,this.Get('chart.units.pre') + Number(this.Get('chart.min')).toFixed(this.Get('chart.scale.decimals')) + this.Get('chart.units.post'),'top','center');
578            }
579        }
580
581
582
583        // Draw the title text
584        if (this.Get('chart.title')) {
585            RGraph.DrawTitle(this.canvas,
586                             this.Get('chart.title'),
587                             this.gutterTop + this.Get('chart.text.size'),
588                             0,
589                             this.Get('chart.text.size') + 2);
590        }
591    }
Note: See TracBrowser for help on using the repository browser.