Context Navigation

source: Dev/branches/Cartis/Tiles preview/js/RGraph/libraries/RGraph.thermometer.js @ 283

Last change on this file since 283 was 283, checked in by tjcschipper, 13 years ago

Cartis Mockup werkt!

W
I
N
N
I
N
G

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: