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

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

RGraph
File size: 86.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 line chart constructor
19    *
20    * @param object canvas The cxanvas object
21    * @param array  data   The chart data
22    * @param array  ...    Other lines to plot
23    */
24    RGraph.Line = function (id)
25    {
26        // Get the canvas and context objects
27        this.id                = id;
28        this.canvas            = document.getElementById(id);
29        this.context           = this.canvas.getContext ? this.canvas.getContext("2d") : null;
30        this.canvas.__object__ = this;
31        this.type              = 'line';
32        this.max               = 0;
33        this.coords            = [];
34        this.coords2           = [];
35        this.coords.key        = [];
36        this.hasnegativevalues = false;
37        this.isRGraph          = true;
38
39
40
41        /**
42        * Compatibility with older browsers
43        */
44        RGraph.OldBrowserCompat(this.context);
45
46
47        // Various config type stuff
48        this.properties = {
49            'chart.background.barcolor1':   'rgba(0,0,0,0)',
50            'chart.background.barcolor2':   'rgba(0,0,0,0)',
51            'chart.background.grid':        1,
52            'chart.background.grid.width':  1,
53            'chart.background.grid.hsize':  25,
54            'chart.background.grid.vsize':  25,
55            'chart.background.grid.color':  '#ddd',
56            'chart.background.grid.vlines': true,
57            'chart.background.grid.hlines': true,
58            'chart.background.grid.border': true,
59            'chart.background.grid.autofit':           false,
60            'chart.background.grid.autofit.align':     false,
61            'chart.background.grid.autofit.numhlines': 7,
62            'chart.background.grid.autofit.numvlines': 20,
63            'chart.background.hbars':       null,
64            'chart.background.image':       null,
65            'chart.labels':                 null,
66            'chart.labels.ingraph':         null,
67            'chart.labels.above':           false,
68            'chart.labels.above.size':      8,
69            'chart.xtickgap':               20,
70            'chart.smallxticks':            3,
71            'chart.largexticks':            5,
72            'chart.ytickgap':               20,
73            'chart.smallyticks':            3,
74            'chart.largeyticks':            5,
75            'chart.linewidth':              1.01,
76            'chart.colors':                 ['red', '#0f0', '#00f', '#f0f', '#ff0', '#0ff'],
77            'chart.hmargin':                0,
78            'chart.tickmarks.dot.color':    'white',
79            'chart.tickmarks':              null,
80            'chart.tickmarks.linewidth':    null,
81            'chart.ticksize':               3,
82            'chart.gutter.left':            25,
83            'chart.gutter.right':           25,
84            'chart.gutter.top':             25,
85            'chart.gutter.bottom':          25,
86            'chart.tickdirection':          -1,
87            'chart.yaxispoints':            5,
88            'chart.fillstyle':              null,
89            'chart.xaxispos':               'bottom',
90            'chart.yaxispos':               'left',
91            'chart.xticks':                 null,
92            'chart.text.size':              10,
93            'chart.text.angle':             0,
94            'chart.text.color':             'black',
95            'chart.text.font':              'Verdana',
96            'chart.ymin':                   null,
97            'chart.ymax':                   null,
98            'chart.title':                  '',
99            'chart.title.background':       null,
100            'chart.title.hpos':             null,
101            'chart.title.vpos':             0.5,
102            'chart.title.xaxis':            '',
103            'chart.title.yaxis':            '',
104            'chart.title.xaxis.pos':        0.25,
105            'chart.title.yaxis.pos':        0.25,
106            'chart.shadow':                 false,
107            'chart.shadow.offsetx':         2,
108            'chart.shadow.offsety':         2,
109            'chart.shadow.blur':            3,
110            'chart.shadow.color':           'rgba(0,0,0,0.5)',
111            'chart.tooltips':               null,
112            'chart.tooltips.effect':         'fade',
113            'chart.tooltips.css.class':      'RGraph_tooltip',
114            'chart.tooltips.highlight':     true,
115            'chart.highlight.stroke':       '#999',
116            'chart.highlight.fill':         'white',
117            'chart.stepped':                false,
118            'chart.key':                    [],
119            'chart.key.background':         'white',
120            'chart.key.position':           'graph',
121            'chart.key.halign':             null,
122            'chart.key.shadow':             false,
123            'chart.key.shadow.color':       '#666',
124            'chart.key.shadow.blur':        3,
125            'chart.key.shadow.offsetx':     2,
126            'chart.key.shadow.offsety':     2,
127            'chart.key.position.gutter.boxed': true,
128            'chart.key.position.x':         null,
129            'chart.key.position.y':         null,
130            'chart.key.color.shape':        'square',
131            'chart.key.rounded':            true,
132            'chart.key.linewidth':          1,
133            'chart.key.interactive':        false,
134            'chart.contextmenu':            null,
135            'chart.ylabels':                true,
136            'chart.ylabels.count':          5,
137            'chart.ylabels.inside':         false,
138            'chart.ylabels.invert':         false,
139            'chart.xlabels.inside':         false,
140            'chart.xlabels.inside.color':   'rgba(255,255,255,0.5)',
141            'chart.noaxes':                 false,
142            'chart.noyaxis':                false,
143            'chart.noxaxis':                false,
144            'chart.noendxtick':             false,
145            'chart.units.post':             '',
146            'chart.units.pre':              '',
147            'chart.scale.decimals':         null,
148            'chart.scale.point':            '.',
149            'chart.scale.thousand':         ',',
150            'chart.crosshairs':             false,
151            'chart.crosshairs.color':       '#333',
152            'chart.annotatable':            false,
153            'chart.annotate.color':         'black',
154            'chart.axesontop':              false,
155            'chart.filled':                 false,
156            'chart.filled.range':           false,
157            'chart.filled.accumulative':    true,
158            'chart.variant':                null,
159            'chart.axis.color':             'black',
160            'chart.zoom.factor':            1.5,
161            'chart.zoom.fade.in':           true,
162            'chart.zoom.fade.out':          true,
163            'chart.zoom.hdir':              'right',
164            'chart.zoom.vdir':              'down',
165            'chart.zoom.frames':            15,
166            'chart.zoom.delay':             33,
167            'chart.zoom.shadow':            true,
168            'chart.zoom.mode':              'canvas',
169            'chart.zoom.thumbnail.width':   75,
170            'chart.zoom.thumbnail.height':  75,
171            'chart.zoom.background':        true,
172            'chart.zoom.action':            'zoom',
173            'chart.backdrop':               false,
174            'chart.backdrop.size':          30,
175            'chart.backdrop.alpha':         0.2,
176            'chart.resizable':              false,
177            'chart.resize.handle.adjust':   [0,0],
178            'chart.resize.handle.background': null,
179            'chart.adjustable':             false,
180            'chart.noredraw':               false,
181            'chart.outofbounds':            false,
182            'chart.chromefix':              true,
183            'chart.draw.delegate':          null
184        }
185
186        /**
187        * Change null arguments to empty arrays
188        */
189        for (var i=1; i<arguments.length; ++i) {
190            if (typeof(arguments[i]) == 'null' || !arguments[i]) {
191                arguments[i] = [];
192            }
193        }
194
195
196        /**
197        * Store the original data. Thiss also allows for giving arguments as one big array.
198        */
199        this.original_data = [];
200
201        for (var i=1; i<arguments.length; ++i) {
202            if (arguments[1] && typeof(arguments[1]) == 'object' && arguments[1][0] && typeof(arguments[1][0]) == 'object' && arguments[1][0].length) {
203
204                var tmp = [];
205
206                for (var i=0; i<arguments[1].length; ++i) {
207                    tmp[i] = RGraph.array_clone(arguments[1][i]);
208                }
209
210                for (var j=0; j<tmp.length; ++j) {
211                    this.original_data[j] = RGraph.array_clone(tmp[j]);
212                }
213
214            } else {
215                this.original_data[i - 1] = RGraph.array_clone(arguments[i]);
216            }
217        }
218
219        // Check for support
220        if (!this.canvas) {
221            alert('[LINE] Fatal error: no canvas support');
222            return;
223        }
224       
225        /**
226        * Store the data here as one big array
227        */
228        this.data_arr = [];
229
230        for (var i=1; i<arguments.length; ++i) {
231            for (var j=0; j<arguments[i].length; ++j) {
232                this.data_arr.push(arguments[i][j]);
233            }
234        }
235
236
237        /**
238        * Set the .getShape commonly named method
239        */
240        this.getShape = this.getPoint;
241    }
242
243
244    /**
245    * An all encompassing accessor
246    *
247    * @param string name The name of the property
248    * @param mixed value The value of the property
249    */
250    RGraph.Line.prototype.Set = function (name, value)
251    {
252        // Consolidate the tooltips
253        if (name == 'chart.tooltips') {
254       
255            var tooltips = [];
256
257            for (var i=1; i<arguments.length; i++) {
258                if (typeof(arguments[i]) == 'object' && arguments[i][0]) {
259                    for (var j=0; j<arguments[i].length; j++) {
260                        tooltips.push(arguments[i][j]);
261                    }
262
263                } else if (typeof(arguments[i]) == 'function') {
264                    tooltips = arguments[i];
265
266                } else {
267                    tooltips.push(arguments[i]);
268                }
269            }
270
271            // Because "value" is used further down at the end of this function, set it to the expanded array os tooltips
272            value = tooltips;
273        }
274
275        /**
276        * Reverse the tickmarks to make them correspond to the right line
277        */
278        if (name == 'chart.tickmarks' && typeof(value) == 'object' && value) {
279            value = RGraph.array_reverse(value);
280        }
281       
282        /**
283        * Inverted Y axis should show the bottom end of the scale
284        */
285        if (name == 'chart.ylabels.invert' && value && this.Get('chart.ymin') == null) {
286            this.Set('chart.ymin', 0);
287        }
288       
289        /**
290        * If (buggy) Chrome and the linewidth is 1, change it to 1.01
291        */
292        if (name == 'chart.linewidth' && navigator.userAgent.match(/Chrome/)) {
293            if (value == 1) {
294                value = 1.01;
295           
296            } else if (RGraph.is_array(value)) {
297                for (var i=0; i<value.length; ++i) {
298                    if (typeof(value[i]) == 'number' && value[i] == 1) {
299                        value[i] = 1.01;
300                    }
301                }
302            }
303        }
304       
305        /**
306        * Check for xaxispos
307        */
308        if (name == 'chart.xaxispos' ) {
309            if (value != 'bottom' && value != 'center' && value != 'top') {
310                alert('[LINE] (' + this.id + ') chart.xaxispos should be top, center or bottom. Tried to set it to: ' + value + ' Changing it to center');
311                value = 'center';
312            }
313        }
314
315        this.properties[name] = value;
316    }
317
318
319    /**
320    * An all encompassing accessor
321    *
322    * @param string name The name of the property
323    */
324    RGraph.Line.prototype.Get = function (name)
325    {
326        return this.properties[name];
327    }
328
329
330    /**
331    * The function you call to draw the line chart
332    */
333    RGraph.Line.prototype.Draw = function ()
334    {
335        // MUST be the first thing done!
336        if (typeof(this.Get('chart.background.image')) == 'string' && !this.__background_image__) {
337            RGraph.DrawBackgroundImage(this);
338            return;
339        }
340
341        /**
342        * Fire the onbeforedraw event
343        */
344        RGraph.FireCustomEvent(this, 'onbeforedraw');
345
346        /**
347        * Clear all of this canvases event handlers (the ones installed by RGraph)
348        */
349        RGraph.ClearEventListeners(this.id);
350       
351        /**
352        * This is new in May 2011 and facilitates indiviual gutter settings,
353        * eg chart.gutter.left
354        */
355        this.gutterLeft   = this.Get('chart.gutter.left');
356        this.gutterRight  = this.Get('chart.gutter.right');
357        this.gutterTop    = this.Get('chart.gutter.top');
358        this.gutterBottom = this.Get('chart.gutter.bottom');
359
360
361        /**
362        * Check for Chrome 6 and shadow
363        *
364        * TODO Remove once it's been fixed (for a while)
365        * SEARCH TAGS: CHROME FIX SHADOW BUG
366        */
367        if (   this.Get('chart.shadow')
368            && navigator.userAgent.match(/Chrome/)
369            && this.Get('chart.linewidth') <= 1
370            && this.Get('chart.chromefix')
371            && this.Get('chart.shadow.blur') > 0) {
372                alert('[RGRAPH WARNING] Chrome has a shadow bug, meaning you should increase the linewidth to at least 1.01');
373        }
374
375
376        // Reset the data back to that which was initially supplied
377        this.data = RGraph.array_clone(this.original_data);
378
379
380        // Reset the max value
381        this.max = 0;
382
383        /**
384        * Reverse the datasets so that the data and the labels tally
385        */
386        this.data = RGraph.array_reverse(this.data);
387
388        if (this.Get('chart.filled') && !this.Get('chart.filled.range') && this.data.length > 1 && this.Get('chart.filled.accumulative')) {
389
390            var accumulation = [];
391       
392            for (var set=0; set<this.data.length; ++set) {
393                for (var point=0; point<this.data[set].length; ++point) {
394                    this.data[set][point] = Number(accumulation[point] ? accumulation[point] : 0) + this.data[set][point];
395                    accumulation[point] = this.data[set][point];
396                }
397            }
398        }
399
400        /**
401        * Get the maximum Y scale value
402        */
403        if (this.Get('chart.ymax')) {
404           
405            this.max = this.Get('chart.ymax');
406            this.min = this.Get('chart.ymin') ? this.Get('chart.ymin') : 0;
407
408            this.scale = [
409                          ( ((this.max - this.min) * (1/5)) + this.min).toFixed(this.Get('chart.scale.decimals')),
410                          ( ((this.max - this.min) * (2/5)) + this.min).toFixed(this.Get('chart.scale.decimals')),
411                          ( ((this.max - this.min) * (3/5)) + this.min).toFixed(this.Get('chart.scale.decimals')),
412                          ( ((this.max - this.min) * (4/5)) + this.min).toFixed(this.Get('chart.scale.decimals')),
413                          this.max.toFixed(this.Get('chart.scale.decimals'))
414                         ];
415
416            // Check for negative values
417            if (!this.Get('chart.outofbounds')) {
418                for (dataset=0; dataset<this.data.length; ++dataset) {
419                    for (var datapoint=0; datapoint<this.data[dataset].length; datapoint++) {
420           
421                        // Check for negative values
422                        this.hasnegativevalues = (this.data[dataset][datapoint] < 0) || this.hasnegativevalues;
423                    }
424                }
425            }
426
427        } else {
428
429            this.min = this.Get('chart.ymin') ? this.Get('chart.ymin') : 0;
430
431            // Work out the max Y value
432            for (dataset=0; dataset<this.data.length; ++dataset) {
433                for (var datapoint=0; datapoint<this.data[dataset].length; datapoint++) {
434   
435                    this.max = Math.max(this.max, this.data[dataset][datapoint] ? Math.abs(parseFloat(this.data[dataset][datapoint])) : 0);
436   
437                    // Check for negative values
438                    if (!this.Get('chart.outofbounds')) {
439                        this.hasnegativevalues = (this.data[dataset][datapoint] < 0) || this.hasnegativevalues;
440                    }
441                }
442            }
443
444            // 20th April 2009 - moved out of the above loop
445            this.scale = RGraph.getScale(Math.abs(parseFloat(this.max)), this);
446            this.max   = this.scale[4] ? this.scale[4] : 0;
447
448            if (this.Get('chart.ymin')) {
449                this.scale[0] = ((this.max - this.Get('chart.ymin')) * (1/5)) + this.Get('chart.ymin');
450                this.scale[1] = ((this.max - this.Get('chart.ymin')) * (2/5)) + this.Get('chart.ymin');
451                this.scale[2] = ((this.max - this.Get('chart.ymin')) * (3/5)) + this.Get('chart.ymin');
452                this.scale[3] = ((this.max - this.Get('chart.ymin')) * (4/5)) + this.Get('chart.ymin');
453                this.scale[4] = ((this.max - this.Get('chart.ymin')) * (5/5)) + this.Get('chart.ymin');
454            }
455
456            if (typeof(this.Get('chart.scale.decimals')) == 'number') {
457                this.scale[0] = Number(this.scale[0]).toFixed(this.Get('chart.scale.decimals'));
458                this.scale[1] = Number(this.scale[1]).toFixed(this.Get('chart.scale.decimals'));
459                this.scale[2] = Number(this.scale[2]).toFixed(this.Get('chart.scale.decimals'));
460                this.scale[3] = Number(this.scale[3]).toFixed(this.Get('chart.scale.decimals'));
461                this.scale[4] = Number(this.scale[4]).toFixed(this.Get('chart.scale.decimals'));
462            }
463        }
464
465        /**
466        * Setup the context menu if required
467        */
468        if (this.Get('chart.contextmenu')) {
469            RGraph.ShowContext(this);
470        }
471
472        /**
473        * Reset the coords array otherwise it will keep growing
474        */
475        this.coords = [];
476
477        /**
478        * Work out a few things. They need to be here because they depend on things you can change before you
479        * call Draw() but after you instantiate the object
480        */
481        this.grapharea      = RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom;
482        this.halfgrapharea  = this.grapharea / 2;
483        this.halfTextHeight = this.Get('chart.text.size') / 2;
484
485        // Check the combination of the X axis position and if there any negative values
486        //
487        // 19th Dec 2010 - removed for Opera since it can be reported incorrectly whn there
488        // are multiple graphs on the page
489        if (this.Get('chart.xaxispos') == 'bottom' && this.hasnegativevalues && navigator.userAgent.indexOf('Opera') == -1) {
490            alert('[LINE] You have negative values and the X axis is at the bottom. This is not good...');
491        }
492
493        if (this.Get('chart.variant') == '3d') {
494            RGraph.Draw3DAxes(this);
495        }
496       
497        // Progressively Draw the chart
498        RGraph.background.Draw(this);
499
500        /**
501        * Draw any horizontal bars that have been defined
502        */
503        if (this.Get('chart.background.hbars') && this.Get('chart.background.hbars').length > 0) {
504            RGraph.DrawBars(this);
505        }
506
507        if (this.Get('chart.axesontop') == false) {
508            this.DrawAxes();
509        }
510
511        /**
512        * Handle the appropriate shadow color. This now facilitates an array of differing
513        * shadow colors
514        */
515        var shadowColor = this.Get('chart.shadow.color');
516       
517        if (typeof(shadowColor) == 'object') {
518            shadowColor = RGraph.array_reverse(RGraph.array_clone(this.Get('chart.shadow.color')));
519        }
520
521
522        for (var i=(this.data.length - 1), j=0; i>=0; i--, j++) {
523
524            this.context.beginPath();
525
526            /**
527            * Turn on the shadow if required
528            */
529            if (this.Get('chart.shadow') && !this.Get('chart.filled')) {
530
531                /**
532                * Accommodate an array of shadow colors as well as a single string
533                */
534                if (typeof(shadowColor) == 'object' && shadowColor[i - 1]) {
535                    this.context.shadowColor = shadowColor[i];
536                } else if (typeof(shadowColor) == 'object') {
537                    this.context.shadowColor = shadowColor[0];
538                } else if (typeof(shadowColor) == 'string') {
539                    this.context.shadowColor = shadowColor;
540                }
541
542                this.context.shadowBlur    = this.Get('chart.shadow.blur');
543                this.context.shadowOffsetX = this.Get('chart.shadow.offsetx');
544                this.context.shadowOffsetY = this.Get('chart.shadow.offsety');
545           
546            } else if (this.Get('chart.filled') && this.Get('chart.shadow')) {
547                alert('[LINE] Shadows are not permitted when the line is filled');
548            }
549
550            /**
551            * Draw the line
552            */
553
554            if (this.Get('chart.fillstyle')) {
555                if (typeof(this.Get('chart.fillstyle')) == 'object' && this.Get('chart.fillstyle')[j]) {
556                   var fill = this.Get('chart.fillstyle')[j];
557               
558                } else if (typeof(this.Get('chart.fillstyle')) == 'string') {
559                    var fill = this.Get('chart.fillstyle');
560   
561                } else {
562                    alert('[LINE] Warning: chart.fillstyle must be either a string or an array with the same number of elements as you have sets of data');
563                }
564            } else if (this.Get('chart.filled')) {
565                var fill = this.Get('chart.colors')[j];
566
567            } else {
568                var fill = null;
569            }
570
571            /**
572            * Figure out the tickmark to use
573            */
574            if (this.Get('chart.tickmarks') && typeof(this.Get('chart.tickmarks')) == 'object') {
575                var tickmarks = this.Get('chart.tickmarks')[i];
576            } else if (this.Get('chart.tickmarks') && typeof(this.Get('chart.tickmarks')) == 'string') {
577                var tickmarks = this.Get('chart.tickmarks');
578            } else if (this.Get('chart.tickmarks') && typeof(this.Get('chart.tickmarks')) == 'function') {
579                var tickmarks = this.Get('chart.tickmarks');
580            } else {
581                var tickmarks = null;
582            }
583
584
585            this.DrawLine(this.data[i],
586                          this.Get('chart.colors')[j],
587                          fill,
588                          this.GetLineWidth(j),
589                           tickmarks,
590                           this.data.length - i - 1);
591                           
592            this.context.stroke();
593        }
594
595
596
597
598
599
600
601
602
603
604
605
606
607        /**
608        * If tooltips are defined, handle them
609        */
610        if (this.Get('chart.tooltips') && (this.Get('chart.tooltips').length || typeof(this.Get('chart.tooltips')) == 'function')) {
611
612            // Need to register this object for redrawing
613            if (this.Get('chart.tooltips.highlight')) {
614                RGraph.Register(this);
615            }
616
617            canvas_onmousemove_func = function (e)
618            {
619                e = RGraph.FixEventObject(e);
620
621                var canvas  = e.target;
622                var context = canvas.getContext('2d');
623                var obj     = canvas.__object__;
624                var point   = obj.getPoint(e);
625
626                if (obj.Get('chart.tooltips.highlight')) {
627                    RGraph.Register(obj);
628                }
629
630                if (   point
631                    && typeof(point[0]) == 'object'
632                    && typeof(point[1]) == 'number'
633                    && typeof(point[2]) == 'number'
634                    && typeof(point[3]) == 'number'
635                   ) {
636
637                    // point[0] is the graph object
638                    var xCoord = point[1];
639                    var yCoord = point[2];
640                    var idx    = point[3];
641
642                    if ((obj.Get('chart.tooltips')[idx] || typeof(obj.Get('chart.tooltips')) == 'function')) {
643
644                        // Get the tooltip text
645                        if (typeof(obj.Get('chart.tooltips')) == 'function') {
646                            var text = obj.Get('chart.tooltips')(idx);
647                       
648                        } else if (typeof(obj.Get('chart.tooltips')) == 'object' && typeof(obj.Get('chart.tooltips')[idx]) == 'function') {
649                            var text = obj.Get('chart.tooltips')[idx](idx);
650                       
651                        } else if (typeof(obj.Get('chart.tooltips')) == 'object') {
652                            var text = String(obj.Get('chart.tooltips')[idx]);
653                        } else {
654                            var text = '';
655                        }
656
657
658                        // No tooltip text - do nada
659                        if (text.match(/^id:(.*)$/) && RGraph.getTooltipText(text).substring(0,3) == 'id:') {
660                            return;
661                        }
662
663                        // Chnage the pointer to a hand
664                        canvas.style.cursor = 'pointer';
665
666                        /**
667                        * If the tooltip is the same one as is currently visible (going by the array index), don't do squat and return.
668                        */
669                        if (   RGraph.Registry.Get('chart.tooltip')
670                            && RGraph.Registry.Get('chart.tooltip').__index__ == idx
671                            && RGraph.Registry.Get('chart.tooltip').__canvas__.id == canvas.id) {
672
673                            return;
674                        }
675
676                        /**
677                        * Redraw the graph
678                        */
679                        if (obj.Get('chart.tooltips.highlight')) {
680                           // Redraw the graph
681                            RGraph.Redraw();
682                        }
683
684                        // SHOW THE CORRECT TOOLTIP
685                        RGraph.Tooltip(canvas, text, e.pageX, e.pageY, idx);
686
687                        // Store the tooltip index on the tooltip object
688                        RGraph.Registry.Get('chart.tooltip').__index__ = Number(idx);
689
690                        /**
691                        * This converts idx into the index that is not greater than the
692                        * number of items in the data array
693                        */
694                        while (idx >= obj.data[0].length) {
695                            idx -= obj.data[0].length
696                        }
697
698                        RGraph.Registry.Get('chart.tooltip').__index2__ = idx;
699
700                        /**
701                        * Highlight the graph
702                        */
703                        if (obj.Get('chart.tooltips.highlight')) {
704                            context.beginPath();
705                            context.moveTo(xCoord, yCoord);
706                            context.arc(xCoord, yCoord, 2, 0, 6.28, 0);
707                            context.strokeStyle = obj.Get('chart.highlight.stroke');
708                            context.fillStyle = obj.Get('chart.highlight.fill');
709                            context.stroke();
710                            context.fill();
711                        }
712                       
713                        e.stopPropagation();
714                        return;
715                    }
716                }
717               
718                /**
719                * Not over a hotspot?
720                */
721                canvas.style.cursor = 'default';
722            }
723            this.canvas.addEventListener('mousemove', canvas_onmousemove_func, false);
724            RGraph.AddEventListener(this.id, 'mousemove', canvas_onmousemove_func);
725           
726            // TODO COMBINED LINE BAR ONCLICK HANDLER
727            // ONLY INSTALL IF THERE IS A BAR CHART
728
729            //canvas_onclick_func = function (e)
730            //{
731            //    p(666)
732            //}
733            //this.canvas.addEventListener('click', canvas_onclick_func, false);
734            //RGraph.AddEventListener(this.id, 'click', canvas_onclick_func);
735        }
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750        /**
751        * If the axes have been requested to be on top, do that
752        */
753        if (this.Get('chart.axesontop')) {
754            this.DrawAxes();
755        }
756
757        /**
758        * Draw the labels
759        */
760        this.DrawLabels();
761       
762        /**
763        * Draw the range if necessary
764        */
765        this.DrawRange();
766       
767        // Draw a key if necessary
768        if (this.Get('chart.key').length) {
769            RGraph.DrawKey(this, this.Get('chart.key'), this.Get('chart.colors'));
770        }
771
772        /**
773        * Draw " above" labels if enabled
774        */
775        if (this.Get('chart.labels.above')) {
776            this.DrawAboveLabels();
777        }
778
779        /**
780        * Draw the "in graph" labels
781        */
782        RGraph.DrawInGraphLabels(this);
783
784        /**
785        * Draw crosschairs
786        */
787        RGraph.DrawCrosshairs(this);
788       
789        /**
790        * If the canvas is annotatable, do install the event handlers
791        */
792        if (this.Get('chart.annotatable')) {
793            RGraph.Annotate(this);
794        }
795
796        /**
797        * Redraw the lines if a filled range is on the cards
798        */
799        if (this.Get('chart.filled') && this.Get('chart.filled.range') && this.data.length == 2) {
800
801            this.context.beginPath();
802            var len = this.coords.length / 2;
803            this.context.lineWidth = this.Get('chart.linewidth');
804            this.context.strokeStyle = this.Get('chart.colors')[0];
805
806            for (var i=0; i<len; ++i) {
807                if (i == 0) {
808                    this.context.moveTo(this.coords[i][0], this.coords[i][1]);
809                } else {
810                    this.context.lineTo(this.coords[i][0], this.coords[i][1]);
811                }
812            }
813           
814            this.context.stroke();
815
816
817            this.context.beginPath();
818           
819            if (this.Get('chart.colors')[1]) {
820                this.context.strokeStyle = this.Get('chart.colors')[1];
821            }
822           
823            for (var i=this.coords.length - 1; i>=len; --i) {
824                if (i == (this.coords.length - 1) ) {
825                    this.context.moveTo(this.coords[i][0], this.coords[i][1]);
826                } else {
827                    this.context.lineTo(this.coords[i][0], this.coords[i][1]);
828                }
829            }
830           
831            this.context.stroke();
832        } else if (this.Get('chart.filled') && this.Get('chart.filled.range')) {
833            alert('[LINE] You must have only two sets of data for a filled range chart');
834        }
835
836        /**
837        * This bit shows the mini zoom window if requested
838        */
839        if (this.Get('chart.zoom.mode') == 'thumbnail') {
840            RGraph.ShowZoomWindow(this);
841        }
842
843        /**
844        * This function enables the zoom in area mode
845        */
846        if (this.Get('chart.zoom.mode') == 'area') {
847            RGraph.ZoomArea(this);
848        }
849       
850        /**
851        * This function enables resizing
852        */
853        if (this.Get('chart.resizable')) {
854            RGraph.AllowResizing(this);
855        }
856       
857        /**
858        * This function enables adjustments
859        */
860        if (this.Get('chart.adjustable')) {
861            RGraph.AllowAdjusting(this);
862        }
863       
864        /**
865        * Fire the RGraph ondraw event
866        */
867        RGraph.FireCustomEvent(this, 'ondraw');
868    }
869
870   
871    /**
872    * Draws the axes
873    */
874    RGraph.Line.prototype.DrawAxes = function ()
875    {
876        // Don't draw the axes?
877        if (this.Get('chart.noaxes')) {
878            return;
879        }
880
881        // Turn any shadow off
882        RGraph.NoShadow(this);
883
884        this.context.lineWidth   = 1;
885        this.context.strokeStyle = this.Get('chart.axis.color');
886        this.context.beginPath();
887
888        // Draw the X axis
889        if (this.Get('chart.noxaxis') == false) {
890            if (this.Get('chart.xaxispos') == 'center') {
891                this.context.moveTo(this.gutterLeft, (this.grapharea / 2) + this.gutterTop);
892                this.context.lineTo(RGraph.GetWidth(this) - this.gutterRight, (this.grapharea / 2) + this.gutterTop);
893            } else if (this.Get('chart.xaxispos') == 'top') {
894                this.context.moveTo(this.gutterLeft, this.gutterTop);
895                this.context.lineTo(RGraph.GetWidth(this) - this.gutterRight, this.gutterTop);
896            } else {
897                this.context.moveTo(this.gutterLeft, RGraph.GetHeight(this) - this.gutterBottom);
898                this.context.lineTo(RGraph.GetWidth(this) - this.gutterRight, RGraph.GetHeight(this) - this.gutterBottom);
899            }
900        }
901       
902        // Draw the Y axis
903        if (this.Get('chart.noyaxis') == false) {
904            if (this.Get('chart.yaxispos') == 'left') {
905                this.context.moveTo(this.gutterLeft, this.gutterTop);
906                this.context.lineTo(this.gutterLeft, RGraph.GetHeight(this) - this.gutterBottom );
907            } else {
908                this.context.moveTo(RGraph.GetWidth(this) - this.gutterRight, this.gutterTop);
909                this.context.lineTo(RGraph.GetWidth(this) - this.gutterRight, RGraph.GetHeight(this) - this.gutterBottom);
910            }
911        }
912
913        /**
914        * Draw the X tickmarks
915        */
916        if (this.Get('chart.noxaxis') == false) {
917
918            var xTickInterval = (RGraph.GetWidth(this) - this.gutterLeft - this.gutterRight) / (this.Get('chart.xticks') ? this.Get('chart.xticks') : (this.data[0].length - 1));
919   
920            for (x=this.gutterLeft + (this.Get('chart.yaxispos') == 'left' ? xTickInterval : 0); x<=(RGraph.GetWidth(this) - this.gutterRight + 1 ); x+=xTickInterval) {
921
922                if (this.Get('chart.yaxispos') == 'right' && x >= (RGraph.GetWidth(this) - this.gutterRight - 1) ) {
923                    break;
924                }
925               
926                // If the last tick is not desired...
927                if (this.Get('chart.noendxtick')) {
928                    if (this.Get('chart.yaxispos') == 'left' && x >= (RGraph.GetWidth(this) - this.gutterRight)) {
929                        break;
930                    } else if (this.Get('chart.yaxispos') == 'right' && x == this.gutterLeft) {
931                        continue;
932                    }
933                }
934   
935                var yStart = this.Get('chart.xaxispos') == 'center' ? (this.gutterTop + (this.grapharea / 2)) - 3 : RGraph.GetHeight(this) - this.gutterBottom;
936                var yEnd = this.Get('chart.xaxispos') == 'center' ? yStart + 6 : RGraph.GetHeight(this) - this.gutterBottom - (x % 60 == 0 ? this.Get('chart.largexticks') * this.Get('chart.tickdirection') : this.Get('chart.smallxticks') * this.Get('chart.tickdirection'));
937               
938                if (this.Get('chart.xaxispos') == 'top') {
939                    yStart = this.gutterTop - 3;
940                    yEnd   = this.gutterTop;
941                }
942
943                this.context.moveTo(x, yStart);
944                this.context.lineTo(x, yEnd);
945            }
946
947        // Draw an extra tickmark if there is no X axis, but there IS a Y axis
948        } else if (this.Get('chart.noyaxis') == false) {
949            if (this.Get('chart.yaxispos') == 'left') {
950                this.context.moveTo(this.gutterLeft, RGraph.GetHeight(this) - this.gutterBottom);
951                this.context.lineTo(this.gutterLeft - this.Get('chart.smallyticks'), RGraph.GetHeight(this) - this.gutterBottom);
952            } else {
953                this.context.moveTo(RGraph.GetWidth(this) - this.gutterRight, RGraph.GetHeight(this) - this.gutterBottom);
954                this.context.lineTo(RGraph.GetWidth(this) - this.gutterRight + this.Get('chart.smallyticks'), RGraph.GetHeight(this) - this.gutterBottom);
955            }
956        }
957
958        /**
959        * Draw the Y tickmarks
960        */
961        if (this.Get('chart.noyaxis') == false) {
962            var counter    = 0;
963            var adjustment = 0;
964   
965            if (this.Get('chart.yaxispos') == 'right') {
966                adjustment = (RGraph.GetWidth(this) - this.gutterLeft - this.gutterRight);
967            }
968           
969            // X axis at the center
970            if (this.Get('chart.xaxispos') == 'center') {
971                var interval = (this.grapharea / 10);
972                var lineto = (this.Get('chart.yaxispos') == 'left' ? this.gutterLeft : RGraph.GetWidth(this) - this.gutterRight + this.Get('chart.smallyticks'));
973   
974                // Draw the upper halves Y tick marks
975                for (y=this.gutterTop; y < (this.grapharea / 2) + this.gutterTop; y+=interval) {
976                    this.context.moveTo((this.Get('chart.yaxispos') == 'left' ? this.gutterLeft - this.Get('chart.smallyticks') : RGraph.GetWidth(this) - this.gutterRight), y);
977                    this.context.lineTo(lineto, y);
978                }
979               
980                // Draw the lower halves Y tick marks
981                for (y=this.gutterTop + (this.halfgrapharea) + interval; y <= this.grapharea + this.gutterTop; y+=interval) {
982                    this.context.moveTo((this.Get('chart.yaxispos') == 'left' ? this.gutterLeft - this.Get('chart.smallyticks') : RGraph.GetWidth(this) - this.gutterRight), y);
983                    this.context.lineTo(lineto, y);
984                }
985           
986            // X axis at the top
987            } else if (this.Get('chart.xaxispos') == 'top') {
988                var interval = (this.grapharea / 10);
989                var lineto = (this.Get('chart.yaxispos') == 'left' ? this.gutterLeft : RGraph.GetWidth(this) - this.gutterRight + this.Get('chart.smallyticks'));
990
991                // Draw the Y tick marks
992                for (y=this.gutterTop + interval; y <=this.grapharea + this.gutterTop; y+=interval) {
993                    this.context.moveTo((this.Get('chart.yaxispos') == 'left' ? this.gutterLeft - this.Get('chart.smallyticks') : RGraph.GetWidth(this) - this.gutterRight), y);
994                    this.context.lineTo(lineto, y);
995                }
996               
997                // If there's no X axis draw an extra tick
998                if (this.Get('chart.noxaxis')) {
999                    this.context.moveTo((this.Get('chart.yaxispos') == 'left' ? this.gutterLeft - this.Get('chart.smallyticks') : RGraph.GetWidth(this) - this.gutterRight), this.gutterTop);
1000                    this.context.lineTo(lineto, this.gutterTop);
1001                }
1002           
1003            // X axis at the bottom
1004            } else {
1005                var lineto = (this.Get('chart.yaxispos') == 'left' ? this.gutterLeft - this.Get('chart.smallyticks') : this.canvas.width - this.gutterRight + this.Get('chart.smallyticks'));
1006   
1007                for (y=this.gutterTop; y < (this.canvas.height - this.gutterBottom) && counter < 10; y+=( (RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom) / 10) ) {
1008   
1009                    this.context.moveTo(this.gutterLeft + adjustment, y);
1010                    this.context.lineTo(lineto, y);
1011               
1012                    var counter = counter +1;
1013                }
1014            }
1015
1016        // Draw an extra X tickmark
1017        } else if (this.Get('chart.noxaxis') == false) {
1018
1019            if (this.Get('chart.yaxispos') == 'left') {
1020                this.context.moveTo(this.gutterLeft, this.Get('chart.xaxispos') == 'top' ? this.gutterTop : RGraph.GetHeight(this) - this.gutterBottom);
1021                this.context.lineTo(this.gutterLeft, this.Get('chart.xaxispos') == 'top' ? this.gutterTop - this.Get('chart.smallxticks') : RGraph.GetHeight(this) - this.gutterBottom + this.Get('chart.smallxticks'));
1022           } else {
1023                this.context.moveTo(RGraph.GetWidth(this) - this.gutterRight, RGraph.GetHeight(this) - this.gutterBottom);
1024                this.context.lineTo(RGraph.GetWidth(this) - this.gutterRight, RGraph.GetHeight(this) - this.gutterBottom + this.Get('chart.smallxticks'));
1025            }
1026        }
1027
1028        this.context.stroke();
1029    }
1030
1031
1032    /**
1033    * Draw the text labels for the axes
1034    */
1035    RGraph.Line.prototype.DrawLabels = function ()
1036    {
1037        this.context.strokeStyle = 'black';
1038        this.context.fillStyle   = this.Get('chart.text.color');
1039        this.context.lineWidth   = 1;
1040       
1041        // Turn off any shadow
1042        RGraph.NoShadow(this);
1043
1044        // This needs to be here
1045        var font      = this.Get('chart.text.font');
1046        var text_size = this.Get('chart.text.size');
1047        var context   = this.context;
1048        var canvas    = this.canvas;
1049
1050        // Draw the Y axis labels
1051        if (this.Get('chart.ylabels') && this.Get('chart.ylabels.specific') == null) {
1052
1053            var units_pre  = this.Get('chart.units.pre');
1054            var units_post = this.Get('chart.units.post');
1055            var xpos       = this.Get('chart.yaxispos') == 'left' ? this.gutterLeft - 5 : RGraph.GetWidth(this) - this.gutterRight + 5;
1056            var align      = this.Get('chart.yaxispos') == 'left' ? 'right' : 'left';
1057           
1058            var numYLabels = this.Get('chart.ylabels.count');
1059            var bounding   = false;
1060            var bgcolor    = this.Get('chart.ylabels.inside') ? this.Get('chart.ylabels.inside.color') : null;
1061
1062           
1063            /**
1064            * If the Y labels are inside the Y axis, invert the alignment
1065            */
1066            if (this.Get('chart.ylabels.inside') == true && align == 'left') {
1067                xpos -= 10;
1068                align = 'right';
1069                bounding = true;
1070               
1071
1072            } else if (this.Get('chart.ylabels.inside') == true && align == 'right') {
1073                xpos += 10;
1074                align = 'left';
1075                bounding = true;
1076            }
1077
1078
1079
1080            if (this.Get('chart.xaxispos') == 'center') {
1081                var half = this.grapharea / 2;
1082
1083                if (numYLabels == 1 || numYLabels == 3 || numYLabels == 5) {
1084                    //  Draw the upper halves labels
1085                    RGraph.Text(context, font, text_size, xpos, this.gutterTop + ( (0/5) * half ) + this.halfTextHeight, RGraph.number_format(this, this.scale[4], units_pre, units_post), null, align, bounding, null, bgcolor);
1086   
1087                    if (numYLabels == 5) {
1088                        RGraph.Text(context, font, text_size, xpos, this.gutterTop + ( (1/5) * half ) + this.halfTextHeight, RGraph.number_format(this, this.scale[3], units_pre, units_post), null, align, bounding, null, bgcolor);
1089                        RGraph.Text(context, font, text_size, xpos, this.gutterTop + ( (3/5) * half ) + this.halfTextHeight, RGraph.number_format(this, this.scale[1], units_pre, units_post), null, align, bounding, null, bgcolor);
1090                    }
1091   
1092                    if (numYLabels >= 3) {
1093                        RGraph.Text(context, font, text_size, xpos, this.gutterTop + ( (2/5) * half ) + this.halfTextHeight, RGraph.number_format(this, this.scale[2], units_pre, units_post), null, align, bounding, null, bgcolor);
1094                        RGraph.Text(context, font, text_size, xpos, this.gutterTop + ( (4/5) * half ) + this.halfTextHeight, RGraph.number_format(this, this.scale[0], units_pre, units_post), null, align, bounding, null, bgcolor);
1095                    }
1096                   
1097                    //  Draw the lower halves labels
1098                    if (numYLabels >= 3) {
1099                        RGraph.Text(context, font, text_size, xpos, this.gutterTop + ( (6/5) * half ) + this.halfTextHeight, '-' + RGraph.number_format(this, this.scale[0], units_pre, units_post), null, align, bounding, null, bgcolor);
1100                        RGraph.Text(context, font, text_size, xpos, this.gutterTop + ( (8/5) * half ) + this.halfTextHeight, '-' + RGraph.number_format(this, this.scale[2], units_pre, units_post), null, align, bounding, null, bgcolor);
1101                    }
1102   
1103                    if (numYLabels == 5) {
1104                        RGraph.Text(context, font, text_size, xpos, this.gutterTop + ( (7/5) * half ) + this.halfTextHeight, '-' + RGraph.number_format(this, this.scale[1], units_pre, units_post), null, align, bounding, null, bgcolor);
1105                        RGraph.Text(context, font, text_size, xpos, this.gutterTop + ( (9/5) * half ) + this.halfTextHeight, '-' + RGraph.number_format(this, this.scale[3], units_pre, units_post), null, align, bounding, null, bgcolor);
1106                    }
1107   
1108                    RGraph.Text(context, font, text_size, xpos, this.gutterTop + ( (10/5) * half ) + this.halfTextHeight, '-' + RGraph.number_format(this, (this.scale[4] == '1.0' ? '1.0' : this.scale[4]), units_pre, units_post), null, align, bounding, null, bgcolor);
1109               
1110                } else if (numYLabels == 10) {
1111
1112                    // 10 Y labels
1113                    var interval = (this.grapharea / numYLabels) / 2;
1114               
1115                    for (var i=0; i<numYLabels; ++i) {
1116                        // This draws the upper halves labels
1117                        RGraph.Text(context,font, text_size, xpos, this.gutterTop + this.halfTextHeight + ((i/20) * (this.grapharea) ), RGraph.number_format(this, ((this.scale[4] / numYLabels) * (numYLabels - i)).toFixed((this.Get('chart.scale.decimals'))),units_pre, units_post), null, align, bounding, null, bgcolor);
1118                       
1119                        // And this draws the lower halves labels
1120                        RGraph.Text(context, font, text_size, xpos,
1121                       
1122                        this.gutterTop + this.halfTextHeight + ((i/20) * this.grapharea) + (this.grapharea / 2) + (this.grapharea / 20),
1123                       
1124                        '-' + RGraph.number_format(this, (this.scale[4] - ((this.scale[4] / numYLabels) * (numYLabels - i - 1))).toFixed((this.Get('chart.scale.decimals'))),units_pre, units_post), null, align, bounding, null, bgcolor);
1125                    }
1126                   
1127                } else {
1128                    alert('[LINE SCALE] The number of Y labels must be 1/3/5/10');
1129                }
1130
1131                // Draw the lower limit if chart.ymin is specified
1132                if (typeof(this.Get('chart.ymin')) == 'number') {
1133                    RGraph.Text(context, font, text_size, xpos, RGraph.GetHeight(this) / 2, RGraph.number_format(this, this.Get('chart.ymin').toFixed(this.Get('chart.scale.decimals')), units_pre, units_post), 'center', align, bounding, null, bgcolor);
1134                }
1135               
1136                // No X axis - so draw 0
1137                if (this.Get('chart.noxaxis') == true) {
1138                    RGraph.Text(context,font,text_size,xpos,this.gutterTop + ( (5/5) * half ) + this.halfTextHeight,'0',null, align, bounding, null, bgcolor);
1139                }
1140
1141            // X axis at the top
1142            } else if (this.Get('chart.xaxispos') == 'top') {
1143
1144                var scale = RGraph.array_reverse(this.scale);
1145
1146                /**
1147                * Accommodate reversing the Y labels
1148                */
1149                if (this.Get('chart.ylabels.invert')) {
1150
1151                    scale = RGraph.array_reverse(scale);
1152
1153                    this.context.translate(0, this.grapharea * -0.2);
1154                    if (typeof(this.Get('chart.ymin')) == null) {
1155                        this.Set('chart.ymin', 0);
1156                    }
1157                }
1158
1159                if (numYLabels == 1 || numYLabels == 3 || numYLabels == 5) {
1160                    RGraph.Text(context, font, text_size, xpos, this.gutterTop + this.halfTextHeight + ((1/5) * (this.grapharea ) ), '-' + RGraph.number_format(this, scale[4], units_pre, units_post), null, align, bounding, null, bgcolor);
1161   
1162                    if (numYLabels == 5) {
1163                        RGraph.Text(context, font, text_size, xpos, this.gutterTop + this.halfTextHeight + ((4/5) * (this.grapharea) ), '-' + RGraph.number_format(this, scale[1], units_pre, units_post), null, align, bounding, null, bgcolor);
1164                        RGraph.Text(context, font, text_size, xpos, this.gutterTop + this.halfTextHeight + ((2/5) * (this.grapharea) ), '-' + RGraph.number_format(this, scale[3], units_pre, units_post), null, align, bounding, null, bgcolor);
1165                    }
1166   
1167                    if (numYLabels >= 3) {
1168                        RGraph.Text(context, font, text_size, xpos, this.gutterTop + this.halfTextHeight + ((3/5) * (this.grapharea ) ), '-' + RGraph.number_format(this, scale[2], units_pre, units_post), null, align, bounding, null, bgcolor);
1169                        RGraph.Text(context, font, text_size, xpos, this.gutterTop + this.halfTextHeight + ((5/5) * (this.grapharea) ), '-' + RGraph.number_format(this, scale[0], units_pre, units_post), null, align, bounding, null, bgcolor);
1170                    }
1171               
1172                } else if (numYLabels == 10) {
1173
1174                    // 10 Y labels
1175                    var interval = (this.grapharea / numYLabels) / 2;
1176
1177                    for (var i=0; i<numYLabels; ++i) {
1178
1179                        RGraph.Text(context,font,text_size,xpos,(2 * interval) + this.gutterTop + this.halfTextHeight + ((i/10) * (this.grapharea) ),'-' + RGraph.number_format(this,(scale[0] - (((scale[0] - this.min) / numYLabels) * (numYLabels - i - 1))).toFixed((this.Get('chart.scale.decimals'))),units_pre,units_post),null,align,bounding,null,bgcolor);
1180                    }
1181
1182                } else {
1183                    alert('[LINE SCALE] The number of Y labels must be 1/3/5/10');
1184                }
1185
1186
1187                /**
1188                * Accommodate translating back after reversing the labels
1189                */
1190                if (this.Get('chart.ylabels.invert')) {
1191                    this.context.translate(0, 0 - (this.grapharea * -0.2));
1192                }
1193
1194                // Draw the lower limit if chart.ymin is specified
1195                if (typeof(this.Get('chart.ymin')) == 'number') {
1196                    RGraph.Text(context,font,text_size,xpos,this.Get('chart.ylabels.invert') ? this.canvas.height - this.gutterBottom : this.gutterTop,'-' + RGraph.number_format(this, this.Get('chart.ymin').toFixed(this.Get('chart.scale.decimals')), units_pre, units_post),'center',align,bounding,null,bgcolor);
1197                }
1198
1199            } else {
1200
1201                /**
1202                * Accommodate reversing the Y labels
1203                */
1204                if (this.Get('chart.ylabels.invert')) {
1205                    this.scale = RGraph.array_reverse(this.scale);
1206                    this.context.translate(0, this.grapharea * 0.2);
1207                    if (typeof(this.Get('chart.ymin')) == null) {
1208                        this.Set('chart.ymin', 0);
1209                    }
1210                }
1211
1212                if (numYLabels == 1 || numYLabels == 3 || numYLabels == 5) {
1213                    RGraph.Text(context, font, text_size, xpos, this.gutterTop + this.halfTextHeight + ((0/5) * (this.grapharea ) ), RGraph.number_format(this, this.scale[4], units_pre, units_post), null, align, bounding, null, bgcolor);
1214   
1215                    if (numYLabels == 5) {
1216                        RGraph.Text(context, font, text_size, xpos, this.gutterTop + this.halfTextHeight + ((3/5) * (this.grapharea) ), RGraph.number_format(this, this.scale[1], units_pre, units_post), null, align, bounding, null, bgcolor);
1217                        RGraph.Text(context, font, text_size, xpos, this.gutterTop + this.halfTextHeight + ((1/5) * (this.grapharea) ), RGraph.number_format(this, this.scale[3], units_pre, units_post), null, align, bounding, null, bgcolor);
1218                    }
1219   
1220                    if (numYLabels >= 3) {
1221                        RGraph.Text(context, font, text_size, xpos, this.gutterTop + this.halfTextHeight + ((2/5) * (this.grapharea ) ), RGraph.number_format(this, this.scale[2], units_pre, units_post), null, align, bounding, null, bgcolor);
1222                        RGraph.Text(context, font, text_size, xpos, this.gutterTop + this.halfTextHeight + ((4/5) * (this.grapharea) ), RGraph.number_format(this, this.scale[0], units_pre, units_post), null, align, bounding, null, bgcolor);
1223                    }
1224               
1225                } else if (numYLabels == 10) {
1226
1227                    // 10 Y labels
1228                    var interval = (this.grapharea / numYLabels) / 2;
1229               
1230                    for (var i=0; i<numYLabels; ++i) {
1231                        RGraph.Text(context,font,text_size,xpos,this.gutterTop + this.halfTextHeight + ((i/10) * (this.grapharea) ),RGraph.number_format(this,((((this.scale[4] - this.min) / numYLabels) * (numYLabels - i)) + this.min).toFixed((this.Get('chart.scale.decimals'))),units_pre,units_post),null,align,bounding,null,bgcolor);
1232                    }
1233
1234                } else {
1235                    alert('[LINE SCALE] The number of Y labels must be 1/3/5/10');
1236                }
1237
1238
1239                /**
1240                * Accommodate translating back after reversing the labels
1241                */
1242                if (this.Get('chart.ylabels.invert')) {
1243                    this.context.translate(0, 0 - (this.grapharea * 0.2));
1244                }
1245
1246                // Draw the lower limit if chart.ymin is specified
1247                if (typeof(this.Get('chart.ymin')) == 'number') {
1248                    RGraph.Text(context,font,text_size,xpos,this.Get('chart.ylabels.invert') ? this.gutterTop : RGraph.GetHeight(this) - this.gutterBottom,RGraph.number_format(this, this.Get('chart.ymin').toFixed(this.Get('chart.scale.decimals')), units_pre, units_post),'center',align,bounding,null,bgcolor);
1249                }
1250            }
1251
1252            // No X axis - so draw 0
1253            if (   this.Get('chart.noxaxis') == true
1254                && this.Get('chart.ymin') == null
1255               ) {
1256
1257                RGraph.Text(context,font,text_size,xpos,this.Get('chart.xaxispos') == 'top' ? this.gutterTop + this.halfTextHeight: (RGraph.GetHeight(this) - this.gutterBottom + this.halfTextHeight),'0',null, align, bounding, null, bgcolor);
1258            }
1259       
1260        } else if (this.Get('chart.ylabels') && typeof(this.Get('chart.ylabels.specific')) == 'object') {
1261           
1262            // A few things
1263            var gap      = this.grapharea / this.Get('chart.ylabels.specific').length;
1264            var halign   = this.Get('chart.yaxispos') == 'left' ? 'right' : 'left';
1265            var bounding = false;
1266            var bgcolor  = null;
1267            var ymin     = this.Get('chart.ymin') != null && this.Get('chart.ymin');
1268
1269            // Figure out the X coord based on the position of the axis
1270            if (this.Get('chart.yaxispos') == 'left') {
1271                var x = this.gutterLeft - 5;
1272               
1273                if (this.Get('chart.ylabels.inside')) {
1274                    x += 10;
1275                    halign   = 'left';
1276                    bounding = true;
1277                    bgcolor  = 'rgba(255,255,255,0.5)';
1278                }
1279
1280            } else if (this.Get('chart.yaxispos') == 'right') {
1281                var x = this.canvas.width - this.gutterRight + 5;
1282               
1283                if (this.Get('chart.ylabels.inside')) {
1284                    x -= 10;
1285                    halign = 'right';
1286                    bounding = true;
1287                    bgcolor  = 'rgba(255,255,255,0.5)';
1288                }
1289            }
1290
1291
1292            // Draw the labels
1293            if (this.Get('chart.xaxispos') == 'center') {
1294           
1295                // Draw the top halfs labels
1296                for (var i=0; i<this.Get('chart.ylabels.specific').length; ++i) {
1297                    var y = this.gutterTop + (this.grapharea / ((this.Get('chart.ylabels.specific').length ) * 2) * i);
1298                   
1299                    if (ymin && ymin > 0) {
1300                        var y  = ((this.grapharea / 2) / (this.Get('chart.ylabels.specific').length - (ymin ? 1 : 0)) ) * i;
1301                            y += this.gutterTop;
1302                    }
1303                   
1304                    RGraph.Text(context, font, text_size,x,y,String(this.Get('chart.ylabels.specific')[i]), 'center', halign, bounding, 0, bgcolor);
1305                }
1306               
1307                // Now reverse the labels and draw the bottom half
1308                var reversed_labels = RGraph.array_reverse(this.Get('chart.ylabels.specific'));
1309           
1310                // Draw the bottom halfs labels
1311                for (var i=0; i<reversed_labels.length; ++i) {
1312                    var y = (this.grapharea / 2) + this.gutterTop + ((this.grapharea / (reversed_labels.length * 2) ) * (i + 1));
1313
1314                    if (ymin && ymin > 0) {
1315                        var y  = ((this.grapharea / 2) / (reversed_labels.length - (ymin ? 1 : 0)) ) * i;
1316                            y += this.gutterTop;
1317                            y += (this.grapharea / 2);
1318                    }
1319
1320                    RGraph.Text(context, font, text_size,x,y,String(reversed_labels[i]), 'center', halign, bounding, 0, bgcolor);
1321                }
1322           
1323            } else if (this.Get('chart.xaxispos') == 'top') {
1324
1325                // Reverse the labels and draw
1326                var reversed_labels = RGraph.array_reverse(this.Get('chart.ylabels.specific'));
1327           
1328                // Draw the bottom halfs labels
1329                for (var i=0; i<reversed_labels.length; ++i) {
1330                   
1331                    var y = ((this.grapharea / (reversed_labels.length - (ymin ? 1 : 0)) ) * (i + (ymin ? 0 : 1)));
1332                        y = y + this.gutterTop;
1333
1334                    RGraph.Text(context, font, text_size,x,y,String(reversed_labels[i]), 'center', halign, bounding, 0, bgcolor);
1335                }
1336
1337            } else {
1338                for (var i=0; i<this.Get('chart.ylabels.specific').length; ++i) {
1339                    var y = this.gutterTop + ((this.grapharea / (this.Get('chart.ylabels.specific').length - (ymin ? 1 : 0) )) * i);
1340                    RGraph.Text(context, font, text_size,x,y,String(this.Get('chart.ylabels.specific')[i]), 'center', halign, bounding, 0, bgcolor);
1341                }
1342            }
1343        }
1344
1345        // Draw the X axis labels
1346        if (this.Get('chart.labels') && this.Get('chart.labels').length > 0) {
1347
1348
1349            var yOffset  = 13;
1350            var bordered = false;
1351            var bgcolor  = null;
1352
1353            if (this.Get('chart.xlabels.inside')) {
1354                yOffset = -5;
1355                bordered = true;
1356                bgcolor  = this.Get('chart.xlabels.inside.color');
1357            }
1358
1359            /**
1360            * Text angle
1361            */
1362            var angle  = 0;
1363            var valign = null;
1364            var halign = 'center';
1365
1366            if (typeof(this.Get('chart.text.angle')) == 'number' && this.Get('chart.text.angle') > 0) {
1367                angle   = -1 * this.Get('chart.text.angle');
1368                valign  = 'center';
1369                halign  = 'right';
1370                yOffset = 10;
1371               
1372                if (this.Get('chart.xaxispos') == 'top') {
1373                    yOffset = 10;
1374                }
1375            }
1376
1377            this.context.fillStyle = this.Get('chart.text.color');
1378            var numLabels = this.Get('chart.labels').length;
1379
1380            for (i=0; i<numLabels; ++i) {
1381
1382                // Changed 8th Nov 2010 to be not reliant on the coords
1383                //if (this.Get('chart.labels')[i] && this.coords && this.coords[i] && this.coords[i][0]) {
1384                if (this.Get('chart.labels')[i]) {
1385
1386                    var labelX = ((RGraph.GetWidth(this) - this.gutterLeft - this.gutterRight - (2 * this.Get('chart.hmargin'))) / (numLabels - 1) ) * i;
1387                        labelX += this.gutterLeft + this.Get('chart.hmargin');
1388
1389                    /**
1390                    * Account for an unrelated number of labels
1391                    */
1392                    if (this.Get('chart.labels').length != this.data[0].length) {
1393                        labelX = this.gutterLeft + this.Get('chart.hmargin') + ((RGraph.GetWidth(this) - this.gutterLeft - this.gutterRight - (2 * this.Get('chart.hmargin'))) * (i / (this.Get('chart.labels').length - 1)));
1394                    }
1395                   
1396                    // This accounts for there only being one point on the chart
1397                    if (!labelX) {
1398                        labelX = this.gutterLeft + this.Get('chart.hmargin');
1399                    }
1400
1401                    if (this.Get('chart.xaxispos') == 'top' && this.Get('chart.text.angle') > 0) {
1402                        halign = 'left';
1403                    }
1404
1405                    RGraph.Text(context,
1406                                font,
1407                                text_size,
1408                                labelX,
1409                                (this.Get('chart.xaxispos') == 'top') ? this.gutterTop - yOffset - (this.Get('chart.xlabels.inside') ? -22 : 0) : (RGraph.GetHeight(this) - this.gutterBottom) + yOffset,
1410                                String(this.Get('chart.labels')[i]),
1411                                valign,
1412                                halign,
1413                                bordered,
1414                                angle,
1415                                bgcolor);
1416                }
1417            }
1418
1419        }
1420
1421        this.context.stroke();
1422        this.context.fill();
1423    }
1424
1425
1426    /**
1427    * Draws the line
1428    */
1429    RGraph.Line.prototype.DrawLine = function (lineData, color, fill, linewidth, tickmarks, index)
1430    {
1431        var penUp = false;
1432        var yPos  = null;
1433        var xPos  = 0;
1434        this.context.lineWidth = 1;
1435        var lineCoords = [];
1436
1437        // Work out the X interval
1438        var xInterval = (this.canvas.width - (2 * this.Get('chart.hmargin')) - this.gutterLeft - this.gutterRight) / (lineData.length - 1);
1439
1440        // Loop thru each value given, plotting the line
1441        for (i=0; i<lineData.length; i++) {
1442
1443            var data_point = lineData[i];
1444
1445
1446            yPos = this.canvas.height - (((data_point - (data_point > 0 ?  this.Get('chart.ymin') : (-1 * this.Get('chart.ymin')))) / (this.max - this.min) ) * this.grapharea);
1447            yPos = (this.grapharea / (this.max - this.min)) * (data_point - this.min);
1448            yPos = this.canvas.height - yPos;
1449           
1450            /**
1451            * This skirts an annoying JS rounding error
1452            * SEARCH TAGS: JS ROUNDING ERROR DECIMALS
1453            */
1454            if (data_point == this.max) {
1455                yPos = Math.round(yPos);
1456            }
1457
1458            if (this.Get('chart.ylabels.invert')) {
1459                yPos -= this.gutterBottom;
1460                yPos -= this.gutterTop;
1461                yPos = this.canvas.height - yPos;
1462            }
1463
1464            // Make adjustments depending on the X axis position
1465            if (this.Get('chart.xaxispos') == 'center') {
1466                yPos = (yPos - this.gutterBottom - this.gutterTop) / 2;
1467                yPos = yPos + this.gutterTop;
1468           
1469            // TODO Check this
1470            } else if (this.Get('chart.xaxispos') == 'top') {
1471
1472                yPos = (this.grapharea / (this.max - this.min)) * (Math.abs(data_point) - this.min);
1473                yPos += this.gutterTop;
1474               
1475                if (this.Get('chart.ylabels.invert')) {
1476                    yPos -= this.gutterTop;
1477                    yPos  = this.grapharea - yPos;
1478                    yPos += this.gutterTop;
1479                }
1480
1481            } else if (this.Get('chart.xaxispos') == 'bottom') {
1482                // TODO
1483                yPos -= this.gutterBottom; // Without this the line is out of place due to the gutter
1484            }
1485
1486
1487
1488            // Null data points, and a special case for this bug:http://dev.rgraph.net/tests/ymin.html
1489            if (   lineData[i] == null
1490                || (this.Get('chart.xaxispos') == 'bottom' && lineData[i] < this.min && !this.Get('chart.outofbounds'))
1491                ||  (this.Get('chart.xaxispos') == 'center' && lineData[i] < (-1 * this.max) && !this.Get('chart.outofbounds'))) {
1492
1493                yPos = null;
1494            }
1495
1496            // Not always very noticeable, but it does have an effect
1497            // with thick lines
1498            this.context.lineCap  = 'round';
1499            this.context.lineJoin = 'round';
1500
1501            // Plot the line if we're at least on the second iteration
1502            if (i > 0) {
1503                xPos = xPos + xInterval;
1504            } else {
1505                xPos = this.Get('chart.hmargin') + this.gutterLeft;
1506            }
1507
1508            /**
1509            * Add the coords to an array
1510            */
1511            this.coords.push([xPos, yPos]);
1512            lineCoords.push([xPos, yPos]);
1513        }
1514       
1515        this.context.stroke();
1516
1517        // Store the coords in another format, indexed by line number
1518        this.coords2[index] = lineCoords;
1519
1520        /**
1521        * For IE only: Draw the shadow ourselves as ExCanvas doesn't produce shadows
1522        */
1523        if (RGraph.isIE8() && this.Get('chart.shadow')) {
1524            this.DrawIEShadow(lineCoords, this.context.shadowColor);
1525        }
1526
1527        /**
1528        * Now draw the actual line [FORMERLY SECOND]
1529        */
1530        this.context.beginPath();
1531        this.context.strokeStyle = 'rgba(240,240,240,0.9)'; // Almost transparent - changed on 10th May 2010
1532        //this.context.strokeStyle = fill;
1533        if (fill) this.context.fillStyle   = fill;
1534
1535        var isStepped = this.Get('chart.stepped');
1536        var isFilled = this.Get('chart.filled');
1537
1538
1539        for (var i=0; i<lineCoords.length; ++i) {
1540
1541            xPos = lineCoords[i][0];
1542            yPos = lineCoords[i][1];
1543            var set = index;
1544
1545            var prevY     = (lineCoords[i - 1] ? lineCoords[i - 1][1] : null);
1546            var isLast    = (i + 1) == lineCoords.length;
1547
1548            /**
1549            * This nullifys values which are out-of-range
1550            */
1551            if (prevY < this.gutterTop || prevY > (RGraph.GetHeight(this) - this.gutterBottom) ) {
1552                penUp = true;
1553            }
1554
1555            if (i == 0 || penUp || !yPos || !prevY || prevY < this.gutterTop) {
1556
1557                if (this.Get('chart.filled') && !this.Get('chart.filled.range')) {
1558                    this.context.moveTo(xPos + 1, this.canvas.height - this.gutterBottom - (this.Get('chart.xaxispos') == 'center' ? (this.canvas.height - this.gutterTop - this.gutterBottom) / 2 : 0) -1);
1559                    this.context.lineTo(xPos + 1, yPos);
1560
1561                } else {
1562                    this.context.moveTo(xPos, yPos);
1563                }
1564               
1565                if (yPos == null) {
1566                    penUp = true;
1567                } else {
1568                    penUp = false;
1569                }
1570
1571            } else {
1572
1573                // Draw the stepped part of stepped lines
1574                if (isStepped) {
1575                    this.context.lineTo(xPos, lineCoords[i - 1][1]);
1576                }
1577
1578                if ((yPos >= this.gutterTop && yPos <= (RGraph.GetHeight(this) - this.gutterBottom)) || this.Get('chart.outofbounds') ) {
1579
1580                    if (isLast && this.Get('chart.filled') && !this.Get('chart.filled.range') && this.Get('chart.yaxispos') == 'right') {
1581                        xPos -= 1;
1582                    }
1583
1584
1585                    // Added 8th September 2009
1586                    if (!isStepped || !isLast) {
1587                        this.context.lineTo(xPos, yPos);
1588                       
1589                        if (isFilled && lineCoords[i+1] && lineCoords[i+1][1] == null) {
1590                            this.context.lineTo(xPos, RGraph.GetHeight(this) - this.gutterBottom);
1591                        }
1592                   
1593                    // Added August 2010
1594                    } else if (isStepped && isLast) {
1595                        this.context.lineTo(xPos,yPos);
1596                    }
1597
1598
1599                    penUp = false;
1600                } else {
1601                    penUp = true;
1602                }
1603            }
1604        }
1605
1606        if (this.Get('chart.filled') && !this.Get('chart.filled.range')) {
1607            var fillStyle = this.Get('chart.fillstyle');
1608
1609            this.context.lineTo(xPos, RGraph.GetHeight(this) - this.gutterBottom - 1 -  + (this.Get('chart.xaxispos') == 'center' ? (RGraph.GetHeight(this) - this.gutterTop - this.gutterBottom) / 2 : 0));
1610            this.context.fillStyle = fill;
1611
1612            this.context.fill();
1613            this.context.beginPath();
1614        }
1615
1616        /**
1617        * FIXME this may need removing when Chrome is fixed
1618        * SEARCH TAGS: CHROME SHADOW BUG
1619        */
1620        if (navigator.userAgent.match(/Chrome/) && this.Get('chart.shadow') && this.Get('chart.chromefix') && this.Get('chart.shadow.blur') > 0) {
1621
1622            for (var i=lineCoords.length - 1; i>=0; --i) {
1623                if (
1624                       typeof(lineCoords[i][1]) != 'number'
1625                    || (typeof(lineCoords[i+1]) == 'object' && typeof(lineCoords[i+1][1]) != 'number')
1626                   ) {
1627                    this.context.moveTo(lineCoords[i][0],lineCoords[i][1]);
1628                } else {
1629                    this.context.lineTo(lineCoords[i][0],lineCoords[i][1]);
1630                }
1631            }
1632        }
1633
1634        this.context.stroke();
1635
1636
1637        if (this.Get('chart.backdrop')) {
1638            this.DrawBackdrop(lineCoords, color);
1639        }
1640
1641        // Now redraw the lines with the correct line width
1642        this.RedrawLine(lineCoords, color, linewidth);
1643       
1644        this.context.stroke();
1645
1646        // Draw the tickmarks
1647        for (var i=0; i<lineCoords.length; ++i) {
1648
1649            i = Number(i);
1650
1651            if (isStepped && i == (lineCoords.length - 1)) {
1652                this.context.beginPath();
1653                //continue;
1654            }
1655
1656            if (
1657                (
1658                    tickmarks != 'endcircle'
1659                 && tickmarks != 'endsquare'
1660                 && tickmarks != 'filledendsquare'
1661                 && tickmarks != 'endtick'
1662                 && tickmarks != 'endtriangle'
1663                 && tickmarks != 'arrow'
1664                 && tickmarks != 'filledarrow'
1665                )
1666                || (i == 0 && tickmarks != 'arrow' && tickmarks != 'filledarrow')
1667                || i == (lineCoords.length - 1)
1668               ) {
1669
1670                var prevX = (i <= 0 ? null : lineCoords[i - 1][0]);
1671                var prevY = (i <= 0 ? null : lineCoords[i - 1][1]);
1672
1673                this.DrawTick(lineData, lineCoords[i][0], lineCoords[i][1], color, false, prevX, prevY, tickmarks, i);
1674
1675                // Draws tickmarks on the stepped bits of stepped charts. Takend out 14th July 2010
1676                //
1677                //if (this.Get('chart.stepped') && lineCoords[i + 1] && this.Get('chart.tickmarks') != 'endsquare' && this.Get('chart.tickmarks') != 'endcircle' && this.Get('chart.tickmarks') != 'endtick') {
1678                //    this.DrawTick(lineCoords[i + 1][0], lineCoords[i][1], color);
1679                //}
1680            }
1681        }
1682
1683        // Draw something off canvas to skirt an annoying bug
1684        this.context.beginPath();
1685        this.context.arc(RGraph.GetWidth(this) + 50000, RGraph.GetHeight(this) + 50000, 2, 0, 6.38, 1);
1686    }
1687   
1688   
1689    /**
1690    * This functions draws a tick mark on the line
1691    *
1692    * @param xPos  int  The x position of the tickmark
1693    * @param yPos  int  The y position of the tickmark
1694    * @param color str  The color of the tickmark
1695    * @param       bool Whether the tick is a shadow. If it is, it gets offset by the shadow offset
1696    */
1697    RGraph.Line.prototype.DrawTick = function (lineData, xPos, yPos, color, isShadow, prevX, prevY, tickmarks, index)
1698    {
1699        // If the yPos is null - no tick
1700        if ((yPos == null || yPos > (this.canvas.height - this.gutterBottom) || yPos < this.gutterTop) && !this.Get('chart.outofbounds')) {
1701            return;
1702        }
1703
1704        this.context.beginPath();
1705
1706        var offset   = 0;
1707
1708        // Reset the stroke and lineWidth back to the same as what they were when the line was drawm
1709        // UPDATE 28th July 2011 - the line width is now set to 1
1710        this.context.lineWidth   = this.Get('chart.tickmarks.linewidth') ? this.Get('chart.tickmarks.linewidth') : this.Get('chart.linewidth');
1711        this.context.strokeStyle = isShadow ? this.Get('chart.shadow.color') : this.context.strokeStyle;
1712        this.context.fillStyle   = isShadow ? this.Get('chart.shadow.color') : this.context.strokeStyle;
1713
1714        // Cicular tick marks
1715        if (   tickmarks == 'circle'
1716            || tickmarks == 'filledcircle'
1717            || tickmarks == 'endcircle') {
1718
1719            if (tickmarks == 'circle'|| tickmarks == 'filledcircle' || (tickmarks == 'endcircle') ) {
1720                this.context.beginPath();
1721                this.context.arc(xPos + offset, yPos + offset, this.Get('chart.ticksize'), 0, 360 / (180 / Math.PI), false);
1722
1723                if (tickmarks == 'filledcircle') {
1724                    this.context.fillStyle = isShadow ? this.Get('chart.shadow.color') : this.context.strokeStyle;
1725                } else {
1726                    this.context.fillStyle = isShadow ? this.Get('chart.shadow.color') : 'white';
1727                }
1728
1729                this.context.stroke();
1730                this.context.fill();
1731            }
1732
1733        // Halfheight "Line" style tick marks
1734        } else if (tickmarks == 'halftick') {
1735            this.context.beginPath();
1736            this.context.moveTo(xPos, yPos);
1737            this.context.lineTo(xPos, yPos + this.Get('chart.ticksize'));
1738
1739            this.context.stroke();
1740       
1741        // Tick style tickmarks
1742        } else if (tickmarks == 'tick') {
1743            this.context.beginPath();
1744            this.context.moveTo(xPos, yPos -  this.Get('chart.ticksize'));
1745            this.context.lineTo(xPos, yPos + this.Get('chart.ticksize'));
1746
1747            this.context.stroke();
1748       
1749        // Endtick style tickmarks
1750        } else if (tickmarks == 'endtick') {
1751            this.context.beginPath();
1752            this.context.moveTo(xPos, yPos -  this.Get('chart.ticksize'));
1753            this.context.lineTo(xPos, yPos + this.Get('chart.ticksize'));
1754
1755            this.context.stroke();
1756       
1757        // "Cross" style tick marks
1758        } else if (tickmarks == 'cross') {
1759            this.context.beginPath();
1760            this.context.moveTo(xPos - this.Get('chart.ticksize'), yPos - this.Get('chart.ticksize'));
1761            this.context.lineTo(xPos + this.Get('chart.ticksize'), yPos + this.Get('chart.ticksize'));
1762            this.context.moveTo(xPos + this.Get('chart.ticksize'), yPos - this.Get('chart.ticksize'));
1763            this.context.lineTo(xPos - this.Get('chart.ticksize'), yPos + this.Get('chart.ticksize'));
1764           
1765            this.context.stroke();
1766
1767
1768        // Triangle style tick marks
1769        } else if (tickmarks == 'triangle' || tickmarks == 'filledtriangle' || tickmarks == 'endtriangle') {
1770            this.context.beginPath();
1771               
1772                if (tickmarks == 'filledtriangle') {
1773                    this.context.fillStyle = isShadow ? this.Get('chart.shadow.color') : this.context.strokeStyle;
1774                } else {
1775                    this.context.fillStyle = 'white';
1776                }
1777
1778                this.context.moveTo(xPos - this.Get('chart.ticksize'), yPos + this.Get('chart.ticksize'));
1779                this.context.lineTo(xPos, yPos - this.Get('chart.ticksize'));
1780                this.context.lineTo(xPos + this.Get('chart.ticksize'), yPos + this.Get('chart.ticksize'));
1781            this.context.closePath();
1782           
1783            this.context.stroke();
1784            this.context.fill();
1785
1786
1787        // A white bordered circle
1788        } else if (tickmarks == 'borderedcircle' || tickmarks == 'dot') {
1789                this.context.lineWidth   = 1;
1790                this.context.strokeStyle = this.Get('chart.tickmarks.dot.color');
1791                this.context.fillStyle   = this.Get('chart.tickmarks.dot.color');
1792
1793                // The outer white circle
1794                this.context.beginPath();
1795                this.context.arc(xPos, yPos, this.Get('chart.ticksize'), 0, 360 / (180 / Math.PI), false);
1796                this.context.closePath();
1797
1798
1799                this.context.fill();
1800                this.context.stroke();
1801               
1802                // Now do the inners
1803                this.context.beginPath();
1804                this.context.fillStyle   = color;
1805                this.context.strokeStyle = color;
1806                this.context.arc(xPos, yPos, this.Get('chart.ticksize') - 2, 0, 360 / (180 / Math.PI), false);
1807
1808                this.context.closePath();
1809
1810                this.context.fill();
1811                this.context.stroke();
1812       
1813        } else if (   tickmarks == 'square'
1814                   || tickmarks == 'filledsquare'
1815                   || (tickmarks == 'endsquare')
1816                   || (tickmarks == 'filledendsquare') ) {
1817
1818            this.context.fillStyle   = 'white';
1819            this.context.strokeStyle = this.context.strokeStyle; // FIXME Is this correct?
1820
1821            this.context.beginPath();
1822            this.context.strokeRect(xPos - this.Get('chart.ticksize'), yPos - this.Get('chart.ticksize'), this.Get('chart.ticksize') * 2, this.Get('chart.ticksize') * 2);
1823
1824            // Fillrect
1825            if (tickmarks == 'filledsquare' || tickmarks == 'filledendsquare') {
1826                this.context.fillStyle = isShadow ? this.Get('chart.shadow.color') : this.context.strokeStyle;
1827                this.context.fillRect(xPos - this.Get('chart.ticksize'), yPos - this.Get('chart.ticksize'), this.Get('chart.ticksize') * 2, this.Get('chart.ticksize') * 2);
1828
1829            } else if (tickmarks == 'square' || tickmarks == 'endsquare') {
1830                this.context.fillStyle = isShadow ? this.Get('chart.shadow.color') : 'white';
1831                this.context.fillRect((xPos - this.Get('chart.ticksize')) + 1, (yPos - this.Get('chart.ticksize')) + 1, (this.Get('chart.ticksize') * 2) - 2, (this.Get('chart.ticksize') * 2) - 2);
1832            }
1833
1834            this.context.stroke();
1835            this.context.fill();
1836
1837        /**
1838        * FILLED arrowhead
1839        */
1840        } else if (tickmarks == 'filledarrow') {
1841       
1842            var x = Math.abs(xPos - prevX);
1843            var y = Math.abs(yPos - prevY);
1844
1845            if (yPos < prevY) {
1846                var a = Math.atan(x / y) + 1.57;
1847            } else {
1848                var a = Math.atan(y / x) + 3.14;
1849            }
1850
1851            this.context.beginPath();
1852                this.context.moveTo(xPos, yPos);
1853                this.context.arc(xPos, yPos, 7, a - 0.5, a + 0.5, false);
1854            this.context.closePath();
1855
1856            this.context.stroke();
1857            this.context.fill();
1858
1859        /**
1860        * Arrow head, NOT filled
1861        */
1862        } else if (tickmarks == 'arrow') {
1863
1864            var x = Math.abs(xPos - prevX);
1865            var y = Math.abs(yPos - prevY);
1866
1867            if (yPos < prevY) {
1868                var a = Math.atan(x / y) + 1.57;
1869            } else {
1870                var a = Math.atan(y / x) + 3.14;
1871            }
1872
1873            this.context.beginPath();
1874                this.context.moveTo(xPos, yPos);
1875                this.context.arc(xPos, yPos, 7, a - 0.5 - (document.all ? 0.1 : 0.01), a - 0.4, false);
1876
1877                this.context.moveTo(xPos, yPos);
1878                this.context.arc(xPos, yPos, 7, a + 0.5 + (document.all ? 0.1 : 0.01), a + 0.5, true);
1879
1880
1881            this.context.stroke();
1882       
1883        /**
1884        * Custom tick drawing function
1885        */
1886        } else if (typeof(tickmarks) == 'function') {
1887            tickmarks(this, lineData, lineData[index], index, xPos, yPos, color, prevX, prevY);
1888        }
1889    }
1890
1891
1892    /**
1893    * Draws a filled range if necessary
1894    */
1895    RGraph.Line.prototype.DrawRange = function ()
1896    {
1897        /**
1898        * Fill the range if necessary
1899        */
1900        if (this.Get('chart.filled.range') && this.Get('chart.filled')) {
1901            this.context.beginPath();
1902            this.context.fillStyle = this.Get('chart.fillstyle');
1903            this.context.strokeStyle = this.Get('chart.fillstyle');
1904            this.context.lineWidth = 1;
1905            var len = (this.coords.length / 2);
1906
1907            for (var i=0; i<len; ++i) {
1908                if (i == 0) {
1909                    this.context.moveTo(this.coords[i][0], this.coords[i][1])
1910                } else {
1911                    this.context.lineTo(this.coords[i][0], this.coords[i][1])
1912                }
1913            }
1914
1915            for (var i=this.coords.length - 1; i>=len; --i) {
1916                this.context.lineTo(this.coords[i][0], this.coords[i][1])
1917            }
1918            this.context.stroke();
1919            this.context.fill();
1920        }
1921    }
1922
1923
1924    /**
1925    * Redraws the line with the correct line width etc
1926    *
1927    * @param array coords The coordinates of the line
1928    */
1929    RGraph.Line.prototype.RedrawLine = function (coords, color, linewidth)
1930    {
1931        if (this.Get('chart.noredraw')) {
1932            return;
1933        }
1934
1935        this.context.beginPath();
1936        this.context.strokeStyle = (typeof(color) == 'object' && color ? color[0] : color);
1937        this.context.lineWidth = linewidth;
1938
1939        var len    = coords.length;
1940        var width  = RGraph.GetWidth(this);
1941        var height = RGraph.GetHeight(this);
1942        var penUp  = false;
1943
1944        for (var i=0; i<len; ++i) {
1945
1946            var xPos   = coords[i][0];
1947            var yPos   = coords[i][1];
1948
1949            if (i > 0) {
1950                var prevX = coords[i - 1][0];
1951                var prevY = coords[i - 1][1];
1952            }
1953
1954
1955            if ((
1956                   (i == 0 && coords[i])
1957                || (yPos < this.gutterTop)
1958                || (prevY < this.gutterTop)
1959                || (yPos > (height - this.gutterBottom))
1960                || (i > 0 && prevX > (width - this.gutterRight))
1961                || (i > 0 && prevY > (height - this.gutterBottom))
1962                || prevY == null
1963                || penUp == true
1964               ) && (!this.Get('chart.outofbounds') || yPos == null || prevY == null) ) {
1965
1966                this.context.moveTo(coords[i][0], coords[i][1]);
1967
1968                penUp = false;
1969
1970            } else {
1971
1972                if (this.Get('chart.stepped') && i > 0) {
1973                    this.context.lineTo(coords[i][0], coords[i - 1][1]);
1974                }
1975               
1976                // Don't draw the last bit of a stepped chart. Now DO
1977                //if (!this.Get('chart.stepped') || i < (coords.length - 1)) {
1978                this.context.lineTo(coords[i][0], coords[i][1]);
1979                //}
1980                penUp = false;
1981            }
1982        }
1983
1984        /**
1985        * If two colors are specified instead of one, go over the up bits
1986        */
1987        if (this.Get('chart.colors.alternate') && typeof(color) == 'object' && color[0] && color[1]) {
1988            for (var i=1; i<len; ++i) {
1989
1990                var prevX = coords[i - 1][0];
1991                var prevY = coords[i - 1][1];
1992               
1993                this.context.beginPath();
1994                this.context.strokeStyle = color[coords[i][1] < prevY ? 0 : 1];
1995                this.context.lineWidth = this.Get('chart.linewidth');
1996                this.context.moveTo(prevX, prevY);
1997                this.context.lineTo(coords[i][0], coords[i][1]);
1998                this.context.stroke();
1999            }
2000        }
2001    }
2002
2003
2004    /**
2005    * This function is used by MSIE only to manually draw the shadow
2006    *
2007    * @param array coords The coords for the line
2008    */
2009    RGraph.Line.prototype.DrawIEShadow = function (coords, color)
2010    {
2011        var offsetx = this.Get('chart.shadow.offsetx');
2012        var offsety = this.Get('chart.shadow.offsety');
2013       
2014        this.context.lineWidth   = this.Get('chart.linewidth');
2015        this.context.strokeStyle = color;
2016        this.context.beginPath();
2017
2018        for (var i=0; i<coords.length; ++i) {
2019            if (i == 0) {
2020                this.context.moveTo(coords[i][0] + offsetx, coords[i][1] + offsety);
2021            } else {
2022                this.context.lineTo(coords[i][0] + offsetx, coords[i][1] + offsety);
2023            }
2024        }
2025
2026        this.context.stroke();
2027    }
2028
2029
2030    /**
2031    * Draw the backdrop
2032    */
2033    RGraph.Line.prototype.DrawBackdrop = function (coords, color)
2034    {
2035        var size = this.Get('chart.backdrop.size');
2036        this.context.lineWidth = size;
2037        this.context.globalAlpha = this.Get('chart.backdrop.alpha');
2038        this.context.strokeStyle = color;
2039        this.context.lineJoin = 'miter';
2040       
2041        this.context.beginPath();
2042            this.context.moveTo(coords[0][0], coords[0][1]);
2043            for (var j=1; j<coords.length; ++j) {
2044                this.context.lineTo(coords[j][0], coords[j][1]);
2045            }
2046   
2047        this.context.stroke();
2048   
2049        // Reset the alpha value
2050        this.context.globalAlpha = 1;
2051        this.context.lineJoin = 'round';
2052        RGraph.NoShadow(this);
2053    }
2054
2055
2056    /**
2057    * Returns the linewidth
2058    */
2059    RGraph.Line.prototype.GetLineWidth = function (i)
2060    {
2061        var linewidth = this.Get('chart.linewidth');
2062       
2063        if (typeof(linewidth) == 'number') {
2064            return linewidth;
2065       
2066        } else if (typeof(linewidth) == 'object') {
2067            if (linewidth[i]) {
2068                return linewidth[i];
2069            } else {
2070                return linewidth[0];
2071            }
2072
2073            alert('[LINE] Error! chart.linewidth should be a single number or an array of one or more numbers');
2074        }
2075    }
2076
2077
2078    /**
2079    * The getPoint() method - used to get the point the mouse is currently over, if any
2080    *
2081    * @param object e The event object
2082    */
2083    RGraph.Line.prototype.getPoint = function (e)
2084    {
2085        var canvas  = e.target;
2086        var obj     = canvas.__object__;
2087        var context = obj.context;
2088        var mouseXY = RGraph.getMouseXY(e);
2089        var mouseX  = mouseXY[0];
2090        var mouseY  = mouseXY[1];
2091
2092        for (var i=0; i<obj.coords.length; ++i) {
2093       
2094            var xCoord = obj.coords[i][0];
2095            var yCoord = obj.coords[i][1];
2096 
2097            if (   mouseX <= (xCoord + 5)
2098                && mouseX >= (xCoord - 5)
2099                && mouseY <= (yCoord + 5)
2100                && mouseY >= (yCoord - 5)
2101               ) {
2102
2103                    return [obj, xCoord, yCoord, i];
2104            }
2105        }
2106    }
2107
2108
2109    /**
2110    * Draws the above line labels
2111    */
2112    RGraph.Line.prototype.DrawAboveLabels = function ()
2113    {
2114        var context    = this.context;
2115        var size       = this.Get('chart.labels.above.size');
2116        var font       = this.Get('chart.text.font');
2117        var units_pre  = this.Get('chart.units.pre');
2118        var units_post = this.Get('chart.units.post');
2119
2120        context.beginPath();
2121
2122        // Don't need to check that chart.labels.above is enabled here, it's been done already
2123        for (var i=0; i<this.coords.length; ++i) {
2124            var coords = this.coords[i];
2125           
2126            RGraph.Text(context, font, size, coords[0], coords[1] - 5 - size, RGraph.number_format(this, this.data_arr[i], units_pre, units_post), 'center', 'center', true, null, 'rgba(255, 255, 255, 0.7)');
2127        }
2128       
2129        context.fill();
2130    }
Note: See TracBrowser for help on using the repository browser.