Context Navigation

source: Dev/branches/Cartis/Tiles preview/js/RGraph/libraries/RGraph.bar.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: 84.1 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 bar chart constructor
19	*
20	* @param object canvas The canvas object
21	* @param array data The chart data
22	*/
23	RGraph.Bar = function (id, data)
24	{
25	// Get the canvas and context objects
26	this.id = id;
27	this.canvas = document.getElementById(id);
28	this.context = this.canvas.getContext ? this.canvas.getContext("2d") : null;
29	this.canvas.__object__ = this;
30	this.type = 'bar';
31	this.max = 0;
32	this.stackedOrGrouped = false;
33	this.isRGraph = true;
34
35	/**
36	* Compatibility with older browsers
37	*/
38	RGraph.OldBrowserCompat(this.context);
39
40
41	// Various config type stuff
42	this.properties = {
43	'chart.width': null,
44	'chart.height': null,
45	'chart.background.barcolor1': 'rgba(0,0,0,0)',
46	'chart.background.barcolor2': 'rgba(0,0,0,0)',
47	'chart.background.grid': true,
48	'chart.background.grid.color': '#ddd',
49	'chart.background.grid.width': 1,
50	'chart.background.grid.hsize': 20,
51	'chart.background.grid.vsize': 20,
52	'chart.background.grid.vlines': true,
53	'chart.background.grid.hlines': true,
54	'chart.background.grid.border': true,
55	'chart.background.grid.autofit':false,
56	'chart.background.grid.autofit.numhlines': 7,
57	'chart.background.grid.autofit.numvlines': 20,
58	'chart.background.image': null,
59	'chart.ytickgap': 20,
60	'chart.smallyticks': 3,
61	'chart.largeyticks': 5,
62	'chart.numyticks': 10,
63	'chart.hmargin': 5,
64	'chart.strokecolor': '#666',
65	'chart.axis.color': 'black',
66	'chart.gutter.top': 25,
67	'chart.gutter.bottom': 25,
68	'chart.gutter.left': 25,
69	'chart.gutter.right': 25,
70	'chart.labels': null,
71	'chart.labels.ingraph': null,
72	'chart.labels.above': false,
73	'chart.labels.above.decimals': 0,
74	'chart.labels.above.size': null,
75	'chart.labels.above.angle': null,
76	'chart.ylabels': true,
77	'chart.ylabels.count': 5,
78	'chart.ylabels.inside': false,
79	'chart.xlabels.offset': 0,
80	'chart.xaxispos': 'bottom',
81	'chart.yaxispos': 'left',
82	'chart.text.color': 'black',
83	'chart.text.size': 10,
84	'chart.text.angle': 0,
85	'chart.text.font': 'Verdana',
86	'chart.ymax': null,
87	'chart.title': '',
88	'chart.title.background': null,
89	'chart.title.hpos': null,
90	'chart.title.vpos': null,
91	'chart.title.xaxis': '',
92	'chart.title.yaxis': '',
93	'chart.title.xaxis.pos': 0.25,
94	'chart.title.yaxis.pos': 0.25,
95	'chart.colors': ['rgb(0,0,255)', '#0f0', '#00f', '#ff0', '#0ff', '#0f0'],
96	'chart.colors.sequential': false,
97	'chart.colors.reverse': false,
98	'chart.grouping': 'grouped',
99	'chart.variant': 'bar',
100	'chart.shadow': false,
101	'chart.shadow.color': '#666',
102	'chart.shadow.offsetx': 3,
103	'chart.shadow.offsety': 3,
104	'chart.shadow.blur': 3,
105	'chart.tooltips': null,
106	'chart.tooltips.effect': 'fade',
107	'chart.tooltips.css.class': 'RGraph_tooltip',
108	'chart.tooltips.event': 'onclick',
109	'chart.tooltips.highlight': true,
110	'chart.highlight.stroke': 'black',
111	'chart.highlight.fill': 'rgba(255,255,255,0.5)',
112	'chart.background.hbars': null,
113	'chart.key': [],
114	'chart.key.background': 'white',
115	'chart.key.position': 'graph',
116	'chart.key.shadow': false,
117	'chart.key.shadow.color': '#666',
118	'chart.key.shadow.blur': 3,
119	'chart.key.shadow.offsetx': 2,
120	'chart.key.shadow.offsety': 2,
121	'chart.key.position.gutter.boxed': true,
122	'chart.key.position.x': null,
123	'chart.key.position.y': null,
124	'chart.key.halign': 'right',
125	'chart.key.color.shape': 'square',
126	'chart.key.rounded': true,
127	'chart.key.text.size': 10,
128	'chart.key.linewidth': 1,
129	'chart.contextmenu': null,
130	'chart.line': null,
131	'chart.units.pre': '',
132	'chart.units.post': '',
133	'chart.scale.decimals': 0,
134	'chart.scale.point': '.',
135	'chart.scale.thousand': ',',
136	'chart.crosshairs': false,
137	'chart.crosshairs.color': '#333',
138	'chart.linewidth': 1,
139	'chart.annotatable': false,
140	'chart.annotate.color': 'black',
141	'chart.zoom.factor': 1.5,
142	'chart.zoom.fade.in': true,
143	'chart.zoom.fade.out': true,
144	'chart.zoom.hdir': 'right',
145	'chart.zoom.vdir': 'down',
146	'chart.zoom.frames': 10,
147	'chart.zoom.delay': 50,
148	'chart.zoom.shadow': true,
149	'chart.zoom.mode': 'canvas',
150	'chart.zoom.thumbnail.width': 75,
151	'chart.zoom.thumbnail.height': 75,
152	'chart.zoom.background': true,
153	'chart.resizable': false,
154	'chart.resize.handle.adjust': [0,0],
155	'chart.resize.handle.background': null,
156	'chart.adjustable': false,
157	'chart.noaxes': false,
158	'chart.noxaxis': false,
159	'chart.noyaxis': false
160	}
161
162	// Check for support
163	if (!this.canvas) {
164	alert('[BAR] No canvas support');
165	return;
166	}
167
168	/**
169	* Determine whether the chart will contain stacked or grouped bars
170	*/
171	for (i=0; i<data.length; ++i) {
172	if (typeof(data[i]) == 'object') {
173	this.stackedOrGrouped = true;
174	}
175	}
176
177	// Store the data
178	this.data = data;
179
180	// Used to store the coords of the bars
181	this.coords = [];
182
183	/**
184	* Set the .getShape commonly named method
185	*/
186	this.getShape = this.getBar;
187	}
188
189
190	/**
191	* A setter
192	*
193	* @param name string The name of the property to set
194	* @param value mixed The value of the property
195	*/
196	RGraph.Bar.prototype.Set = function (name, value)
197	{
198	name = name.toLowerCase();
199
200	if (name == 'chart.labels.abovebar') {
201	name = 'chart.labels.above';
202	}
203
204	if (name == 'chart.strokestyle') {
205	name = 'chart.strokecolor';
206	}
207
208	/**
209	* Check for xaxispos
210	*/
211	if (name == 'chart.xaxispos' ) {
212	if (value != 'bottom' && value != 'center' && value != 'top') {
213	alert('[BAR] (' + this.id + ') chart.xaxispos should be top, center or bottom. Tried to set it to: ' + value + ' Changing it to center');
214	value = 'center';
215	}
216
217	if (value == 'top') {
218	for (var i=0; i<this.data.length; ++i) {
219	if (typeof(this.data[i]) == 'number' && this.data[i] > 0) {
220	alert('[BAR] The data element with index ' + i + ' should be negative');
221	}
222	}
223	}
224	}
225
226	this.properties[name] = value;
227	}
228
229
230	/**
231	* A getter
232	*
233	* @param name string The name of the property to get
234	*/
235	RGraph.Bar.prototype.Get = function (name)
236	{
237	if (name == 'chart.labels.abovebar') {
238	name = 'chart.labels.above';
239	}
240
241	var value = this.properties[name];
242
243	return value;
244	}
245
246
247	/**
248	* The function you call to draw the bar chart
249	*/
250	RGraph.Bar.prototype.Draw = function ()
251	{
252	// MUST be the first thing done!
253	if (typeof(this.Get('chart.background.image')) == 'string' && !this.__background_image__) {
254	RGraph.DrawBackgroundImage(this);
255	return;
256	}
257
258	/**
259	* Fire the onbeforedraw event
260	*/
261	RGraph.FireCustomEvent(this, 'onbeforedraw');
262
263	/**
264	* Clear all of this canvases event handlers (the ones installed by RGraph)
265	*/
266	RGraph.ClearEventListeners(this.id);
267
268	/**
269	* This is new in May 2011 and facilitates indiviual gutter settings,
270	* eg chart.gutter.left
271	*/
272	this.gutterLeft = this.Get('chart.gutter.left');
273	this.gutterRight = this.Get('chart.gutter.right');
274	this.gutterTop = this.Get('chart.gutter.top');
275	this.gutterBottom = this.Get('chart.gutter.bottom');
276
277	/**
278	* Convert any null values to 0. Won't make any difference to the bar (as opposed to the line chart)
279	*/
280	for (var i=0; i<this.data.length; ++i) {
281	if (this.data[i] == null) {
282	this.data[i] = 0;
283	}
284	}
285
286
287	// Cache this in a class variable as it's used rather a lot
288
289	/**
290	* Check for tooltips and alert the user that they're not supported with pyramid charts
291	*/
292	if ( (this.Get('chart.variant') == 'pyramid' \|\| this.Get('chart.variant') == 'dot')
293	&& typeof(this.Get('chart.tooltips')) == 'object'
294	&& this.Get('chart.tooltips')
295	&& this.Get('chart.tooltips').length > 0) {
296
297	alert('[BAR] (' + this.id + ') Sorry, tooltips are not supported with dot or pyramid charts');
298	}
299
300	/**
301	* Stop the coords array from growing uncontrollably
302	*/
303	this.coords = [];
304
305	/**
306	* Work out a few things. They need to be here because they depend on things you can change before you
307	* call Draw() but after you instantiate the object
308	*/
309	this.max = 0;
310	this.grapharea = RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom;
311	this.halfgrapharea = this.grapharea / 2;
312	this.halfTextHeight = this.Get('chart.text.size') / 2;
313
314	// Progressively Draw the chart
315	RGraph.background.Draw(this);
316
317
318	//If it's a sketch chart variant, draw the axes first
319	if (this.Get('chart.variant') == 'sketch') {
320	this.DrawAxes();
321	this.Drawbars();
322	} else {
323	this.Drawbars();
324	this.DrawAxes();
325	}
326
327	this.DrawLabels();
328
329
330	// Draw the key if necessary
331	if (this.Get('chart.key').length) {
332	RGraph.DrawKey(this, this.Get('chart.key'), this.Get('chart.colors'));
333	}
334
335
336	/**
337	* Setup the context menu if required
338	*/
339	if (this.Get('chart.contextmenu')) {
340	RGraph.ShowContext(this);
341	}
342
343
344	/**
345	* Is a line is defined, draw it
346	*/
347	var line = this.Get('chart.line');
348
349	if (line) {
350
351	line.__bar__ = this;
352
353	// Check the X axis positions
354	if (this.Get('chart.xaxispos') != line.Get('chart.xaxispos')) {
355	alert("[BAR] Using different X axis positions when combining the Bar and Line is not advised");
356	}
357
358	line.Set('chart.gutter.left', this.Get('chart.gutter.left'));
359	line.Set('chart.gutter.right', this.Get('chart.gutter.right'));
360	line.Set('chart.gutter.top', this.Get('chart.gutter.top'));
361	line.Set('chart.gutter.bottom', this.Get('chart.gutter.bottom'));
362
363	line.Set('chart.hmargin', (this.canvas.width - this.gutterLeft - this.gutterRight) / (line.original_data[0].length * 2));
364
365	// If a BAR custom yMax is set, use that
366	if (this.Get('chart.ymax') && !line.Get('chart.ymax')) {
367	line.Set('chart.ymax', this.Get('chart.ymax'));
368
369	} else if (line.Get('chart.ymax')) {
370	line.Set('chart.ymax', line.Get('chart.ymax'));
371	}
372
373	line.Draw();
374	}
375
376
377	/**
378	* Draw "in graph" labels
379	*/
380	if (this.Get('chart.labels.ingraph')) {
381	RGraph.DrawInGraphLabels(this);
382	}
383
384	/**
385	* Draw crosschairs
386	*/
387	if (this.Get('chart.crosshairs')) {
388	RGraph.DrawCrosshairs(this);
389	}
390
391	/**
392	* If the canvas is annotatable, do install the event handlers
393	*/
394	if (this.Get('chart.annotatable')) {
395	RGraph.Annotate(this);
396	}
397
398	/**
399	* This bit shows the mini zoom window if requested
400	*/
401	if (this.Get('chart.zoom.mode') == 'thumbnail' \|\| this.Get('chart.zoom.mode') == 'area') {
402	RGraph.ShowZoomWindow(this);
403	}
404
405
406	/**
407	* This function enables resizing
408	*/
409	if (this.Get('chart.resizable')) {
410	RGraph.AllowResizing(this);
411	}
412
413
414	/**
415	* This function enables adjusting
416	*/
417	if (this.Get('chart.adjustable')) {
418	RGraph.AllowAdjusting(this);
419	}
420
421	/**
422	* Fire the RGraph ondraw event
423	*/
424	RGraph.FireCustomEvent(this, 'ondraw');
425	}
426
427
428	/**
429	* Draws the charts axes
430	*/
431	RGraph.Bar.prototype.DrawAxes = function ()
432	{
433	if (this.Get('chart.noaxes')) {
434	return;
435	}
436
437	var xaxispos = this.Get('chart.xaxispos');
438	var yaxispos = this.Get('chart.yaxispos');
439
440	this.context.beginPath();
441	this.context.strokeStyle = this.Get('chart.axis.color');
442	this.context.lineWidth = 1;
443
444	// Draw the Y axis
445	if (this.Get('chart.noyaxis') == false) {
446	if (yaxispos == 'right') {
447	this.context.moveTo(RGraph.GetWidth(this) - this.gutterRight, this.gutterTop);
448	this.context.lineTo(RGraph.GetWidth(this) - this.gutterRight, RGraph.GetHeight(this) - this.gutterBottom);
449	} else {
450	this.context.moveTo(this.gutterLeft, this.gutterTop);
451	this.context.lineTo(this.gutterLeft, RGraph.GetHeight(this) - this.gutterBottom);
452	}
453	}
454
455	// Draw the X axis
456	if (this.Get('chart.noxaxis') == false) {
457	if (xaxispos == 'center') {
458	this.context.moveTo(this.gutterLeft, ((this.canvas.height - this.gutterTop - this.gutterBottom) / 2) + this.gutterTop);
459	this.context.lineTo(this.canvas.width - this.gutterRight, ((this.canvas.height - this.gutterTop - this.gutterBottom) / 2) + this.gutterTop);
460	} else if (xaxispos == 'top') {
461	this.context.moveTo(this.gutterLeft, this.gutterTop);
462	this.context.lineTo(this.canvas.width - this.gutterRight, this.gutterTop);
463	} else {
464	this.context.moveTo(this.gutterLeft, RGraph.GetHeight(this) - this.gutterBottom);
465	this.context.lineTo(RGraph.GetWidth(this) - this.gutterRight, RGraph.GetHeight(this) - this.gutterBottom);
466	}
467	}
468
469	var numYTicks = this.Get('chart.numyticks');
470
471	// Draw the Y tickmarks
472	if (this.Get('chart.noyaxis') == false) {
473	var yTickGap = (RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom) / numYTicks;
474	var xpos = yaxispos == 'left' ? this.gutterLeft : RGraph.GetWidth(this) - this.gutterRight;
475
476	for (y=this.gutterTop;
477	xaxispos == 'center' ? y <= (RGraph.GetHeight(this) - this.gutterBottom) : y < (RGraph.GetHeight(this) - this.gutterBottom + (xaxispos == 'top' ? 1 : 0));
478	y += yTickGap) {
479
480	if (xaxispos == 'center' && y == (RGraph.GetHeight(this) / 2)) continue;
481
482	// X axis at the top
483	if (xaxispos == 'top' && y == this.gutterTop) continue;
484
485	this.context.moveTo(xpos, y);
486	this.context.lineTo(xpos + (yaxispos == 'left' ? -3 : 3), y);
487	}
488
489	/**
490	* If the X axis is not being shown, draw an extra tick
491	*/
492	if (this.Get('chart.noxaxis')) {
493	if (xaxispos == 'center') {
494	this.context.moveTo(xpos + (yaxispos == 'left' ? -3 : 3), RGraph.GetHeight(this) / 2);
495	this.context.lineTo(xpos, RGraph.GetHeight(this) / 2);
496	} else if (xaxispos == 'top') {
497	this.context.moveTo(xpos + (yaxispos == 'left' ? -3 : 3), this.gutterTop);
498	this.context.lineTo(xpos, this.gutterTop);
499	} else {
500	this.context.moveTo(xpos + (yaxispos == 'left' ? -3 : 3), RGraph.GetHeight(this) - this.gutterBottom);
501	this.context.lineTo(xpos, RGraph.GetHeight(this) - this.gutterBottom);
502	}
503	}
504	}
505
506
507	// Draw the X tickmarks
508	if (this.Get('chart.noxaxis') == false) {
509
510	xTickGap = (RGraph.GetWidth(this) - this.gutterLeft - this.gutterRight) / this.data.length;
511
512	if (xaxispos == 'bottom') {
513	yStart = this.canvas.height - this.gutterBottom;
514	yEnd = (this.canvas.height - this.gutterBottom) + 3;
515	} else if (xaxispos == 'top') {
516	yStart = this.gutterTop - 3;
517	yEnd = this.gutterTop;
518	} else if (xaxispos == 'center') {
519	yStart = ((this.canvas.height - this.gutterTop - this.gutterBottom) / 2) + this.gutterTop + 3;
520	yEnd = ((this.canvas.height - this.gutterTop - this.gutterBottom) / 2) + this.gutterTop - 3;
521	}
522
523	//////////////// X TICKS ////////////////
524
525	var noEndXTick = this.Get('chart.noendxtick');
526
527	for (x=this.gutterLeft + (yaxispos == 'left' ? xTickGap : 0); x<this.canvas.width - this.gutterRight + (yaxispos == 'left' ? 5 : 0); x+=xTickGap) {
528
529	if (yaxispos == 'left' && !noEndXTick && x > this.gutterLeft) {
530	this.context.moveTo(x, yStart);
531	this.context.lineTo(x, yEnd);
532
533	} else if (yaxispos == 'left' && noEndXTick && x > this.gutterLeft && x < (this.canvas.width - this.gutterRight) ) {
534	this.context.moveTo(x, yStart);
535	this.context.lineTo(x, yEnd);
536
537	} else if (yaxispos == 'right' && x < (this.canvas.width - this.gutterRight) && !noEndXTick) {
538	this.context.moveTo(x, yStart);
539	this.context.lineTo(x, yEnd);
540
541	} else if (yaxispos == 'right' && x < (this.canvas.width - this.gutterRight) && x > (this.gutterLeft) && noEndXTick) {
542	this.context.moveTo(x, yStart);
543	this.context.lineTo(x, yEnd);
544	}
545	}
546
547	if (this.Get('chart.noyaxis')) {
548	this.context.moveTo(this.gutterLeft, yStart);
549	this.context.lineTo(this.gutterLeft, yEnd);
550	}
551
552	//////////////// X TICKS ////////////////
553	}
554
555	/**
556	* If the Y axis is not being shown, draw an extra tick
557	*/
558	if (this.Get('chart.noyaxis') && this.Get('chart.noxaxis') == false) {
559	if (xaxispos == 'center') {
560	this.context.moveTo(this.gutterLeft, (RGraph.GetHeight(this) / 2) - 3);
561	this.context.lineTo(this.gutterLeft, (RGraph.GetHeight(this) / 2) + 3);
562	} else {
563	this.context.moveTo(this.gutterLeft, this.canvas.height - this.gutterBottom);
564	this.context.lineTo(this.gutterLeft, this.canvas.height - this.gutterBottom + 3);
565	}
566	}
567
568	this.context.stroke();
569	}
570
571
572	/**
573	* Draws the bars
574	*/
575	RGraph.Bar.prototype.Drawbars = function ()
576	{
577	this.context.lineWidth = this.Get('chart.linewidth');
578	this.context.strokeStyle = this.Get('chart.strokecolor');
579	this.context.fillStyle = this.Get('chart.colors')[0];
580	var prevX = 0;
581	var prevY = 0;
582	var decimals = this.Get('chart.scale.decimals');
583
584	/**
585	* Work out the max value
586	*/
587	if (this.Get('chart.ymax')) {
588	this.max = this.Get('chart.ymax');
589
590	this.scale = [
591	(this.max * (1/5)).toFixed(decimals),
592	(this.max * (2/5)).toFixed(decimals),
593	(this.max * (3/5)).toFixed(decimals),
594	(this.max * (4/5)).toFixed(decimals),
595	this.max.toFixed(decimals)
596	];
597	} else {
598	for (i=0; i<this.data.length; ++i) {
599	if (typeof(this.data[i]) == 'object') {
600	var value = this.Get('chart.grouping') == 'grouped' ? Number(RGraph.array_max(this.data[i], true)) : Number(RGraph.array_sum(this.data[i])) ;
601
602	} else {
603	var value = Number(this.data[i]);
604	}
605
606	this.max = Math.max(Math.abs(this.max), Math.abs(value));
607	}
608
609	this.scale = RGraph.getScale(this.max, this);
610	this.max = this.scale[4];
611
612	if (this.Get('chart.scale.decimals')) {
613	var decimals = this.Get('chart.scale.decimals');
614
615	this.scale[0] = Number(this.scale[0]).toFixed(decimals);
616	this.scale[1] = Number(this.scale[1]).toFixed(decimals);
617	this.scale[2] = Number(this.scale[2]).toFixed(decimals);
618	this.scale[3] = Number(this.scale[3]).toFixed(decimals);
619	this.scale[4] = Number(this.scale[4]).toFixed(decimals);
620	}
621	}
622
623	/**
624	* Draw horizontal bars here
625	*/
626	if (this.Get('chart.background.hbars') && this.Get('chart.background.hbars').length > 0) {
627	RGraph.DrawBars(this);
628	}
629
630	var variant = this.Get('chart.variant');
631
632	/**
633	* Draw the 3D axes is necessary
634	*/
635	if (variant == '3d') {
636	RGraph.Draw3DAxes(this);
637	}
638
639	/**
640	* Get the variant once, and draw the bars, be they regular, stacked or grouped
641	*/
642
643	// Get these variables outside of the loop
644	var xaxispos = this.Get('chart.xaxispos');
645	var width = (RGraph.GetWidth(this) - this.gutterLeft - this.gutterRight ) / this.data.length;
646	var orig_height = height;
647	var hmargin = this.Get('chart.hmargin');
648	var shadow = this.Get('chart.shadow');
649	var shadowColor = this.Get('chart.shadow.color');
650	var shadowBlur = this.Get('chart.shadow.blur');
651	var shadowOffsetX = this.Get('chart.shadow.offsetx');
652	var shadowOffsetY = this.Get('chart.shadow.offsety');
653	var strokeStyle = this.Get('chart.strokecolor');
654	var colors = this.Get('chart.colors');
655
656	for (i=0; i<this.data.length; ++i) {
657
658	// Work out the height
659	//The width is up outside the loop
660	var height = (RGraph.array_sum(this.data[i]) / this.max) * (RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom);
661
662	// Half the height if the Y axis is at the center
663	if (xaxispos == 'center') {
664	height /= 2;
665	}
666
667	var x = (i * width) + this.gutterLeft;
668	var y = xaxispos == 'center' ? ((this.canvas.height - this.gutterTop - this.gutterBottom) / 2) + this.gutterTop - height : RGraph.GetHeight(this) - height - this.gutterBottom;
669
670	// xaxispos is top
671	if (xaxispos == 'top') {
672	y = this.gutterTop + Math.abs(height);
673	}
674
675
676	// Account for negative lengths - Some browsers (eg Chrome) don't like a negative value
677	if (height < 0) {
678	y += height;
679	height = Math.abs(height);
680	}
681
682	/**
683	* Turn on the shadow if need be
684	*/
685	if (shadow) {
686	this.context.shadowColor = shadowColor;
687	this.context.shadowBlur = shadowBlur;
688	this.context.shadowOffsetX = shadowOffsetX;
689	this.context.shadowOffsetY = shadowOffsetY;
690	}
691
692	/**
693	* Draw the bar
694	*/
695	this.context.beginPath();
696	if (typeof(this.data[i]) == 'number') {
697
698	var barWidth = width - (2 * hmargin);
699
700	// Set the fill color
701	this.context.strokeStyle = strokeStyle;
702	this.context.fillStyle = colors[0];
703
704	/**
705	* Sequential colors
706	*/
707	if (this.Get('chart.colors.sequential')) {
708	this.context.fillStyle = colors[i];
709	}
710
711	if (variant == 'sketch') {
712
713	this.context.lineCap = 'round';
714
715	var sketchOffset = 3;
716
717	this.context.beginPath();
718
719	this.context.strokeStyle = colors[0];
720
721	/**
722	* Sequential colors
723	*/
724	if (this.Get('chart.colors.sequential')) {
725	this.context.strokeStyle = colors[i];
726	}
727
728	// Left side
729	this.context.moveTo(x + hmargin + 2, y + height - 2);
730	this.context.lineTo(x + hmargin , y - 2);
731
732	// The top
733	this.context.moveTo(x + hmargin - 3, y + -2 + (this.data[i] < 0 ? height : 0));
734	this.context.bezierCurveTo(x + ((hmargin + width) * 0.33),y + 5 + (this.data[i] < 0 ? height - 10: 0),x + ((hmargin + width) * 0.66),y + 5 + (this.data[i] < 0 ? height - 10 : 0),x + hmargin + width + -1, y + 0 + (this.data[i] < 0 ? height : 0));
735
736
737	// The right side
738	this.context.moveTo(x + hmargin + width - 2, y + -2);
739	this.context.lineTo(x + hmargin + width - 3, y + height - 3);
740
741	for (var r=0.2; r<=0.8; r+=0.2) {
742	this.context.moveTo(x + hmargin + width + (r > 0.4 ? -1 : 3) - (r * width),y - 1);
743	this.context.lineTo(x + hmargin + width - (r > 0.4 ? 1 : -1) - (r * width), y + height + (r == 0.2 ? 1 : -2));
744	}
745
746	this.context.stroke();
747
748	// Regular bar
749	} else if (variant == 'bar' \|\| variant == '3d' \|\| variant == 'glass' \|\| variant == 'bevel') {
750
751	if (RGraph.isIE8() && shadow) {
752	this.DrawIEShadow([x + hmargin, y, barWidth, height]);
753	}
754
755	if (variant == 'glass') {
756	RGraph.filledCurvyRect(this.context, x + hmargin, y, barWidth, height, 3, this.data[i] > 0, this.data[i] > 0, this.data[i] < 0, this.data[i] < 0);
757	RGraph.strokedCurvyRect(this.context, x + hmargin, y, barWidth, height, 3, this.data[i] > 0, this.data[i] > 0, this.data[i] < 0, this.data[i] < 0);
758	} else {
759	this.context.strokeRect(x + hmargin, y, barWidth, height);
760	this.context.fillRect(x + hmargin, y, barWidth, height);
761	}
762
763
764	// This bit draws the text labels that appear above the bars if requested
765	if (this.Get('chart.labels.above')) {
766
767	// Turn off any shadow
768	if (shadow) {
769	RGraph.NoShadow(this);
770	}
771
772	var yPos = y - 3;
773
774	// Account for negative bars
775	if (this.data[i] < 0) {
776	yPos += height + 6 + (this.Get('chart.text.size') - 4);
777	}
778
779	// Account for chart.xaxispos=top
780	if (this.Get('chart.xaxispos') == 'top') {
781	yPos = this.gutterTop + height + 6 + (typeof(this.Get('chart.labels.above.size')) == 'number' ? this.Get('chart.labels.above.size') : this.Get('chart.text.size') - 4);
782	}
783
784	this.context.fillStyle = this.Get('chart.text.color');
785
786	RGraph.Text(this.context,
787	this.Get('chart.text.font'),
788	typeof(this.Get('chart.labels.above.size')) == 'number' ? this.Get('chart.labels.above.size') : this.Get('chart.text.size') - 3,
789	x + hmargin + (barWidth / 2),
790	yPos,
791	RGraph.number_format(this, Number(this.data[i]).toFixed(this.Get('chart.labels.above.decimals')),this.Get('chart.units.pre'),this.Get('chart.units.post')),
792	this.Get('chart.labels.above.angle') ? 'bottom' : null,
793	this.Get('chart.labels.above.angle') ? (this.Get('chart.labels.above.angle') > 0 && (this.Get('chart.xaxispos') != 'top') ? 'right' : 'left') : 'center',
794	null,
795	this.Get('chart.labels.above.angle')
796	);
797	}
798
799	// 3D effect
800	if (variant == '3d') {
801
802	var prevStrokeStyle = this.context.strokeStyle;
803	var prevFillStyle = this.context.fillStyle;
804
805	// Draw the top
806	this.context.beginPath();
807	this.context.moveTo(x + hmargin, y);
808	this.context.lineTo(x + hmargin + 10, y - 5);
809	this.context.lineTo(x + hmargin + 10 + barWidth, y - 5);
810	this.context.lineTo(x + hmargin + barWidth, y);
811	this.context.closePath();
812
813	this.context.stroke();
814	this.context.fill();
815
816	// Draw the right hand side
817	this.context.beginPath();
818	this.context.moveTo(x + hmargin + barWidth, y);
819	this.context.lineTo(x + hmargin + barWidth + 10, y - 5);
820	this.context.lineTo(x + hmargin + barWidth + 10, y + height - 5);
821	this.context.lineTo(x + hmargin + barWidth, y + height);
822	this.context.closePath();
823
824	this.context.stroke();
825	this.context.fill();
826
827	// Draw the darker top section
828	this.context.beginPath();
829	this.context.fillStyle = 'rgba(255,255,255,0.3)';
830	this.context.moveTo(x + hmargin, y);
831	this.context.lineTo(x + hmargin + 10, y - 5);
832	this.context.lineTo(x + hmargin + 10 + barWidth, y - 5);
833	this.context.lineTo(x + hmargin + barWidth, y);
834	this.context.lineTo(x + hmargin, y);
835	this.context.closePath();
836
837	this.context.stroke();
838	this.context.fill();
839
840	// Draw the darker right side section
841	this.context.beginPath();
842	this.context.fillStyle = 'rgba(0,0,0,0.4)';
843	this.context.moveTo(x + hmargin + barWidth, y);
844	this.context.lineTo(x + hmargin + barWidth + 10, y - 5);
845	this.context.lineTo(x + hmargin + barWidth + 10, y - 5 + height);
846	this.context.lineTo(x + hmargin + barWidth, y + height);
847	this.context.lineTo(x + hmargin + barWidth, y);
848	this.context.closePath();
849
850	this.context.stroke();
851	this.context.fill();
852
853	this.context.strokeStyle = prevStrokeStyle;
854	this.context.fillStyle = prevFillStyle;
855
856	// Glass variant
857	} else if (variant == 'glass') {
858
859	var grad = this.context.createLinearGradient(
860	x + hmargin,
861	y,
862	x + hmargin + (barWidth / 2),
863	y
864	);
865	grad.addColorStop(0, 'rgba(255,255,255,0.9)');
866	grad.addColorStop(1, 'rgba(255,255,255,0.5)');
867
868	this.context.beginPath();
869	this.context.fillStyle = grad;
870	this.context.fillRect(x + hmargin + 2,y + (this.data[i] > 0 ? 2 : 0),(barWidth / 2) - 2,height - 2);
871	this.context.fill();
872	}
873
874	// Dot chart
875	} else if (variant == 'dot') {
876
877	this.context.beginPath();
878	this.context.moveTo(x + (width / 2), y);
879	this.context.lineTo(x + (width / 2), y + height);
880	this.context.stroke();
881
882	this.context.beginPath();
883	this.context.fillStyle = this.Get('chart.colors')[i];
884	this.context.arc(x + (width / 2), y + (this.data[i] > 0 ? 0 : height), 2, 0, 6.28, 0);
885
886	// Set the colour for the dots
887	this.context.fillStyle = this.Get('chart.colors')[0];
888
889	/**
890	* Sequential colors
891	*/
892	if (this.Get('chart.colors.sequential')) {
893	this.context.fillStyle = colors[i];
894	}
895
896	this.context.stroke();
897	this.context.fill();
898
899	// Pyramid chart
900	} else if (variant == 'pyramid') {
901
902	this.context.beginPath();
903	var startY = (this.Get('chart.xaxispos') == 'center' ? (RGraph.GetHeight(this) / 2) : (RGraph.GetHeight(this) - this.gutterBottom));
904
905	this.context.moveTo(x + hmargin, startY);
906	this.context.lineTo(
907	x + hmargin + (barWidth / 2),
908	y + (this.Get('chart.xaxispos') == 'center' && (this.data[i] < 0) ? height : 0)
909	);
910	this.context.lineTo(x + hmargin + barWidth, startY);
911
912	this.context.closePath();
913
914	this.context.stroke();
915	this.context.fill();
916
917	// Arrow chart
918	} else if (variant == 'arrow') {
919
920	var startY = (this.Get('chart.xaxispos') == 'center' ? (RGraph.GetHeight(this) / 2) : (RGraph.GetHeight(this) - this.gutterBottom));
921
922	this.context.lineWidth = this.Get('chart.linewidth') ? this.Get('chart.linewidth') : 1;
923	this.context.lineCap = 'round';
924
925	this.context.beginPath();
926
927	this.context.moveTo(x + hmargin + (barWidth / 2), startY);
928	this.context.lineTo(x + hmargin + (barWidth / 2), y + (this.Get('chart.xaxispos') == 'center' && (this.data[i] < 0) ? height : 0));
929	this.context.arc(x + hmargin + (barWidth / 2),
930	y + (this.Get('chart.xaxispos') == 'center' && (this.data[i] < 0) ? height : 0),
931	5,
932	this.data[i] > 0 ? 0.78 : 5.6,
933	this.data[i] > 0 ? 0.79 : 5.48,
934	this.data[i] < 0);
935
936	this.context.moveTo(x + hmargin + (barWidth / 2), y + (this.Get('chart.xaxispos') == 'center' && (this.data[i] < 0) ? height : 0));
937	this.context.arc(x + hmargin + (barWidth / 2),
938	y + (this.Get('chart.xaxispos') == 'center' && (this.data[i] < 0) ? height : 0),
939	5,
940	this.data[i] > 0 ? 2.355 : 4,
941	this.data[i] > 0 ? 2.4 : 3.925,
942	this.data[i] < 0);
943
944	this.context.stroke();
945
946	this.context.lineWidth = 1;
947
948	// Unknown variant type
949	} else {
950	alert('[BAR] Warning! Unknown chart.variant: ' + variant);
951	}
952
953	this.coords.push([x + hmargin, y, width - (2 * hmargin), height]);
954
955
956	/**
957	* Stacked bar
958	*/
959	} else if (typeof(this.data[i]) == 'object' && this.Get('chart.grouping') == 'stacked') {
960
961	var barWidth = width - (2 * hmargin);
962	var redrawCoords = [];// Necessary to draw if the shadow is enabled
963	var startY = 0;
964
965	for (j=0; j<this.data[i].length; ++j) {
966
967	// Stacked bar chart and X axis pos in the middle - poitless since negative values are not permitted
968	if (xaxispos == 'center') {
969	alert("[BAR] It's fruitless having the X axis position at the center on a stacked bar chart.");
970	return;
971	}
972
973	// Negative values not permitted for the stacked chart
974	if (this.data[i][j] < 0) {
975	alert('[BAR] Negative values are not permitted with a stacked bar chart. Try a grouped one instead.');
976	return;
977	}
978
979	/**
980	* Set the fill and stroke colors
981	*/
982	this.context.strokeStyle = strokeStyle
983	this.context.fillStyle = colors[j];
984
985	if (this.Get('chart.colors.reverse')) {
986	this.context.fillStyle = colors[this.data[i].length - j - 1];
987	}
988
989	var height = (this.data[i][j] / this.max) * (RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom );
990
991	// If the X axis pos is in the center, we need to half the height
992	if (xaxispos == 'center') {
993	height /= 2;
994	}
995
996	var totalHeight = (RGraph.array_sum(this.data[i]) / this.max) * (RGraph.GetHeight(this) - hmargin - this.gutterTop - this.gutterBottom);
997
998	/**
999	* Store the coords for tooltips
1000	*/
1001	this.coords.push([x + hmargin, y, width - (2 * hmargin), height]);
1002
1003	// MSIE shadow
1004	if (document.all && shadow) {
1005	this.DrawIEShadow([x + hmargin, y, width - (2 * hmargin), height + 1]);
1006	}
1007
1008	this.context.strokeRect(x + hmargin, y, width - (2 * hmargin), height);
1009	this.context.fillRect(x + hmargin, y, width - (2 * hmargin), height);
1010
1011
1012	if (j == 0) {
1013	var startY = y;
1014	var startX = x;
1015	}
1016
1017	/**
1018	* Store the redraw coords if the shadow is enabled
1019	*/
1020	if (shadow) {
1021	redrawCoords.push([x + hmargin, y, width - (2 * hmargin), height, colors[j]]);
1022	}
1023
1024	/**
1025	* Stacked 3D effect
1026	*/
1027	if (variant == '3d') {
1028
1029	var prevFillStyle = this.context.fillStyle;
1030	var prevStrokeStyle = this.context.strokeStyle;
1031
1032
1033	// Draw the top side
1034	if (j == 0) {
1035	this.context.beginPath();
1036	this.context.moveTo(startX + hmargin, y);
1037	this.context.lineTo(startX + 10 + hmargin, y - 5);
1038	this.context.lineTo(startX + 10 + barWidth + hmargin, y - 5);
1039	this.context.lineTo(startX + barWidth + hmargin, y);
1040	this.context.closePath();
1041
1042	this.context.fill();
1043	this.context.stroke();
1044	}
1045
1046	// Draw the side section
1047	this.context.beginPath();
1048	this.context.moveTo(startX + barWidth + hmargin, y);
1049	this.context.lineTo(startX + barWidth + hmargin + 10, y - 5);
1050	this.context.lineTo(startX + barWidth + + hmargin + 10, y - 5 + height);
1051	this.context.lineTo(startX + barWidth + hmargin , y + height);
1052	this.context.closePath();
1053
1054	this.context.fill();
1055	this.context.stroke();
1056
1057	// Draw the darker top side
1058	if (j == 0) {
1059	this.context.fillStyle = 'rgba(255,255,255,0.3)';
1060	this.context.beginPath();
1061	this.context.moveTo(startX + hmargin, y);
1062	this.context.lineTo(startX + 10 + hmargin, y - 5);
1063	this.context.lineTo(startX + 10 + barWidth + hmargin, y - 5);
1064	this.context.lineTo(startX + barWidth + hmargin, y);
1065	this.context.closePath();
1066
1067	this.context.fill();
1068	this.context.stroke();
1069	}
1070
1071	// Draw the darker side section
1072	this.context.fillStyle = 'rgba(0,0,0,0.4)';
1073	this.context.beginPath();
1074	this.context.moveTo(startX + barWidth + hmargin, y);
1075	this.context.lineTo(startX + barWidth + hmargin + 10, y - 5);
1076	this.context.lineTo(startX + barWidth + + hmargin + 10, y - 5 + height);
1077	this.context.lineTo(startX + barWidth + hmargin , y + height);
1078	this.context.closePath();
1079
1080	this.context.fill();
1081	this.context.stroke();
1082
1083	this.context.strokeStyle = prevStrokeStyle;
1084	this.context.fillStyle = prevFillStyle;
1085	}
1086
1087	y += height;
1088	}
1089
1090	// This bit draws the text labels that appear above the bars if requested
1091	if (this.Get('chart.labels.above')) {
1092
1093	// Turn off any shadow
1094	RGraph.NoShadow(this);
1095
1096	this.context.fillStyle = this.Get('chart.text.color');
1097	RGraph.Text(this.context,this.Get('chart.text.font'),typeof(this.Get('chart.labels.above.size')) == 'number' ? this.Get('chart.labels.above.size') : this.Get('chart.text.size') - 3,startX + (barWidth / 2) + this.Get('chart.hmargin'),startY - (this.Get('chart.shadow') && this.Get('chart.shadow.offsety') < 0 ? 7 : 4),String(this.Get('chart.units.pre') + RGraph.array_sum(this.data[i]).toFixed(this.Get('chart.labels.above.decimals')) + this.Get('chart.units.post')),this.Get('chart.labels.above.angle') ? 'bottom' : null,this.Get('chart.labels.above.angle') ? (this.Get('chart.labels.above.angle') > 0 ? 'right' : 'left') : 'center',null,this.Get('chart.labels.above.angle'));
1098
1099	// Turn any shadow back on
1100	if (shadow) {
1101	this.context.shadowColor = shadowColor;
1102	this.context.shadowBlur = shadowBlur;
1103	this.context.shadowOffsetX = shadowOffsetX;
1104	this.context.shadowOffsetY = shadowOffsetY;
1105	}
1106	}
1107
1108
1109	/**
1110	* Redraw the bars if the shadow is enabled due to hem being drawn from the bottom up, and the
1111	* shadow spilling over to higher up bars
1112	*/
1113	if (shadow) {
1114
1115	RGraph.NoShadow(this);
1116
1117	for (k=0; k<redrawCoords.length; ++k) {
1118	this.context.strokeStyle = strokeStyle;
1119	this.context.fillStyle = redrawCoords[k][4];
1120	this.context.strokeRect(redrawCoords[k][0], redrawCoords[k][1], redrawCoords[k][2], redrawCoords[k][3]);
1121	this.context.fillRect(redrawCoords[k][0], redrawCoords[k][1], redrawCoords[k][2], redrawCoords[k][3]);
1122
1123	this.context.stroke();
1124	this.context.fill();
1125	}
1126
1127	// Reset the redraw coords to be empty
1128	redrawCoords = [];
1129	}
1130	/**
1131	* Grouped bar
1132	*/
1133	} else if (typeof(this.data[i]) == 'object' && this.Get('chart.grouping') == 'grouped') {
1134
1135	var redrawCoords = [];
1136	this.context.lineWidth = this.Get('chart.linewidth');
1137
1138	for (j=0; j<this.data[i].length; ++j) {
1139	// Set the fill and stroke colors
1140	this.context.strokeStyle = strokeStyle;
1141	this.context.fillStyle = colors[j];
1142
1143	var individualBarWidth = (width - (2 * hmargin)) / this.data[i].length;
1144	var height = (this.data[i][j] / this.max) * (RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom );
1145
1146	// If the X axis pos is in the center, we need to half the height
1147	if (xaxispos == 'center') {
1148	height /= 2;
1149	}
1150
1151	var startX = x + hmargin + (j * individualBarWidth);
1152
1153	/**
1154	* Determine the start positioning for the bar
1155	*/
1156	if (xaxispos == 'top') {
1157	var startY = this.Get('chart.gutter.top');
1158	var height = Math.abs(height);
1159
1160	} else if (xaxispos == 'center') {
1161	var startY = this.gutterTop + (this.grapharea / 2) - height;
1162
1163	} else {
1164	var startY = this.canvas.height - this.gutterBottom - height;
1165	var height = Math.abs(height);
1166	}
1167
1168	/**
1169	* Draw MSIE shadow
1170	*/
1171	if (RGraph.isIE8() && shadow) {
1172	this.DrawIEShadow([startX, startY, individualBarWidth, height]);
1173	}
1174
1175	this.context.strokeRect(startX, startY, individualBarWidth, height);
1176	this.context.fillRect(startX, startY, individualBarWidth, height);
1177	y += height;
1178
1179	// This bit draws the text labels that appear above the bars if requested
1180	if (this.Get('chart.labels.above')) {
1181
1182	this.context.strokeStyle = 'rgba(0,0,0,0)';
1183
1184	// Turn off any shadow
1185	if (shadow) {
1186	RGraph.NoShadow(this);
1187	}
1188
1189	var yPos = y - 3;
1190
1191	// Account for negative bars
1192	if (this.data[i][j] < 0) {
1193	yPos += height + 6 + (this.Get('chart.text.size') - 4);
1194	}
1195
1196	this.context.fillStyle = this.Get('chart.text.color');
1197	RGraph.Text(this.context,this.Get('chart.text.font'),typeof(this.Get('chart.labels.above.size')) == 'number' ? this.Get('chart.labels.above.size') : this.Get('chart.text.size') - 3,startX + (individualBarWidth / 2),startY - 2,RGraph.number_format(this, this.data[i][j].toFixed(this.Get('chart.labels.above.decimals'))),null,this.Get('chart.labels.above.angle') ? (this.Get('chart.labels.above.angle') > 0 ? 'right' : 'left') : 'center', null, this.Get('chart.labels.above.angle'));
1198
1199	// Turn any shadow back on
1200	if (shadow) {
1201	this.context.shadowColor = shadowColor;
1202	this.context.shadowBlur = shadowBlur;
1203	this.context.shadowOffsetX = shadowOffsetX;
1204	this.context.shadowOffsetY = shadowOffsetY;
1205	}
1206	}
1207
1208	/**
1209	* Grouped 3D effect
1210	*/
1211	if (variant == '3d') {
1212	var prevFillStyle = this.context.fillStyle;
1213	var prevStrokeStyle = this.context.strokeStyle;
1214
1215	// Draw the top side
1216	this.context.beginPath();
1217	this.context.moveTo(startX, startY);
1218	this.context.lineTo(startX + 10, startY - 5);
1219	this.context.lineTo(startX + 10 + individualBarWidth, startY - 5);
1220	this.context.lineTo(startX + individualBarWidth, startY);
1221	this.context.closePath();
1222
1223	this.context.fill();
1224	this.context.stroke();
1225
1226	// Draw the side section
1227	this.context.beginPath();
1228	this.context.moveTo(startX + individualBarWidth, startY);
1229	this.context.lineTo(startX + individualBarWidth + 10, startY - 5);
1230	this.context.lineTo(startX + individualBarWidth + 10, startY - 5 + height);
1231	this.context.lineTo(startX + individualBarWidth , startY + height);
1232	this.context.closePath();
1233
1234	this.context.fill();
1235	this.context.stroke();
1236
1237
1238	// Draw the darker top side
1239	this.context.fillStyle = 'rgba(255,255,255,0.3)';
1240	this.context.beginPath();
1241	this.context.moveTo(startX, startY);
1242	this.context.lineTo(startX + 10, startY - 5);
1243	this.context.lineTo(startX + 10 + individualBarWidth, startY - 5);
1244	this.context.lineTo(startX + individualBarWidth, startY);
1245	this.context.closePath();
1246
1247	this.context.fill();
1248	this.context.stroke();
1249
1250	// Draw the darker side section
1251	this.context.fillStyle = 'rgba(0,0,0,0.4)';
1252	this.context.beginPath();
1253	this.context.moveTo(startX + individualBarWidth, startY);
1254	this.context.lineTo(startX + individualBarWidth + 10, startY - 5);
1255	this.context.lineTo(startX + individualBarWidth + 10, startY - 5 + height);
1256	this.context.lineTo(startX + individualBarWidth , startY + height);
1257	this.context.closePath();
1258
1259	this.context.fill();
1260	this.context.stroke();
1261
1262	this.context.strokeStyle = prevStrokeStyle;
1263	this.context.fillStyle = prevFillStyle;
1264	}
1265
1266	this.coords.push([startX, startY, individualBarWidth, height]);
1267
1268	// Facilitate shadows going to the left
1269	if (this.Get('chart.shadow')) {
1270	redrawCoords.push([startX, startY, individualBarWidth, height]);
1271	}
1272	}
1273
1274	/**
1275	* Redraw the bar if shadows are going to the left
1276	*/
1277	if (redrawCoords.length) {
1278
1279	RGraph.NoShadow(this);
1280
1281	this.context.lineWidth = this.Get('chart.linewidth');
1282
1283	this.context.beginPath();
1284	for (var j=0; j<redrawCoords.length; ++j) {
1285
1286	this.context.fillStyle = this.Get('chart.colors')[j];
1287	this.context.strokeStyle = this.Get('chart.strokecolor');
1288
1289	this.context.fillRect(redrawCoords[j][0], redrawCoords[j][1], redrawCoords[j][2], redrawCoords[j][3]);
1290	this.context.strokeRect(redrawCoords[j][0], redrawCoords[j][1], redrawCoords[j][2], redrawCoords[j][3]);
1291	}
1292	this.context.fill();
1293	this.context.stroke();
1294
1295	redrawCoords = [];
1296	}
1297	}
1298
1299	this.context.closePath();
1300	}
1301
1302	/**
1303	* Turn off any shadow
1304	*/
1305	RGraph.NoShadow(this);
1306
1307
1308	/**
1309	* Install the onclick event handler
1310	*/
1311	if (this.Get('chart.tooltips')) {
1312
1313	// Need to register this object for redrawing
1314	RGraph.Register(this);
1315
1316	/**
1317	* Install the window onclick handler
1318	*/
1319	var window_onclick_func = function (){RGraph.Redraw();};
1320	window.addEventListener('click', window_onclick_func, false);
1321	RGraph.AddEventListener('window_' + this.id, 'click', window_onclick_func);
1322
1323
1324
1325	/**
1326	* If the cursor is over a hotspot, change the cursor to a hand. Bar chart tooltips can now
1327	* be based around the onmousemove event
1328	*/
1329	canvas_onmousemove = function (e)
1330	{
1331	e = RGraph.FixEventObject(e);
1332
1333	var canvas = document.getElementById(e.target.id);
1334	var obj = canvas.__object__;
1335	var barCoords = obj.getBar(e);
1336
1337	/**
1338	* If there are bar coords AND the bar has height
1339	*/
1340
1341	if (barCoords && barCoords[4] > 0) {
1342
1343	/**
1344	* Get the tooltip text
1345	*/
1346	if (typeof(obj.Get('chart.tooltips')) == 'function') {
1347	var text = String(obj.Get('chart.tooltips')(barCoords[5]));
1348
1349	} else if (typeof(obj.Get('chart.tooltips')) == 'object' && typeof(obj.Get('chart.tooltips')[barCoords[5]]) == 'function') {
1350	var text = String(obj.Get('chart.tooltips')[barCoords[5]](barCoords[5]));
1351
1352	} else if (typeof(obj.Get('chart.tooltips')) == 'object' && (typeof(obj.Get('chart.tooltips')[barCoords[5]]) == 'string' \|\| typeof(obj.Get('chart.tooltips')[barCoords[5]]) == 'number')) {
1353	var text = String(obj.Get('chart.tooltips')[barCoords[5]]);
1354
1355	} else {
1356	var text = null;
1357	}
1358
1359	if (text) {
1360	canvas.style.cursor = 'pointer';
1361	} else {
1362	canvas.style.cursor = 'default';
1363	}
1364
1365	/**
1366	* Hide the currently displayed tooltip if the index is the same
1367	*/
1368	if ( RGraph.Registry.Get('chart.tooltip')
1369	&& RGraph.Registry.Get('chart.tooltip').__canvas__.id != obj.id
1370	&& obj.Get('chart.tooltips.event') == 'onmousemove') {
1371
1372	RGraph.Redraw();
1373	RGraph.HideTooltip();
1374	}
1375
1376	/**
1377	* This facilitates the tooltips using the onmousemove event
1378	*/
1379
1380	if ( obj.Get('chart.tooltips.event') == 'onmousemove'
1381	&& (
1382	(RGraph.Registry.Get('chart.tooltip') && RGraph.Registry.Get('chart.tooltip').__index__ != barCoords[5])
1383	\|\| !RGraph.Registry.Get('chart.tooltip')
1384	)
1385	&& text) {
1386	/**
1387	* Show a tooltip if it's defined
1388	*/
1389	RGraph.Redraw(obj);
1390
1391	if (obj.Get('chart.tooltips.highlight')) {
1392	obj.context.beginPath();
1393	obj.context.strokeStyle = obj.Get('chart.highlight.stroke');
1394	obj.context.fillStyle = obj.Get('chart.highlight.fill');
1395	obj.context.strokeRect(barCoords[1], barCoords[2], barCoords[3], barCoords[4]);
1396	obj.context.fillRect(barCoords[1], barCoords[2], barCoords[3], barCoords[4]);
1397
1398	obj.context.stroke();
1399	obj.context.fill();
1400	}
1401
1402	RGraph.Tooltip(canvas, text, e.pageX, e.pageY, barCoords[5]);
1403	}
1404	} else {
1405	canvas.style.cursor = 'default';
1406	}
1407	}
1408	RGraph.AddEventListener(this.id, 'mousemove', canvas_onmousemove);
1409	this.canvas.addEventListener('mousemove', canvas_onmousemove, false);
1410
1411
1412	/**
1413	* Install the onclick event handler for the tooltips
1414	*/
1415	if (this.Get('chart.tooltips.event') == 'onclick') {
1416
1417	canvas_onclick = function (e)
1418	{
1419	var e = RGraph.FixEventObject(e);
1420
1421	// If the button pressed isn't the left, we're not interested
1422	if (e.button != 0) return;
1423
1424	e = RGraph.FixEventObject(e);
1425
1426	var canvas = document.getElementById(this.id);
1427	var obj = canvas.__object__;
1428	var barCoords = obj.getBar(e);
1429
1430	/**
1431	* Redraw the graph first, in effect resetting the graph to as it was when it was first drawn
1432	* This "deselects" any already selected bar
1433	*/
1434	RGraph.Redraw();
1435
1436	/**
1437	* Loop through the bars determining if the mouse is over a bar
1438	*/
1439	if (barCoords) {
1440
1441	/**
1442	* Get the tooltip text
1443	*/
1444	if (typeof(obj.Get('chart.tooltips')) == 'function') {
1445	var text = String(obj.Get('chart.tooltips')(barCoords[5]));
1446
1447	} else if (typeof(obj.Get('chart.tooltips')) == 'object' && typeof(obj.Get('chart.tooltips')[barCoords[5]]) == 'function') {
1448	var text = String(obj.Get('chart.tooltips')[barCoords[5]](barCoords[5]));
1449
1450	} else if (typeof(obj.Get('chart.tooltips')) == 'object') {
1451	var text = String(obj.Get('chart.tooltips')[barCoords[5]]);
1452
1453	} else {
1454	var text = null;
1455	}
1456
1457	/**
1458	* Show a tooltip if it's defined
1459	*/
1460	if (text && text != 'undefined') {
1461
1462	if (obj.Get('chart.tooltips.highlight')) {
1463	// [TODO] Allow customisation of the highlight colors
1464	obj.context.beginPath();
1465	obj.context.strokeStyle = obj.Get('chart.highlight.stroke');
1466	obj.context.fillStyle = obj.Get('chart.highlight.fill');
1467	obj.context.strokeRect(barCoords[1], barCoords[2], barCoords[3], barCoords[4]);
1468	obj.context.fillRect(barCoords[1], barCoords[2], barCoords[3], barCoords[4]);
1469
1470	obj.context.stroke();
1471	obj.context.fill();
1472	}
1473
1474	RGraph.Tooltip(canvas, text, e.pageX, e.pageY, barCoords[5]);
1475	}
1476	}
1477
1478	/**
1479	* Stop the event bubbling
1480	*/
1481	e.stopPropagation();
1482	}
1483	RGraph.AddEventListener(this.id, 'click', canvas_onclick);
1484	this.canvas.addEventListener('click', canvas_onclick, false);
1485	}
1486
1487
1488	// This resets the bar graph
1489	// 8th August 2010 : Is this redundant
1490	//if (typeof(obj) != 'undefined' && obj == RGraph.Registry.Get('chart.tooltip')) {
1491	// obj.style.display = 'none';
1492	// RGraph.Registry.Set('chart.tooltip', null)
1493	//}
1494	}
1495	}
1496
1497	/**
1498	* Draws the labels for the graph
1499	*/
1500	RGraph.Bar.prototype.DrawLabels = function ()
1501	{
1502	var context = this.context;
1503	var text_angle = this.Get('chart.text.angle');
1504	var text_size = this.Get('chart.text.size');
1505	var labels = this.Get('chart.labels');
1506
1507
1508	// Draw the Y axis labels:
1509	if (this.Get('chart.ylabels')) {
1510	this.Drawlabels_top();
1511	this.Drawlabels_center();
1512	this.Drawlabels_bottom();
1513	}
1514
1515	/**
1516	* The X axis labels
1517	*/
1518	if (typeof(labels) == 'object' && labels) {
1519
1520	var yOffset = 13 + Number(this.Get('chart.xlabels.offset'));
1521
1522	/**
1523	* Text angle
1524	*/
1525	var angle = 0;
1526	var halign = 'center';
1527
1528	if (text_angle > 0) {
1529	angle = -1 * text_angle;
1530	halign = 'right';
1531	yOffset -= 5;
1532
1533	if (this.Get('chart.xaxispos') == 'top') {
1534	halign = 'left';
1535	yOffset += 5;
1536	}
1537	}
1538
1539	// Draw the X axis labels
1540	context.fillStyle = this.Get('chart.text.color');
1541
1542	// How wide is each bar
1543	var barWidth = (RGraph.GetWidth(this) - this.gutterRight - this.gutterLeft) / labels.length;
1544
1545	// Reset the xTickGap
1546	xTickGap = (RGraph.GetWidth(this) - this.gutterRight - this.gutterLeft) / labels.length
1547
1548	// Draw the X tickmarks
1549	var i=0;
1550	var font = this.Get('chart.text.font');
1551
1552	for (x=this.gutterLeft + (xTickGap / 2); x<=RGraph.GetWidth(this) - this.gutterRight; x+=xTickGap) {
1553	RGraph.Text(context, font,
1554	text_size,
1555	x + (this.Get('chart.text.angle') == 90 ? 0 : 0),
1556	this.Get('chart.xaxispos') == 'top' ? this.gutterTop - yOffset + text_size - 1: (RGraph.GetHeight(this) - this.gutterBottom) + yOffset,
1557	String(labels[i++]),
1558	(this.Get('chart.text.angle') == 90 ? 'center' : null),
1559	halign,
1560	null,
1561	angle);
1562	}
1563	}
1564	}
1565
1566	/**
1567	* Draws the X axis at the top
1568	*/
1569	RGraph.Bar.prototype.Drawlabels_top = function ()
1570	{
1571	this.context.beginPath();
1572	this.context.fillStyle = this.Get('chart.text.color');
1573	this.context.strokeStyle = 'black';
1574
1575	if (this.Get('chart.xaxispos') == 'top') {
1576
1577	var context = this.context;
1578	var interval = (this.grapharea * (1/5) );
1579	var text_size = this.Get('chart.text.size');
1580	var units_pre = this.Get('chart.units.pre');
1581	var units_post = this.Get('chart.units.post');
1582	var align = this.Get('chart.yaxispos') == 'left' ? 'right' : 'left';
1583	var font = this.Get('chart.text.font');
1584	var numYLabels = this.Get('chart.ylabels.count');
1585
1586	if (this.Get('chart.ylabels.inside') == true) {
1587	var xpos = this.Get('chart.yaxispos') == 'left' ? this.gutterLeft + 5 : RGraph.GetWidth(this) - this.gutterRight - 5;
1588	var align = this.Get('chart.yaxispos') == 'left' ? 'left' : 'right';
1589	var boxed = true;
1590	} else {
1591	var xpos = this.Get('chart.yaxispos') == 'left' ? this.gutterLeft - 5 : this.canvas.width - this.gutterRight + 5;
1592	var boxed = false;
1593	}
1594
1595	/**
1596	* Draw specific Y labels here so that the local variables can be reused
1597	*/
1598	if (typeof(this.Get('chart.ylabels.specific')) == 'object' && this.Get('chart.ylabels.specific')) {
1599
1600	var labels = RGraph.array_reverse(this.Get('chart.ylabels.specific'));
1601	var grapharea = RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom;
1602
1603	for (var i=0; i<labels.length; ++i) {
1604
1605	var y = this.gutterTop + (grapharea * (i / labels.length)) + (grapharea / labels.length);
1606
1607	RGraph.Text(context, font, text_size, xpos, y, labels[i], 'center', align, boxed);
1608	}
1609
1610	return;
1611	}
1612
1613	// 1(ish) label
1614	if (numYLabels == 3 \|\| numYLabels == 5) {
1615	RGraph.Text(context, font, text_size, xpos, this.gutterTop + this.halfTextHeight + interval, '-' + RGraph.number_format(this, this.scale[0], units_pre, units_post), null, align, boxed);
1616
1617	// 5 labels
1618	if (numYLabels == 5) {
1619	RGraph.Text(context, font, text_size, xpos, (1*interval) + this.gutterTop + this.halfTextHeight + interval, '-' + RGraph.number_format(this, this.scale[1], units_pre, units_post), null, align, boxed);
1620	RGraph.Text(context, font, text_size, xpos, (3*interval) + this.gutterTop + this.halfTextHeight + interval, '-' + RGraph.number_format(this, this.scale[3], units_pre, units_post), null, align, boxed);
1621	}
1622
1623	// 3 labels
1624	if (numYLabels == 3 \|\| numYLabels == 5) {
1625	RGraph.Text(context, font, text_size, xpos, (2*interval) + this.gutterTop + this.halfTextHeight + interval, '-' + RGraph.number_format(this, this.scale[2], units_pre, units_post), null, align, boxed);
1626	RGraph.Text(context, font, text_size, xpos, (4*interval) + this.gutterTop + this.halfTextHeight + interval, '-' + RGraph.number_format(this, this.scale[4], units_pre, units_post), null, align, boxed);
1627	}
1628	}
1629
1630	// 10 Y labels
1631	if (numYLabels == 10) {
1632
1633	interval = (this.grapharea / numYLabels );
1634
1635	for (var i=10; i>0; --i) {
1636	RGraph.Text(context, font, text_size, xpos,this.gutterTop + ((this.grapharea / numYLabels) * i),'-' + RGraph.number_format(this,((this.scale[4] / numYLabels) * i).toFixed((this.Get('chart.scale.decimals'))), units_pre, units_post), 'center', align, boxed);
1637	}
1638	}
1639	}
1640
1641	this.context.fill();
1642	this.context.stroke();
1643	}
1644
1645	/**
1646	* Draws the X axis in the middle
1647	*/
1648	RGraph.Bar.prototype.Drawlabels_center = function ()
1649	{
1650	var font = this.Get('chart.text.font');
1651	var numYLabels = this.Get('chart.ylabels.count');
1652
1653	this.context.fillStyle = this.Get('chart.text.color');
1654
1655	if (this.Get('chart.xaxispos') == 'center') {
1656
1657	/**
1658	* Draw the top labels
1659	*/
1660	var interval = (this.grapharea * (1/10) );
1661	var text_size = this.Get('chart.text.size');
1662	var units_pre = this.Get('chart.units.pre');
1663	var units_post = this.Get('chart.units.post');
1664	var context = this.context;
1665	var align = '';
1666	var xpos = 0;
1667	var boxed = false;
1668
1669	this.context.fillStyle = this.Get('chart.text.color');
1670	this.context.strokeStyle = 'black';
1671
1672	if (this.Get('chart.ylabels.inside') == true) {
1673	var xpos = this.Get('chart.yaxispos') == 'left' ? this.gutterLeft + 5 : RGraph.GetWidth(this) - this.gutterRight - 5;
1674	var align = this.Get('chart.yaxispos') == 'left' ? 'left' : 'right';
1675	var boxed = true;
1676	} else {
1677	var xpos = this.Get('chart.yaxispos') == 'left' ? this.gutterLeft - 5 : RGraph.GetWidth(this) - this.gutterRight + 5;
1678	var align = this.Get('chart.yaxispos') == 'left' ? 'right' : 'left';
1679	var boxed = false;
1680	}
1681
1682
1683
1684
1685
1686
1687
1688
1689
1690
1691
1692
1693	/**
1694	* Draw specific Y labels here so that the local variables can be reused
1695	*/
1696	if (typeof(this.Get('chart.ylabels.specific')) == 'object' && this.Get('chart.ylabels.specific')) {
1697
1698	var labels = this.Get('chart.ylabels.specific');
1699	var grapharea = this.canvas.height - this.gutterTop - this.gutterBottom;
1700
1701	// Draw the top halves labels
1702	for (var i=0; i<labels.length; ++i) {
1703
1704	var y = this.gutterTop + ((grapharea / 2) / labels.length) * i;
1705
1706	RGraph.Text(context, font, text_size, xpos, y, String(labels[i]), 'center', align, boxed);
1707	}
1708
1709	// Draw the bottom halves labels
1710	for (var i=labels.length-1; i>=0; --i) {
1711	var y = this.gutterTop + (grapharea * ( (i+1) / (labels.length * 2) )) + (grapharea / 2);
1712
1713	RGraph.Text(context, font, text_size, xpos, y, labels[labels.length - i - 1], 'center', align, boxed);
1714	}
1715
1716	return;
1717	}
1718
1719
1720
1721
1722
1723
1724
1725
1726
1727
1728
1729
1730	if (numYLabels == 3 \|\| numYLabels == 5) {
1731	RGraph.Text(context, font, text_size, xpos, this.gutterTop + this.halfTextHeight, RGraph.number_format(this, this.scale[4], units_pre, units_post), null, align, boxed);
1732
1733	if (numYLabels == 5) {
1734	RGraph.Text(context, font, text_size, xpos, (1*interval) + this.gutterTop + this.halfTextHeight, RGraph.number_format(this, this.scale[3], units_pre, units_post), null, align, boxed);
1735	RGraph.Text(context, font, text_size, xpos, (3*interval) + this.gutterTop + this.halfTextHeight, RGraph.number_format(this, this.scale[1], units_pre, units_post), null, align, boxed);
1736	}
1737
1738	if (numYLabels == 3 \|\| numYLabels == 5) {
1739	RGraph.Text(context, font, text_size, xpos, (4*interval) + this.gutterTop + this.halfTextHeight, RGraph.number_format(this, this.scale[0], units_pre, units_post), null, align, boxed);
1740	RGraph.Text(context, font, text_size, xpos, (2*interval) + this.gutterTop + this.halfTextHeight, RGraph.number_format(this, this.scale[2], units_pre, units_post), null, align, boxed);
1741	}
1742	} else if (numYLabels == 10) {
1743	// 10Y labels
1744	interval = (this.grapharea / numYLabels) / 2;
1745
1746	for (var i=0; i<numYLabels; ++i) {
1747	RGraph.Text(context, font, text_size, xpos,this.gutterTop + ((this.grapharea / (numYLabels * 2)) * i),RGraph.number_format(this, ((this.scale[4] / numYLabels) * (numYLabels - i)).toFixed((this.Get('chart.scale.decimals'))), units_pre, units_post), 'center', align, boxed);
1748	}
1749	}
1750	///////////////////////////////////////////////////////////////////////////////////
1751
1752	/**
1753	* Draw the bottom (X axis) labels
1754	*/
1755	var interval = (this.grapharea) / 10;
1756
1757	if (numYLabels == 3 \|\| numYLabels == 5) {
1758	if (numYLabels == 3 \|\| numYLabels == 5) {
1759	RGraph.Text(context, font, text_size, xpos, (this.grapharea + this.gutterTop + this.halfTextHeight) - (4 * interval), '-' + RGraph.number_format(this, this.scale[0], units_pre, units_post), null, align, boxed);
1760	RGraph.Text(context, font, text_size, xpos, (this.grapharea + this.gutterTop + this.halfTextHeight) - (2 * interval), '-' + RGraph.number_format(this, this.scale[2], units_pre, units_post), null, align, boxed);
1761	}
1762
1763	if (numYLabels == 5) {
1764	RGraph.Text(context, font, text_size, xpos, (this.grapharea + this.gutterTop + this.halfTextHeight) - (3 * interval), '-' + RGraph.number_format(this, this.scale[1], units_pre, units_post), null, align, boxed);
1765	RGraph.Text(context, font, text_size, xpos, (this.grapharea + this.gutterTop + this.halfTextHeight) - interval, '-' + RGraph.number_format(this, this.scale[3], units_pre, units_post), null, align, boxed);
1766	}
1767
1768	RGraph.Text(context, font, text_size, xpos, this.grapharea + this.gutterTop + this.halfTextHeight, '-' + RGraph.number_format(this, this.scale[4], units_pre, units_post), null, align, boxed);
1769
1770	} else if (numYLabels == 10) {
1771
1772	// Arbitrary number of Y labels
1773	interval = (this.grapharea / numYLabels) / 2;
1774
1775	for (var i=0; i<numYLabels; ++i) {
1776	RGraph.Text(context, font, text_size, xpos,this.gutterTop + (this.grapharea / 2) + ((this.grapharea / (numYLabels * 2)) * i) + (this.grapharea / (numYLabels * 2)),RGraph.number_format(this, ((this.scale[4] / numYLabels) * (i+1)).toFixed((this.Get('chart.scale.decimals'))), '-' + units_pre, units_post),'center', align, boxed);
1777	}
1778	}
1779
1780
1781
1782	}
1783	}
1784
1785	/**
1786	* Draws the X axdis at the bottom (the default)
1787	*/
1788	RGraph.Bar.prototype.Drawlabels_bottom = function ()
1789	{
1790	this.context.beginPath();
1791	this.context.fillStyle = this.Get('chart.text.color');
1792	this.context.strokeStyle = 'black';
1793
1794	if (this.Get('chart.xaxispos') != 'center' && this.Get('chart.xaxispos') != 'top') {
1795
1796	var interval = (this.grapharea * (1/5) );
1797	var text_size = this.Get('chart.text.size');
1798	var units_pre = this.Get('chart.units.pre');
1799	var units_post = this.Get('chart.units.post');
1800	var context = this.context;
1801	var align = this.Get('chart.yaxispos') == 'left' ? 'right' : 'left';
1802	var font = this.Get('chart.text.font');
1803	var numYLabels = this.Get('chart.ylabels.count');
1804
1805	if (this.Get('chart.ylabels.inside') == true) {
1806	var xpos = this.Get('chart.yaxispos') == 'left' ? this.gutterLeft + 5 : RGraph.GetWidth(this) - this.gutterRight - 5;
1807	var align = this.Get('chart.yaxispos') == 'left' ? 'left' : 'right';
1808	var boxed = true;
1809	} else {
1810	var xpos = this.Get('chart.yaxispos') == 'left' ? this.gutterLeft - 5 : RGraph.GetWidth(this) - this.gutterRight + 5;
1811	var boxed = false;
1812	}
1813
1814	/**
1815	* Draw specific Y labels here so that the local variables can be reused
1816	*/
1817	if (this.Get('chart.ylabels.specific') && typeof(this.Get('chart.ylabels.specific')) == 'object') {
1818
1819	var labels = this.Get('chart.ylabels.specific');
1820	var grapharea = RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom;
1821
1822	for (var i=0; i<labels.length; ++i) {
1823	var y = this.gutterTop + (grapharea * (i / labels.length));
1824
1825	RGraph.Text(context, font, text_size, xpos, y, labels[i], 'center', align, boxed);
1826	}
1827
1828	return;
1829	}
1830
1831	// 1 label
1832	if (numYLabels == 3 \|\| numYLabels == 5) {
1833	RGraph.Text(context, font, text_size, xpos, this.gutterTop + this.halfTextHeight, RGraph.number_format(this, this.scale[4], units_pre, units_post), null, align, boxed);
1834
1835	// 5 labels
1836	if (numYLabels == 5) {
1837	RGraph.Text(context, font, text_size, xpos, (1*interval) + this.gutterTop + this.halfTextHeight, RGraph.number_format(this, this.scale[3], units_pre, units_post), null, align, boxed);
1838	RGraph.Text(context, font, text_size, xpos, (3*interval) + this.gutterTop + this.halfTextHeight, RGraph.number_format(this, this.scale[1], units_pre, units_post), null, align, boxed);
1839	}
1840
1841	// 3 labels
1842	if (numYLabels == 3 \|\| numYLabels == 5) {
1843	RGraph.Text(context, font, text_size, xpos, (2*interval) + this.gutterTop + this.halfTextHeight, RGraph.number_format(this, this.scale[2], units_pre, units_post), null, align, boxed);
1844	RGraph.Text(context, font, text_size, xpos, (4*interval) + this.gutterTop + this.halfTextHeight, RGraph.number_format(this, this.scale[0], units_pre, units_post), null, align, boxed);
1845	}
1846	}
1847
1848	// 10 Y labels
1849	if (numYLabels == 10) {
1850
1851	interval = (this.grapharea / numYLabels );
1852
1853	for (var i=0; i<numYLabels; ++i) {
1854	RGraph.Text(context, font, text_size, xpos, this.gutterTop + ((this.grapharea / numYLabels) * i), RGraph.number_format(this,((this.scale[4] / numYLabels) * (numYLabels - i)).toFixed((this.Get('chart.scale.decimals'))), units_pre, units_post), 'center', align, boxed);
1855	}
1856	}
1857	}
1858
1859	this.context.fill();
1860	this.context.stroke();
1861	}
1862
1863
1864	/**
1865	* This function is used by MSIE only to manually draw the shadow
1866	*
1867	* @param array coords The coords for the bar
1868	*/
1869	RGraph.Bar.prototype.DrawIEShadow = function (coords)
1870	{
1871	var prevFillStyle = this.context.fillStyle;
1872	var offsetx = this.Get('chart.shadow.offsetx');
1873	var offsety = this.Get('chart.shadow.offsety');
1874
1875	this.context.lineWidth = this.Get('chart.linewidth');
1876	this.context.fillStyle = this.Get('chart.shadow.color');
1877	this.context.beginPath();
1878
1879	// Draw shadow here
1880	this.context.fillRect(coords[0] + offsetx, coords[1] + offsety, coords[2], coords[3]);
1881
1882	this.context.fill();
1883
1884	// Change the fillstyle back to what it was
1885	this.context.fillStyle = prevFillStyle;
1886	}
1887
1888
1889	/**
1890	* Not used by the class during creating the graph, but is used by event handlers
1891	* to get the coordinates (if any) of the selected bar
1892	*/
1893	RGraph.Bar.prototype.getBar = function (e)
1894	{
1895	var canvas = e.target;
1896	var obj = e.target.__object__;
1897	var mouseCoords = RGraph.getMouseXY(e);
1898
1899	/**
1900	* Loop through the bars determining if the mouse is over a bar
1901	*/
1902	for (var i=0; i<obj.coords.length; i++) {
1903
1904	var mouseX = mouseCoords[0];
1905	var mouseY = mouseCoords[1];
1906
1907	var left = obj.coords[i][0];
1908	var top = obj.coords[i][1];
1909	var width = obj.coords[i][2];
1910	var height = obj.coords[i][3];
1911
1912	if ( mouseX >= left
1913	&& mouseX <= left + width
1914	&& mouseY >= top
1915	&& mouseY <= top + height) {
1916
1917	return [obj, left, top, width, height, i];
1918	}
1919	}
1920
1921	return null;
1922	}

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

Download in other formats: