Context Navigation

source: Dev/branches/jQueryUI/client/RGraph/libraries/RGraph.thermometer.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: 12.8 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 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.

Download in other formats: