Context Navigation

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

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

Note: See TracBrowser for help on using the repository browser.

Download in other formats: