Context Navigation

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

Last change on this file since 77 was 77, checked in by fpvanagthoven, 14 years ago
RGraph
File size: 30.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 bi-polar/age frequency constructor.
19	*
20	* @param string id The id of the canvas
21	* @param array left The left set of data points
22	* @param array right The right set of data points
23	*/
24	RGraph.Bipolar = function (id, left, right)
25	{
26	// Get the canvas and context objects
27	this.id = id;
28	this.canvas = document.getElementById(id);
29	this.context = this.canvas.getContext('2d');
30	this.canvas.__object__ = this;
31	this.type = 'bipolar';
32	this.coords = [];
33	this.max = 0;
34	this.isRGraph = true;
35
36
37	/**
38	* Compatibility with older browsers
39	*/
40	RGraph.OldBrowserCompat(this.context);
41
42
43	// The left and right data respectively
44	this.left = left;
45	this.right = right;
46	this.data = [left, right];
47
48	this.properties = {
49	'chart.margin': 2,
50	'chart.xtickinterval': null,
51	'chart.labels': [],
52	'chart.text.size': 10,
53	'chart.text.color': 'black',
54	'chart.text.font': 'Verdana',
55	'chart.title.left': '',
56	'chart.title.right': '',
57	'chart.gutter.center': 60,
58	'chart.gutter.left': 25,
59	'chart.gutter.right': 25,
60	'chart.gutter.top': 25,
61	'chart.gutter.bottom': 25,
62	'chart.title': '',
63	'chart.title.background': null,
64	'chart.title.hpos': null,
65	'chart.title.vpos': null,
66	'chart.colors': ['#0f0'],
67	'chart.contextmenu': null,
68	'chart.tooltips': null,
69	'chart.tooltips.effect': 'fade',
70	'chart.tooltips.css.class': 'RGraph_tooltip',
71	'chart.tooltips.highlight': true,
72	'chart.highlight.stroke': 'black',
73	'chart.highlight.fill': 'rgba(255,255,255,0.5)',
74	'chart.units.pre': '',
75	'chart.units.post': '',
76	'chart.shadow': false,
77	'chart.shadow.color': '#666',
78	'chart.shadow.offsetx': 3,
79	'chart.shadow.offsety': 3,
80	'chart.shadow.blur': 3,
81	'chart.annotatable': false,
82	'chart.annotate.color': 'black',
83	'chart.xmax': null,
84	'chart.scale.decimals': null,
85	'chart.scale.point': '.',
86	'chart.scale.thousand': ',',
87	'chart.axis.color': 'black',
88	'chart.zoom.factor': 1.5,
89	'chart.zoom.fade.in': true,
90	'chart.zoom.fade.out': true,
91	'chart.zoom.hdir': 'right',
92	'chart.zoom.vdir': 'down',
93	'chart.zoom.frames': 10,
94	'chart.zoom.delay': 50,
95	'chart.zoom.shadow': true,
96	'chart.zoom.mode': 'canvas',
97	'chart.zoom.thumbnail.width': 75,
98	'chart.zoom.thumbnail.height': 75,
99	'chart.zoom.background': true,
100	'chart.zoom.action': 'zoom',
101	'chart.resizable': false,
102	'chart.resize.handle.adjust': [0,0],
103	'chart.resize.handle.background': null,
104	'chart.strokestyle': '#333'
105	}
106
107	// Pad the arrays so they're the same size
108	while (this.left.length < this.right.length) this.left.push(0);
109	while (this.left.length > this.right.length) this.right.push(0);
110	}
111
112
113	/**
114	* The setter
115	*
116	* @param name string The name of the parameter to set
117	* @param value mixed The value of the paraneter
118	*/
119	RGraph.Bipolar.prototype.Set = function (name, value)
120	{
121	this.properties[name.toLowerCase()] = value;
122	}
123
124
125	/**
126	* The getter
127	*
128	* @param name string The name of the parameter to get
129	*/
130	RGraph.Bipolar.prototype.Get = function (name)
131	{
132	return this.properties[name.toLowerCase()];
133	}
134
135
136	/**
137	* Draws the graph
138	*/
139	RGraph.Bipolar.prototype.Draw = function ()
140	{
141	/**
142	* Fire the onbeforedraw event
143	*/
144	RGraph.FireCustomEvent(this, 'onbeforedraw');
145
146
147	/**
148	* Clear all of this canvases event handlers (the ones installed by RGraph)
149	*/
150	RGraph.ClearEventListeners(this.id);
151
152	/**
153	* This is new in May 2011 and facilitates indiviual gutter settings,
154	* eg chart.gutter.left
155	*/
156	this.gutterLeft = this.Get('chart.gutter.left');
157	this.gutterRight = this.Get('chart.gutter.right');
158	this.gutterTop = this.Get('chart.gutter.top');
159	this.gutterBottom = this.Get('chart.gutter.bottom');
160
161
162
163	// Reset the data to what was initially supplied
164	this.left = this.data[0];
165	this.right = this.data[1];
166
167
168	/**
169	* Reset the coords array
170	*/
171	this.coords = [];
172
173	this.GetMax();
174	this.DrawAxes();
175	this.DrawTicks();
176	this.DrawLeftBars();
177	this.DrawRightBars();
178
179	if (this.Get('chart.axis.color') != 'black') {
180	this.DrawAxes(); // Draw the axes again (if the axes color is not black)
181	}
182
183	this.DrawLabels();
184	this.DrawTitles();
185
186	/**
187	* Setup the context menu if required
188	*/
189	if (this.Get('chart.contextmenu')) {
190	RGraph.ShowContext(this);
191	}
192
193
194	/**
195	* Install the on* event handlers
196	*/
197	if (this.Get('chart.tooltips')) {
198
199
200	// Register the object so that it gets redrawn
201	RGraph.Register(this);
202
203
204	/**
205	* Install the window onclick handler
206	*/
207
208	/**
209	* Install the window event handler
210	*/
211	var eventHandler_window_click = function ()
212	{
213	RGraph.Redraw();
214	}
215	window.addEventListener('click', eventHandler_window_click, false);
216	RGraph.AddEventListener('window_' + this.id, 'click', eventHandler_window_click);
217
218
219
220	/**
221	* If the cursor is over a hotspot, change the cursor to a hand
222	*/
223	var eventHandler_canvas_mousemove = function (e)
224	{
225	e = RGraph.FixEventObject(e);
226
227	var canvas = document.getElementById(this.id);
228	var obj = canvas.__object__;
229
230	/**
231	* Get the mouse X/Y coordinates
232	*/
233	var mouseCoords = RGraph.getMouseXY(e);
234	var bar = obj.getBar(e);
235
236	/**
237	* Loop through the bars determining if the mouse is over a bar
238	*/
239	for (var i=0; i<obj.coords.length; i++) {
240
241	var mouseX = mouseCoords[0]; // In relation to the canvas
242	var mouseY = mouseCoords[1]; // In relation to the canvas
243	var left = obj.coords[i][0];
244	var top = obj.coords[i][1];
245	var width = obj.coords[i][2];
246	var height = obj.coords[i][3];
247
248	if (mouseX >= left && mouseX <= (left + width ) && mouseY >= top && mouseY <= (top + height) ) {
249	/**
250	* Get the tooltip text
251	*/
252	if (typeof(obj.Get('chart.tooltips')) == 'function') {
253	var text = obj.Get('chart.tooltips')(i);
254
255	} else if (typeof(obj.Get('chart.tooltips')) == 'object' && typeof(obj.Get('chart.tooltips')[i]) == 'function') {
256	var text = obj.Get('chart.tooltips')[i](i);
257
258	} else if (typeof(obj.Get('chart.tooltips')) == 'object') {
259	var text = obj.Get('chart.tooltips')[i];
260
261	} else {
262	var text = '';
263	}
264
265	if (text) {
266	canvas.style.cursor = 'pointer';
267	}
268	return;
269	}
270	}
271
272	canvas.style.cursor = 'default';
273	}
274	this.canvas.addEventListener('mousemove', eventHandler_canvas_mousemove, false);
275	RGraph.AddEventListener(this.id, 'mouseover', eventHandler_canvas_mousemove);
276
277
278	/**
279	* Install the onclick event handler for the tooltips
280	*/
281	var eventHandler_canvas_click = function (e)
282	{
283	e = RGraph.FixEventObject(e);
284
285	var canvas = document.getElementById(this.id)
286	var obj = canvas.__object__;
287
288	/**
289	* Redraw the graph first, in effect resetting the graph to as it was when it was first drawn
290	* This "deselects" any already selected bar
291	*/
292	RGraph.Clear(canvas);
293	obj.Draw();
294
295	/**
296	* Get the mouse X/Y coordinates
297	*/
298	var mouseCoords = RGraph.getMouseXY(e);
299	var bar = obj.getBar(e);
300
301	/**
302	* This bit shows the tooltip (if required)
303	*/
304	if (bar) {
305
306	var mouseX = mouseCoords[0]; // In relation to the canvas
307	var mouseY = mouseCoords[1]; // In relation to the canvas
308	var left = bar[0];
309	var top = bar[1];
310	var width = bar[2];
311	var height = bar[3];
312	var index = bar[4];
313
314	/**
315	* Show a tooltip if it's defined
316	*/
317	if (obj.Get('chart.tooltips')) {
318
319	/**
320	* Get the tooltip text
321	*/
322	if (typeof(obj.Get('chart.tooltips')) == 'function') {
323	var text = obj.Get('chart.tooltips')(index);
324
325	} else if (typeof(obj.Get('chart.tooltips')) == 'object' && typeof(obj.Get('chart.tooltips')[index]) == 'function') {
326	var text = obj.Get('chart.tooltips')[index](index);
327
328	} else if (typeof(obj.Get('chart.tooltips')) == 'object') {
329	var text = obj.Get('chart.tooltips')[index];
330
331	} else {
332	var text = '';
333	}
334
335	// Only now show a tooltip if one has been set
336	if (text) {
337	obj.context.beginPath();
338	obj.context.strokeStyle = obj.Get('chart.highlight.stroke');
339	obj.context.fillStyle = obj.Get('chart.highlight.fill');
340	obj.context.strokeRect(left, top, width, height);
341	obj.context.fillRect(left, top, width, height);
342	obj.context.stroke();
343	obj.context.fill();
344
345	RGraph.Tooltip(canvas, text, e.pageX, e.pageY, index);
346	}
347	}
348	}
349
350	/**
351	* Stop the event bubbling
352	*/
353	e.stopPropagation();
354
355	return false;
356	}
357	this.canvas.addEventListener('click', eventHandler_canvas_click, false);
358	RGraph.AddEventListener(this.id, 'click', eventHandler_canvas_click);
359
360	// This resets the bipolar graph
361	if (RGraph.Registry.Get('chart.tooltip')) {
362	RGraph.Registry.Get('chart.tooltip').style.display = 'none';
363	RGraph.Registry.Set('chart.tooltip', null)
364	}
365	}
366
367	/**
368	* If the canvas is annotatable, do install the event handlers
369	*/
370	if (this.Get('chart.annotatable')) {
371	RGraph.Annotate(this);
372	}
373
374	/**
375	* This bit shows the mini zoom window if requested
376	*/
377	if (this.Get('chart.zoom.mode') == 'thumbnail' \|\| this.Get('chart.zoom.mode') == 'area') {
378	RGraph.ShowZoomWindow(this);
379	}
380
381
382	/**
383	* This function enables resizing
384	*/
385	if (this.Get('chart.resizable')) {
386	RGraph.AllowResizing(this);
387	}
388
389	/**
390	* Add the common .getShape() method
391	*/
392	this.getShape = this.getBar;
393
394	/**
395	* Fire the RGraph ondraw event
396	*/
397	RGraph.FireCustomEvent(this, 'ondraw');
398	}
399
400
401	/**
402	* Draws the axes
403	*/
404	RGraph.Bipolar.prototype.DrawAxes = function ()
405	{
406	// Draw the left set of axes
407	this.context.beginPath();
408	this.context.strokeStyle = this.Get('chart.axis.color');
409
410	this.axisWidth = (RGraph.GetWidth(this) - this.Get('chart.gutter.center') - this.gutterLeft - this.gutterRight) / 2;
411	this.axisHeight = RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom;
412
413	this.context.moveTo(this.gutterLeft, RGraph.GetHeight(this) - this.gutterBottom);
414	this.context.lineTo(this.gutterLeft + this.axisWidth, RGraph.GetHeight(this) - this.gutterBottom);
415	this.context.lineTo(this.gutterLeft + this.axisWidth, this.gutterTop);
416
417	this.context.stroke();
418
419	// Draw the right set of axes
420	this.context.beginPath();
421
422	var x = this.gutterLeft + this.axisWidth + this.Get('chart.gutter.center');
423
424	this.context.moveTo(x, this.gutterTop);
425	this.context.lineTo(x, RGraph.GetHeight(this) - this.gutterBottom);
426	this.context.lineTo(RGraph.GetWidth(this) - this.gutterRight, RGraph.GetHeight(this) - this.gutterBottom);
427
428	this.context.stroke();
429	}
430
431
432	/**
433	* Draws the tick marks on the axes
434	*/
435	RGraph.Bipolar.prototype.DrawTicks = function ()
436	{
437	var numDataPoints = this.left.length;
438	var barHeight = ( (RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom)- (this.left.length * (this.Get('chart.margin') * 2) )) / numDataPoints;
439
440	// Draw the left Y tick marks
441	for (var i = RGraph.GetHeight(this) - this.gutterBottom; i >= this.gutterTop; i -= (barHeight + ( this.Get('chart.margin') * 2)) ) {
442	if (i < (RGraph.GetHeight(this) - this.gutterBottom) ) {
443	this.context.beginPath();
444	this.context.moveTo(this.gutterLeft + this.axisWidth, i);
445	this.context.lineTo(this.gutterLeft + this.axisWidth + 3, i);
446	this.context.stroke();
447	}
448	}
449
450	//Draw the right axis Y tick marks
451	for (var i = RGraph.GetHeight(this) - this.gutterBottom; i >= this.gutterTop; i -= (barHeight + ( this.Get('chart.margin') * 2)) ) {
452	if (i < (RGraph.GetHeight(this) - this.gutterBottom) ) {
453	this.context.beginPath();
454	this.context.moveTo(this.gutterLeft + this.axisWidth + this.Get('chart.gutter.center'), i);
455	this.context.lineTo(this.gutterLeft + this.axisWidth + this.Get('chart.gutter.center') - 3, i);
456	this.context.stroke();
457	}
458	}
459
460	var xInterval = this.axisWidth / 10;
461
462	// Is chart.xtickinterval specified ? If so, use that.
463	if (typeof(this.Get('chart.xtickinterval')) == 'number') {
464	xInterval = this.Get('chart.xtickinterval');
465	}
466
467
468	// Draw the left sides X tick marks
469	for (i=this.gutterLeft; i<(this.gutterLeft + this.axisWidth); i+=xInterval) {
470	this.context.beginPath();
471	this.context.moveTo(i, RGraph.GetHeight(this) - this.gutterBottom);
472	this.context.lineTo(i, (RGraph.GetHeight(this) - this.gutterBottom) + 4);
473	this.context.closePath();
474
475	this.context.stroke();
476	}
477
478	// Draw the right sides X tick marks
479	var stoppingPoint = RGraph.GetWidth(this) - this.gutterRight;
480
481	for (i=(this.gutterLeft + this.axisWidth + this.Get('chart.gutter.center') + xInterval); i<=stoppingPoint; i+=xInterval) {
482	this.context.beginPath();
483	this.context.moveTo(i, RGraph.GetHeight(this) - this.gutterBottom);
484	this.context.lineTo(i, (RGraph.GetHeight(this) - this.gutterBottom) + 4);
485	this.context.closePath();
486
487	this.context.stroke();
488	}
489
490	// Store this for later
491	this.barHeight = barHeight;
492	}
493
494
495	/**
496	* Figures out the maximum value, or if defined, uses xmax
497	*/
498	RGraph.Bipolar.prototype.GetMax = function()
499	{
500	var max = 0;
501	var dec = this.Get('chart.scale.decimals');
502
503	// chart.xmax defined
504	if (this.Get('chart.xmax')) {
505
506	max = this.Get('chart.xmax');
507
508	this.scale = [];
509	this.scale[0] = Number((max / 5) * 1).toFixed(dec);
510	this.scale[1] = Number((max / 5) * 2).toFixed(dec);
511	this.scale[2] = Number((max / 5) * 3).toFixed(dec);
512	this.scale[3] = Number((max / 5) * 4).toFixed(dec);
513	this.scale[4] = Number(max).toFixed(dec);
514
515	this.max = max;
516
517
518	// Generate the scale ourselves
519	} else {
520	this.leftmax = RGraph.array_max(this.left);
521	this.rightmax = RGraph.array_max(this.right);
522	max = Math.max(this.leftmax, this.rightmax);
523
524	this.scale = RGraph.getScale(max, this);
525	this.scale[0] = Number(this.scale[0]).toFixed(dec);
526	this.scale[1] = Number(this.scale[1]).toFixed(dec);
527	this.scale[2] = Number(this.scale[2]).toFixed(dec);
528	this.scale[3] = Number(this.scale[3]).toFixed(dec);
529	this.scale[4] = Number(this.scale[4]).toFixed(dec);
530
531	this.max = this.scale[4];
532	}
533
534	// Don't need to return it as it is stored in this.max
535	}
536
537
538	/**
539	* Function to draw the left hand bars
540	*/
541	RGraph.Bipolar.prototype.DrawLeftBars = function ()
542	{
543	// Set the stroke colour
544	this.context.strokeStyle = this.Get('chart.strokestyle');
545
546	for (i=0; i<this.left.length; ++i) {
547
548	/**
549	* Turn on a shadow if requested
550	*/
551	if (this.Get('chart.shadow')) {
552	this.context.shadowColor = this.Get('chart.shadow.color');
553	this.context.shadowBlur = this.Get('chart.shadow.blur');
554	this.context.shadowOffsetX = this.Get('chart.shadow.offsetx');
555	this.context.shadowOffsetY = this.Get('chart.shadow.offsety');
556	}
557
558	this.context.beginPath();
559
560	// Set the colour
561	if (this.Get('chart.colors')[i]) {
562	this.context.fillStyle = this.Get('chart.colors')[i];
563	}
564
565	/**
566	* Work out the coordinates
567	*/
568	var width = ( (this.left[i] / this.max) * this.axisWidth);
569	var coords = [
570	this.gutterLeft + this.axisWidth - width,
571	this.gutterTop + (i * ( this.axisHeight / this.left.length)) + this.Get('chart.margin'),
572	width,
573	this.barHeight
574	];
575
576	// Draw the IE shadow if necessary
577	if (RGraph.isIE8() && this.Get('chart.shadow')) {
578	this.DrawIEShadow(coords);
579	}
580
581
582	this.context.strokeRect(coords[0], coords[1], coords[2], coords[3]);
583	this.context.fillRect(coords[0], coords[1], coords[2], coords[3]);
584
585	this.context.stroke();
586	this.context.fill();
587
588	/**
589	* Add the coordinates to the coords array
590	*/
591	this.coords.push([
592	coords[0],
593	coords[1],
594	coords[2],
595	coords[3]
596	]);
597	}
598
599	/**
600	* Turn off any shadow
601	*/
602	RGraph.NoShadow(this);
603	}
604
605
606	/**
607	* Function to draw the right hand bars
608	*/
609	RGraph.Bipolar.prototype.DrawRightBars = function ()
610	{
611	// Set the stroke colour
612	this.context.strokeStyle = this.Get('chart.strokestyle');
613
614	/**
615	* Turn on a shadow if requested
616	*/
617	if (this.Get('chart.shadow')) {
618	this.context.shadowColor = this.Get('chart.shadow.color');
619	this.context.shadowBlur = this.Get('chart.shadow.blur');
620	this.context.shadowOffsetX = this.Get('chart.shadow.offsetx');
621	this.context.shadowOffsetY = this.Get('chart.shadow.offsety');
622	}
623
624	for (var i=0; i<this.right.length; ++i) {
625	this.context.beginPath();
626
627	// Set the colour
628	if (this.Get('chart.colors')[i]) {
629	this.context.fillStyle = this.Get('chart.colors')[i];
630	}
631
632
633	var width = ( (this.right[i] / this.max) * this.axisWidth);
634	var coords = [
635	this.gutterLeft + this.axisWidth + this.Get('chart.gutter.center'),
636	this.Get('chart.margin') + (i * (this.axisHeight / this.right.length)) + this.gutterTop,
637	width,
638	this.barHeight
639	];
640
641	// Draw the IE shadow if necessary
642	if (RGraph.isIE8() && this.Get('chart.shadow')) {
643	this.DrawIEShadow(coords);
644	}
645	this.context.strokeRect(coords[0], coords[1], coords[2], coords[3]);
646	this.context.fillRect(coords[0], coords[1], coords[2], coords[3]);
647
648	this.context.closePath();
649
650	/**
651	* Add the coordinates to the coords array
652	*/
653	this.coords.push([
654	coords[0],
655	coords[1],
656	coords[2],
657	coords[3]
658	]);
659	}
660
661	this.context.stroke();
662
663	/**
664	* Turn off any shadow
665	*/
666	RGraph.NoShadow(this);
667	}
668
669
670	/**
671	* Draws the titles
672	*/
673	RGraph.Bipolar.prototype.DrawLabels = function ()
674	{
675	this.context.fillStyle = this.Get('chart.text.color');
676
677	var labelPoints = new Array();
678	var font = this.Get('chart.text.font');
679	var size = this.Get('chart.text.size');
680
681	var max = Math.max(this.left.length, this.right.length);
682
683	for (i=0; i<max; ++i) {
684	var barAreaHeight = RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom;
685	var barHeight = barAreaHeight / this.left.length;
686	var yPos = (i * barAreaHeight) + this.gutterTop;
687
688	labelPoints.push(this.gutterTop + (i * barHeight) + (barHeight / 2) + 5);
689	}
690
691	for (i=0; i<labelPoints.length; ++i) {
692	RGraph.Text(this.context,
693	this.Get('chart.text.font'),
694	this.Get('chart.text.size'),
695	this.gutterLeft + this.axisWidth + (this.Get('chart.gutter.center') / 2),
696	labelPoints[i],
697	String(this.Get('chart.labels')[i] ? this.Get('chart.labels')[i] : ''),
698	null,
699	'center');
700	}
701
702	// Now draw the X labels for the left hand side
703	RGraph.Text(this.context,font,size,this.gutterLeft,RGraph.GetHeight(this) - this.gutterBottom + 14,RGraph.number_format(this, this.scale[4], this.Get('chart.units.pre'), this.Get('chart.units.post')),null,'center');
704	RGraph.Text(this.context, font, size, this.gutterLeft + ((RGraph.GetWidth(this) - this.Get('chart.gutter.center') - this.gutterLeft - this.gutterRight) / 2) * (1/5), RGraph.GetHeight(this) - this.gutterBottom + 14, RGraph.number_format(this, this.scale[3], this.Get('chart.units.pre'), this.Get('chart.units.post')), null, 'center');
705	RGraph.Text(this.context, font, size, this.gutterLeft + ((RGraph.GetWidth(this) - this.Get('chart.gutter.center') - this.gutterLeft - this.gutterRight) / 2) * (2/5), RGraph.GetHeight(this) - this.gutterBottom + 14, RGraph.number_format(this, this.scale[2], this.Get('chart.units.pre'), this.Get('chart.units.post')), null, 'center');
706	RGraph.Text(this.context, font, size, this.gutterLeft + ((RGraph.GetWidth(this) - this.Get('chart.gutter.center') - this.gutterLeft - this.gutterRight) / 2) * (3/5), RGraph.GetHeight(this) - this.gutterBottom + 14, RGraph.number_format(this, this.scale[1], this.Get('chart.units.pre'), this.Get('chart.units.post')), null, 'center');
707	RGraph.Text(this.context, font, size, this.gutterLeft + ((RGraph.GetWidth(this) - this.Get('chart.gutter.center') - this.gutterLeft - this.gutterRight) / 2) * (4/5), RGraph.GetHeight(this) - this.gutterBottom + 14, RGraph.number_format(this, this.scale[0], this.Get('chart.units.pre'), this.Get('chart.units.post')), null, 'center');
708
709	// Now draw the X labels for the right hand side
710	RGraph.Text(this.context, font, size, RGraph.GetWidth(this) - this.gutterRight, RGraph.GetHeight(this) - this.gutterBottom + 14, RGraph.number_format(this, this.scale[4], this.Get('chart.units.pre'), this.Get('chart.units.post')), null, 'center');
711	RGraph.Text(this.context, font, size, RGraph.GetWidth(this) - this.gutterRight - (this.axisWidth * 0.2), RGraph.GetHeight(this) - this.gutterBottom + 14,RGraph.number_format(this, this.scale[3], this.Get('chart.units.pre'), this.Get('chart.units.post')), null, 'center');
712	RGraph.Text(this.context, font, size, RGraph.GetWidth(this) - this.gutterRight - (this.axisWidth * 0.4), RGraph.GetHeight(this) - this.gutterBottom + 14,RGraph.number_format(this, this.scale[2], this.Get('chart.units.pre'), this.Get('chart.units.post')), null, 'center');
713	RGraph.Text(this.context, font, size, RGraph.GetWidth(this) - this.gutterRight - (this.axisWidth * 0.6), RGraph.GetHeight(this) - this.gutterBottom + 14,RGraph.number_format(this, this.scale[1], this.Get('chart.units.pre'), this.Get('chart.units.post')), null, 'center');
714	RGraph.Text(this.context, font, size, RGraph.GetWidth(this) - this.gutterRight - (this.axisWidth * 0.8), RGraph.GetHeight(this) - this.gutterBottom + 14,RGraph.number_format(this, this.scale[0], this.Get('chart.units.pre'), this.Get('chart.units.post')), null, 'center');
715	}
716
717	/**
718	* Draws the titles
719	*/
720	RGraph.Bipolar.prototype.DrawTitles = function ()
721	{
722	RGraph.Text(this.context, this.Get('chart.text.font'), this.Get('chart.text.size'), this.gutterLeft + 5, (this.gutterTop / 2) + 5, String(this.Get('chart.title.left')), 'center');
723	RGraph.Text(this.context,this.Get('chart.text.font'), this.Get('chart.text.size'), RGraph.GetWidth(this) - this.gutterRight - 5, (this.gutterTop / 2) + 5, String(this.Get('chart.title.right')), 'center', 'right');
724
725	// Draw the main title for the whole chart
726	RGraph.DrawTitle(this.canvas, this.Get('chart.title'), this.gutterTop);
727	}
728
729
730	/**
731	* This function is used by MSIE only to manually draw the shadow
732	*
733	* @param array coords The coords for the bar
734	*/
735	RGraph.Bipolar.prototype.DrawIEShadow = function (coords)
736	{
737	var prevFillStyle = this.context.fillStyle;
738	var offsetx = this.Get('chart.shadow.offsetx');
739	var offsety = this.Get('chart.shadow.offsety');
740
741	this.context.lineWidth = this.Get('chart.linewidth');
742	this.context.fillStyle = this.Get('chart.shadow.color');
743	this.context.beginPath();
744
745	// Draw shadow here
746	this.context.fillRect(coords[0] + offsetx, coords[1] + offsety, coords[2],coords[3]);
747
748	this.context.fill();
749
750	// Change the fillstyle back to what it was
751	this.context.fillStyle = prevFillStyle;
752	}
753
754
755	/**
756	* Returns the appropriate focussed bar coordinates
757	*
758	* @param e object The event object
759	*/
760	RGraph.Bipolar.prototype.getBar = function (e)
761	{
762	var obj = e.target.__object__;
763	var canvas = obj.canvas;
764	var context = obj.context;
765	var mouseCoords = RGraph.getMouseXY(e);
766
767	/**
768	* Loop through the bars determining if the mouse is over a bar
769	*/
770	for (var i=0; i<obj.coords.length; i++) {
771
772	var mouseX = mouseCoords[0];
773	var mouseY = mouseCoords[1];
774	var left = obj.coords[i][0];
775	var top = obj.coords[i][1];
776	var width = obj.coords[i][2];
777	var height = obj.coords[i][3];
778
779	if (mouseX >= left && mouseX <= (left + width) && mouseY >= top && mouseY <= (top + height) ) {
780	return [left,top,width,height,i];
781	}
782	}
783
784	return null;
785	}

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

Download in other formats: