Context Navigation

source: Dev/branches/jQueryUI/client/RGraph/libraries/RGraph.bipolar.js @ 254

Last change on this file since 254 was 249, checked in by hendrikvanantwerpen, 13 years ago

This one's for Subversion, because it's so close...

First widget (stripped down sequencer).
Seperated client and server code in two direcotry trees.

File size: 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: