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

Last change on this file since 232 was 77, checked in by fpvanagthoven, 14 years ago

RGraph
File size: 30.4 KB
RevLine 
[77]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.