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

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

RGraph
File size: 12.8 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 chart constructor. This function sets up the object. It takes the ID (the HTML attribute) of the canvas as the
19    * first argument and the data as the second. If you need to change this, you can.
20    *
21    * @param string id    The canvas tag ID
22    * @param number min   The minimum value
23    * @param number max   The maximum value
24    * @param number value The value reported by the thermometer
25    */
26    RGraph.Thermometer = function (id, min, max, value)
27    {
28        this.id      = id;
29        this.canvas  = document.getElementById(id);
30        this.context = this.canvas.getContext ? this.canvas.getContext("2d") : null;
31        this.canvas.__object__ = this;
32
33        this.type      = 'thermometer';
34        this.isRGraph  = true;
35        this.min       = min;
36        this.max       = max;
37        this.value     = value;
38        this.coords    = [];
39        this.graphArea = [];
40
41        RGraph.OldBrowserCompat(this.context);
42
43        this.properties = {
44            'chart.colors':                 ['red'],
45            'chart.gutter.left':            15,
46            'chart.gutter.right':           15,
47            'chart.gutter.top':             15,
48            'chart.gutter.bottom':          15,
49            'chart.ticksize':               5,
50            'chart.text.font':              'Verdana',
51            'chart.text.size':              10,
52            'chart.units.pre':              '',
53            'chart.units.post':             '',
54            'chart.zoom.factor':            1.5,
55            'chart.zoom.fade.in':           true,
56            'chart.zoom.fade.out':          true,
57            'chart.zoom.hdir':              'right',
58            'chart.zoom.vdir':              'down',
59            'chart.zoom.frames':            10,
60            'chart.zoom.delay':             50,
61            'chart.zoom.shadow':            true,
62            'chart.zoom.mode':              'canvas',
63            'chart.zoom.thumbnail.width':   75,
64            'chart.zoom.thumbnail.height':  75,
65            'chart.zoom.background':        true,
66            'chart.title':                  '',
67            'chart.title.hpos':             null,
68            'chart.title.vpos':             null,
69            'chart.title.side':             '',
70            'chart.shadow':                 true,
71            'chart.shadow.offsetx':         0,
72            'chart.shadow.offsety':         0,
73            'chart.shadow.blur':            15,
74            'chart.shadow.color':           'gray',
75            'chart.resizable':              false,
76            'chart.contextmenu':            null,
77            'chart.adjustable':             false,
78            'chart.text.color':             'black',
79            'chart.value.label':            true
80        }
81
82        /**
83        * A simple check that the browser has canvas support
84        */
85        if (!this.canvas) {
86            alert('[THERMOMETER] No canvas support');
87            return;
88        }
89    }
90
91
92
93
94    /**
95    * A setter.
96    *
97    * @param name  string The name of the property to set
98    * @param value mixed  The value of the property
99    */
100    RGraph.Thermometer.prototype.Set = function (name, value)
101    {
102        this.properties[name.toLowerCase()] = value;
103    }
104
105
106
107
108    /**
109    * A getter.
110    *
111    * @param name  string The name of the property to get
112    */
113    RGraph.Thermometer.prototype.Get = function (name)
114    {
115        return this.properties[name];
116    }
117
118
119
120
121    /**
122    * Draws the thermometer
123    */
124    RGraph.Thermometer.prototype.Draw = function ()
125    {
126        /**
127        * Fire the custom RGraph onbeforedraw event (which should be fired before the chart is drawn)
128        */
129        RGraph.FireCustomEvent(this, 'onbeforedraw');
130
131        /**
132        * Clear all of this canvases event handlers (the ones installed by RGraph)
133        */
134        RGraph.ClearEventListeners(this.id);
135       
136        /**
137        * This is new in May 2011 and facilitates indiviual gutter settings,
138        * eg chart.gutter.left
139        */
140        this.gutterLeft   = this.Get('chart.gutter.left');
141        this.gutterRight  = this.Get('chart.gutter.right');
142        this.gutterTop    = this.Get('chart.gutter.top');
143        this.gutterBottom = this.Get('chart.gutter.bottom');
144
145
146
147        /**
148        * Draw the background
149        */
150        this.DrawBackground();
151       
152        /**
153        * Draw the bar that represents the value
154        */
155        this.DrawBar();
156
157        /**
158        * Draw the tickmarks/hatchmarks
159        */
160        this.DrawTickMarks();
161
162        /**
163        * Draw the label
164        */
165        this.DrawLabels();
166
167        /**
168        * Draw the title
169        */
170        if (this.Get('chart.title')) {
171            this.DrawTitle();
172        }
173       
174        /**
175        * Draw the side title
176        */
177        if (this.Get('chart.title.side')) {
178            this.DrawSideTitle();
179        }
180       
181        /**
182        * This function enables resizing
183        */
184        if (this.Get('chart.resizable')) {
185            RGraph.AllowResizing(this);
186        }
187       
188       
189        /**
190        * Setup the context menu if required
191        */
192        if (this.Get('chart.contextmenu')) {
193            RGraph.ShowContext(this);
194        }
195
196        /**
197        * If the canvas is annotatable, do install the event handlers
198        */
199        if (this.Get('chart.annotatable')) {
200            RGraph.Annotate(this);
201        }
202       
203        /**
204        * Instead of using RGraph.common.adjusting.js, handle them here
205        */
206        if (this.Get('chart.adjustable')) {
207            RGraph.AllowAdjusting(this);
208        }
209
210
211
212       
213        /**
214        * Fire the custom RGraph ondraw event (which should be fired when you have drawn the chart)
215        */
216        RGraph.FireCustomEvent(this, 'ondraw');
217    }
218
219
220
221
222
223    /**
224    * Draws the thermometer itself
225    */
226    RGraph.Thermometer.prototype.DrawBackground = function ()
227    {
228        var canvas     = this.canvas;
229        var context    = this.context;
230        var bulbRadius = (RGraph.GetWidth(this) - this.gutterLeft - this.gutterRight) / 2;
231       
232        // Cache the bulbRadius as an object variable
233        this.bulbRadius = bulbRadius;
234
235        // Draw the black background that becomes the border
236        context.beginPath();
237            context.fillStyle = 'black';
238
239            if (this.Get('chart.shadow')) {
240                RGraph.SetShadow(this, this.Get('chart.shadow.color'), this.Get('chart.shadow.offsetx'), this.Get('chart.shadow.offsety'), this.Get('chart.shadow.blur'));
241            }
242
243            context.fillRect(this.gutterLeft + 12,this.gutterTop + bulbRadius,RGraph.GetWidth(this) - this.gutterLeft - this.gutterRight - 24, RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom - bulbRadius - bulbRadius);
244            context.arc(this.gutterLeft + bulbRadius, RGraph.GetHeight(this) - this.gutterBottom - bulbRadius, bulbRadius, 0, 6.28, 0);
245            context.arc(this.gutterLeft + bulbRadius,this.gutterTop + bulbRadius,(RGraph.GetWidth(this) - this.gutterLeft - this.gutterRight - 24)/ 2,0,6.28,0);
246        context.fill();
247       
248        RGraph.NoShadow(this);
249
250        // Draw the white inner content background that creates the border
251        context.beginPath();
252            context.fillStyle = 'white';
253            context.fillRect(this.gutterLeft + 12 + 1,this.gutterTop + bulbRadius,RGraph.GetWidth(this) - this.gutterLeft - this.gutterRight - 24 - 2,RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom - bulbRadius - bulbRadius);
254            context.arc(this.gutterLeft + bulbRadius, RGraph.GetHeight(this) - this.gutterBottom - bulbRadius, bulbRadius - 1, 0, 6.28, 0);
255            context.arc(this.gutterLeft + bulbRadius,this.gutterTop + bulbRadius,((RGraph.GetWidth(this) - this.gutterLeft - this.gutterRight - 24)/ 2) - 1,0,6.28,0);
256        context.fill();
257
258        // Draw the bottom content of the thermometer
259        context.beginPath();
260            context.fillStyle = this.Get('chart.colors')[0];
261            context.arc(this.gutterLeft + bulbRadius, RGraph.GetHeight(this) - this.gutterBottom - bulbRadius, bulbRadius - 1, 0, 6.28, 0);
262            context.fillRect(this.gutterLeft + 12 + 1, RGraph.GetHeight(this) - this.gutterBottom - bulbRadius - bulbRadius,RGraph.GetWidth(this) - this.gutterLeft - this.gutterRight - 24 - 2, bulbRadius);
263        context.fill();
264       
265        // Save the X/Y/width/height
266        this.graphArea[0] = this.gutterLeft + 12 + 1;
267        this.graphArea[1] = this.gutterTop + bulbRadius;
268        this.graphArea[2] = RGraph.GetWidth(this) - this.gutterLeft - this.gutterRight - 24 - 2;
269        this.graphArea[3] = (RGraph.GetHeight(this) - this.gutterBottom - bulbRadius - bulbRadius) - (this.graphArea[1]);
270    }
271
272
273    /**
274    * This draws the bar that indicates the value of the thermometer
275    */
276    RGraph.Thermometer.prototype.DrawBar = function ()
277    {
278        var barHeight = (this.value / (this.max - this.min)) * this.graphArea[3];
279        var context   = this.context;
280
281        // Draw the actual bar that indicates the value
282        context.beginPath();
283            context.fillStyle = this.Get('chart.colors')[0];
284            context.fillRect(this.graphArea[0],this.graphArea[1] + this.graphArea[3] - barHeight,this.graphArea[2],barHeight);
285        context.fill();
286       
287        this.coords = [this.graphArea[0],this.graphArea[1] + this.graphArea[3] - barHeight,this.graphArea[2],barHeight];
288    }
289
290   
291    /**
292    * Draws the tickmarks of the thermometer
293    */
294    RGraph.Thermometer.prototype.DrawTickMarks = function ()
295    {
296        var ticksize = this.Get('chart.ticksize');
297
298        // Left hand side tickmarks
299        for (var i=this.graphArea[1]; i<=(this.graphArea[1] + this.graphArea[3]); i += (this.graphArea[3] / 10)) {
300            this.context.beginPath();
301                this.context.moveTo(this.gutterLeft + 12, i);
302                this.context.lineTo(this.gutterLeft + 12 + ticksize, i);
303            this.context.stroke();
304        }
305
306        // Right hand side tickmarks
307        for (var i=this.graphArea[1]; i<=(this.graphArea[1] + this.graphArea[3]); i += (this.graphArea[3] / 10)) {
308            this.context.beginPath();
309                this.context.moveTo(RGraph.GetWidth(this) - (this.gutterRight + 12), i);
310                this.context.lineTo(RGraph.GetWidth(this) - (this.gutterRight + 12 + ticksize), i);
311            this.context.stroke();
312        }
313    }
314
315   
316    /**
317    * Draws the labels (well, theres only one) of the thermometer
318    */
319    RGraph.Thermometer.prototype.DrawLabels = function ()
320    {
321        if (this.Get('chart.value.label')) {
322            this.context.beginPath();
323                this.context.fillStyle = this.Get('chart.text.color');
324                RGraph.Text(this.context,this.Get('chart.text.font'),this.Get('chart.text.size'),this.gutterLeft + this.bulbRadius,this.coords[1] + this.Get('chart.text.size'),this.Get('chart.units.pre') + String(this.value) + this.Get('chart.units.post'),'center','center',true,null,'white');
325            this.context.fill();
326        }
327    }
328
329   
330    /**
331    * Draws the title
332    */
333    RGraph.Thermometer.prototype.DrawTitle = function ()
334    {
335        this.context.beginPath();
336            this.context.fillStyle = this.Get('chart.text.color');
337            RGraph.Text(this.context,this.Get('chart.text.font'),this.Get('chart.text.size') + 2,this.gutterLeft + ((RGraph.GetWidth(this) - this.gutterLeft - this.gutterRight) / 2),this.gutterTop,String(this.Get('chart.title')),'center','center',null,null,null,true);
338        this.context.fill();
339    }
340
341   
342    /**
343    * Draws the title
344    */
345    RGraph.Thermometer.prototype.DrawSideTitle = function ()
346    {
347        this.context.beginPath();
348            this.context.fillStyle = this.Get('chart.text.color');
349            RGraph.Text(this.context,this.Get('chart.text.font'),this.Get('chart.text.size') + 2,this.gutterLeft,RGraph.GetHeight(this) / 2,String(this.Get('chart.title.side')),'center','center',null,270,null,true);
350        this.context.fill();
351    }
Note: See TracBrowser for help on using the repository browser.