Proyectos de Subversion Moodle

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 efrain 1
    /**
2
    * o-------------------------------------------------------------------------------o
3
    * | This file is part of the RGraph package. RGraph is Free software, licensed    |
4
    * | under the MIT license - so it's free to use for all purposes. Extended        |
5
    * | support is available if required and donations are always welcome! You can    |
6
    * | read more here:                                                               |
7
    * |                         http://www.rgraph.net/support                         |
8
    * o-------------------------------------------------------------------------------o
9
    */
10
 
11
    if (typeof(RGraph) == 'undefined') RGraph = {};
12
 
13
    /**
14
    * The horizontal bar chart constructor. The horizontal bar is a minor variant
15
    * on the bar chart. If you have big labels, this may be useful as there is usually
16
    * more space available for them.
17
    *
18
    * @param object canvas The canvas object
19
    * @param array  data   The chart data
20
    */
21
    RGraph.HBar = function (id, data)
22
    {
23
        // Get the canvas and context objects
24
        this.id                = id;
25
        this.canvas            = document.getElementById(typeof id === 'object' ? id.id : id);
26
        this.context           = this.canvas.getContext ? this.canvas.getContext("2d") : null;
27
        this.canvas.__object__ = this;
28
        this.data              = data;
29
        this.type              = 'hbar';
30
        this.isRGraph          = true;
31
        this.uid               = RGraph.CreateUID();
32
        this.canvas.uid        = this.canvas.uid ? this.canvas.uid : RGraph.CreateUID();
33
        this.colorsParsed      = false;
34
        this.coords            = [];
35
        this.coords2           = [];
36
        this.coordsText        = [];
37
 
38
 
39
        /**
40
        * Compatibility with older browsers
41
        */
42
        RGraph.OldBrowserCompat(this.context);
43
 
44
 
45
        this.max = 0;
46
        this.stackedOrGrouped  = false;
47
 
48
        // Default properties
49
        this.properties = {
50
            'chart.gutter.left':            75,
51
            'chart.gutter.right':           25,
52
            'chart.gutter.top':             25,
53
            'chart.gutter.bottom':          25,
54
            'chart.background.grid':        true,
55
            'chart.background.grid.color':  '#ddd',
56
            'chart.background.grid.width':  1,
57
            'chart.background.grid.hsize':  25,
58
            'chart.background.grid.vsize':  25,
59
            'chart.background.barcolor1':   'rgba(0,0,0,0)',
60
            'chart.background.barcolor2':   'rgba(0,0,0,0)',
61
            'chart.background.grid.hlines': true,
62
            'chart.background.grid.vlines': true,
63
            'chart.background.grid.border': true,
64
            'chart.background.grid.autofit':true,
65
            'chart.background.grid.autofit.numhlines': 14,
66
            'chart.background.grid.autofit.numvlines': 20,
67
            'chart.background.grid.dashed': false,
68
            'chart.background.grid.dotted': false,
69
            'chart.linewidth':              1,
70
            'chart.title':                  '',
71
            'chart.title.background':       null,
72
            'chart.title.xaxis':            '',
73
            'chart.title.xaxis.bold':       true,
74
            'chart.title.xaxis.size':       null,
75
            'chart.title.xaxis.font':       null,
76
            'chart.title.yaxis':            '',
77
            'chart.title.yaxis.bold':       true,
78
            'chart.title.yaxis.size':       null,
79
            'chart.title.yaxis.font':       null,
80
            'chart.title.yaxis.color':      null,
81
            'chart.title.xaxis.pos':        null,
82
            'chart.title.yaxis.pos':        0.8,
83
            'chart.title.yaxis.x':          null,
84
            'chart.title.yaxis.y':          null,
85
            'chart.title.xaxis.x':          null,
86
            'chart.title.xaxis.y':          null,
87
            'chart.title.hpos':             null,
88
            'chart.title.vpos':             null,
89
            'chart.title.bold':             true,
90
            'chart.title.font':             null,
91
            'chart.title.x':                null,
92
            'chart.title.y':                null,
93
            'chart.title.halign':           null,
94
            'chart.title.valign':           null,
95
            'chart.text.size':              10,
96
            'chart.text.color':             'black',
97
            'chart.text.font':              'Arial',
98
            'chart.colors':                 ['Gradient(white:red)', 'Gradient(white:blue)', 'Gradient(white:green)', 'Gradient(white:pink)', 'Gradient(white:yellow)', 'Gradient(white:cyan)', 'Gradient(white:navy)', 'Gradient(white:gray)', 'Gradient(white:black)'],
99
            'chart.colors.sequential':      false,
100
            'chart.xlabels.specific':       null,
101
            'chart.labels':                 [],
102
            'chart.labels.above':           false,
103
            'chart.labels.above.decimals':  0,
104
            'chart.labels.above.specific':  null,
105
            'chart.xlabels':                true,
106
            'chart.xlabels.count':          5,
107
            'chart.contextmenu':            null,
108
            'chart.key':                    null,
109
            'chart.key.background':         'white',
110
            'chart.key.position':           'graph',
111
            'chart.key.halign':             'right',
112
            'chart.key.shadow':             false,
113
            'chart.key.shadow.color':       '#666',
114
            'chart.key.shadow.blur':        3,
115
            'chart.key.shadow.offsetx':     2,
116
            'chart.key.shadow.offsety':     2,
117
            'chart.key.position.gutter.boxed': false,
118
            'chart.key.position.x':         null,
119
            'chart.key.position.y':         null,
120
            'chart.key.color.shape':        'square',
121
            'chart.key.rounded':            true,
122
            'chart.key.linewidth':          1,
123
            'chart.key.colors':             null,
124
            'chart.key.interactive':        false,
125
            'chart.key.interactive.highlight.chart.stroke': 'black',
126
            'chart.key.interactive.highlight.chart.fill':'rgba(255,255,255,0.7)',
127
            'chart.key.interactive.highlight.label':'rgba(255,0,0,0.2)',
128
            'chart.key.text.color':         'black',
129
            'chart.units.pre':              '',
130
            'chart.units.post':             '',
131
            'chart.units.ingraph':          false,
132
            'chart.strokestyle':            'rgba(0,0,0,0)',
133
            'chart.xmin':                   0,
134
            'chart.xmax':                   0,
135
            'chart.axis.color':             'black',
136
            'chart.shadow':                 false,
137
            'chart.shadow.color':           '#666',
138
            'chart.shadow.blur':            3,
139
            'chart.shadow.offsetx':         3,
140
            'chart.shadow.offsety':         3,
141
            'chart.vmargin':                2,
142
            'chart.vmargin.grouped':        2,
143
            'chart.grouping':               'grouped',
144
            'chart.tooltips':               null,
145
            'chart.tooltips.event':         'onclick',
146
            'chart.tooltips.effect':        'fade',
147
            'chart.tooltips.css.class':     'RGraph_tooltip',
148
            'chart.tooltips.highlight':     true,
149
            'chart.highlight.fill':         'rgba(255,255,255,0.7)',
150
            'chart.highlight.stroke':       'rgba(0,0,0,0)',
151
            'chart.annotatable':            false,
152
            'chart.annotate.color':         'black',
153
            'chart.zoom.factor':            1.5,
154
            'chart.zoom.fade.in':           true,
155
            'chart.zoom.fade.out':          true,
156
            'chart.zoom.hdir':              'right',
157
            'chart.zoom.vdir':              'down',
158
            'chart.zoom.frames':            25,
159
            'chart.zoom.delay':             16.666,
160
            'chart.zoom.shadow':            true,
161
            'chart.zoom.background':        true,
162
            'chart.zoom.action':            'zoom',
163
            'chart.resizable':              false,
164
            'chart.resize.handle.adjust':   [0,0],
165
            'chart.resize.handle.background': null,
166
            'chart.scale.point':            '.',
167
            'chart.scale.thousand':         ',',
168
            'chart.scale.decimals':         null,
169
            'chart.noredraw':               false,
170
            'chart.events.click':           null,
171
            'chart.events.mousemove':       null,
172
            'chart.noxaxis':                false,
173
            'chart.noyaxis':                false,
174
            'chart.noaxes':                 false,
175
            'chart.noxtickmarks':           false,
176
            'chart.noytickmarks':           false,
177
            'chart.numyticks':              data.length,
178
            'chart.numxticks':              10
179
        }
180
 
181
        // Check for support
182
        if (!this.canvas) {
183
            alert('[HBAR] No canvas support');
184
            return;
185
        }
186
 
187
        for (i=0; i<this.data.length; ++i) {
188
            if (typeof(this.data[i]) == 'object') {
189
                this.stackedOrGrouped = true;
190
            }
191
        }
192
 
193
 
194
        /**
195
        * Create the dollar objects so that functions can be added to them
196
        */
197
        var linear_data = RGraph.array_linearize(data);
198
        for (var i=0; i<linear_data.length; ++i) {
199
            this['$' + i] = {};
200
        }
201
 
202
 
203
 
204
        /**
205
        * Create the linear data array
206
        */
207
        this.data_arr = RGraph.array_linearize(this.data);
208
 
209
 
210
        /**
211
        * Translate half a pixel for antialiasing purposes - but only if it hasn't beeen
212
        * done already
213
        */
214
        if (!this.canvas.__rgraph_aa_translated__) {
215
            this.context.translate(0.5,0.5);
216
 
217
            this.canvas.__rgraph_aa_translated__ = true;
218
        }
219
 
220
 
221
 
222
 
223
        ///////////////////////////////// SHORT PROPERTIES /////////////////////////////////
224
 
225
 
226
 
227
 
228
        var RG   = RGraph;
229
        var ca   = this.canvas;
230
        var co   = ca.getContext('2d');
231
        var prop = this.properties;
232
        //var $jq  = jQuery;
233
 
234
 
235
 
236
 
237
        //////////////////////////////////// METHODS ///////////////////////////////////////
238
 
239
 
240
 
241
 
242
        /**
243
        * A setter
244
        *
245
        * @param name  string The name of the property to set
246
        * @param value mixed  The value of the property
247
        */
248
        this.Set = function (name, value)
249
        {
250
            name = name.toLowerCase();
251
 
252
            /**
253
            * This should be done first - prepend the propertyy name with "chart." if necessary
254
            */
255
            if (name.substr(0,6) != 'chart.') {
256
                name = 'chart.' + name;
257
            }
258
 
259
            if (name == 'chart.labels.abovebar') {
260
                name = 'chart.labels.above';
261
            }
262
 
263
            prop[name] = value;
264
 
265
            return this;
266
        }
267
 
268
 
269
 
270
 
271
        /**
272
        * A getter
273
        *
274
        * @param name  string The name of the property to get
275
        */
276
        this.Get = function (name)
277
        {
278
            /**
279
            * This should be done first - prepend the property name with "chart." if necessary
280
            */
281
            if (name.substr(0,6) != 'chart.') {
282
                name = 'chart.' + name;
283
            }
284
 
285
            if (name == 'chart.labels.abovebar') {
286
                name = 'chart.labels.above';
287
            }
288
 
289
            return prop[name];
290
        }
291
 
292
 
293
 
294
 
295
        /**
296
        * The function you call to draw the bar chart
297
        */
298
        this.Draw = function ()
299
        {
300
            /**
301
            * Fire the onbeforedraw event
302
            */
303
            RG.FireCustomEvent(this, 'onbeforedraw');
304
 
305
 
306
            /**
307
            * Parse the colors. This allows for simple gradient syntax
308
            */
309
            if (!this.colorsParsed) {
310
                this.parseColors();
311
 
312
                // Don't want to do this again
313
                this.colorsParsed = true;
314
            }
315
 
316
 
317
            /**
318
            * This is new in May 2011 and facilitates indiviual gutter settings,
319
            * eg chart.gutter.left
320
            */
321
            this.gutterLeft   = prop['chart.gutter.left'];
322
            this.gutterRight  = prop['chart.gutter.right'];
323
            this.gutterTop    = prop['chart.gutter.top'];
324
            this.gutterBottom = prop['chart.gutter.bottom'];
325
 
326
            /**
327
            * Stop the coords array from growing uncontrollably
328
            */
329
            this.coords  = [];
330
            this.coords2 = [];
331
            this.max     = 0;
332
 
333
            /**
334
            * Check for chart.xmin in stacked charts
335
            */
336
            if (prop['chart.xmin'] > 0 && prop['chart.grouping'] == 'stacked') {
337
                alert('[HBAR] Using chart.xmin is not supported with stacked charts, resetting chart.xmin to zero');
338
                this.Set('chart.xmin', 0);
339
            }
340
 
341
            /**
342
            * Work out a few things. They need to be here because they depend on things you can change before you
343
            * call Draw() but after you instantiate the object
344
            */
345
            this.graphwidth     = ca.width - this.gutterLeft - this.gutterRight;
346
            this.graphheight    = ca.height - this.gutterTop - this.gutterBottom;
347
            this.halfgrapharea  = this.grapharea / 2;
348
            this.halfTextHeight = prop['chart.text.size'] / 2;
349
 
350
 
351
 
352
 
353
 
354
 
355
            // Progressively Draw the chart
356
            RG.background.Draw(this);
357
 
358
            this.Drawbars();
359
            this.DrawAxes();
360
            this.DrawLabels();
361
 
362
 
363
            // Draw the key if necessary
364
            if (prop['chart.key'] && prop['chart.key'].length) {
365
                RG.DrawKey(this, prop['chart.key'], prop['chart.colors']);
366
            }
367
 
368
 
369
 
370
            /**
371
            * Setup the context menu if required
372
            */
373
            if (prop['chart.contextmenu']) {
374
                RG.ShowContext(this);
375
            }
376
 
377
 
378
 
379
            /**
380
            * Draw "in graph" labels
381
            */
382
            RG.DrawInGraphLabels(this);
383
 
384
 
385
            /**
386
            * This function enables resizing
387
            */
388
            if (prop['chart.resizable']) {
389
                RG.AllowResizing(this);
390
            }
391
 
392
 
393
            /**
394
            * This installs the event listeners
395
            */
396
            RG.InstallEventListeners(this);
397
 
398
 
399
            /**
400
            * Fire the RGraph ondraw event
401
            */
402
            RG.FireCustomEvent(this, 'ondraw');
403
 
404
            return this;
405
        }
406
 
407
 
408
 
409
 
410
        /**
411
        * This draws the axes
412
        */
413
        this.DrawAxes = function ()
414
        {
415
            var halfway = Math.round((this.graphwidth / 2) + this.gutterLeft);
416
 
417
            co.beginPath();
418
 
419
                co.lineWidth   = prop['chart.axis.linewidth'] ? prop['chart.axis.linewidth'] + 0.001 : 1.001;
420
                co.strokeStyle = prop['chart.axis.color'];
421
 
422
                // Draw the Y axis
423
                if (prop['chart.noyaxis'] == false && prop['chart.noaxes'] == false) {
424
                    if (prop['chart.yaxispos'] == 'center') {
425
                        co.moveTo(halfway, this.gutterTop);
426
                        co.lineTo(halfway, ca.height - this.gutterBottom);
427
                    } else {
428
                        co.moveTo(this.gutterLeft, this.gutterTop);
429
                        co.lineTo(this.gutterLeft, ca.height - this.gutterBottom);
430
                    }
431
                }
432
 
433
                // Draw the X axis
434
                if (prop['chart.noxaxis'] == false && prop['chart.noaxes'] == false) {
435
                    co.moveTo(this.gutterLeft +0.001, ca.height - this.gutterBottom + 0.001);
436
                    co.lineTo(ca.width - this.gutterRight + 0.001, ca.height - this.gutterBottom + 0.001);
437
                }
438
 
439
                // Draw the Y tickmarks
440
                if (   prop['chart.noytickmarks'] == false
441
                    && prop['chart.noyaxis'] == false
442
                    && prop['chart.numyticks'] > 0
443
                    && prop['chart.noaxes'] == false
444
                   ) {
445
 
446
                    var yTickGap = (ca.height - this.gutterTop - this.gutterBottom) / (prop['chart.numyticks'] > 0 ? prop['chart.numyticks'] : this.data.length);
447
 
448
                    for (y=this.gutterTop; y<(ca.height - this.gutterBottom - 1); y+=yTickGap) {
449
                        if (prop['chart.yaxispos'] == 'center') {
450
                            co.moveTo(halfway + 3, Math.round(y));
451
                            co.lineTo(halfway  - 3, Math.round(y));
452
                        } else {
453
                            co.moveTo(this.gutterLeft, Math.round(y));
454
                            co.lineTo( this.gutterLeft  - 3, Math.round(y));
455
                        }
456
                    }
457
 
458
                    // If the X axis isn't being shown draw the end tick
459
                    if (prop['chart.noxaxis'] == true) {
460
                        if (prop['chart.yaxispos'] == 'center') {
461
                            co.moveTo(halfway + 3, Math.round(y));
462
                            co.lineTo(halfway  - 3, Math.round(y));
463
                        } else {
464
                            co.moveTo(this.gutterLeft, Math.round(y));
465
                            co.lineTo( this.gutterLeft  - 3, Math.round(y));
466
                        }
467
                    }
468
                }
469
 
470
 
471
                // Draw the X tickmarks
472
                if (   prop['chart.noxtickmarks'] == false
473
                    && prop['chart.noxaxis'] == false
474
                    && prop['chart.numxticks'] > 0
475
                    && prop['chart.noaxes'] == false) {
476
 
477
                    xTickGap = (ca.width - this.gutterLeft - this.gutterRight ) / prop['chart.numxticks'];
478
 
479
                    yStart   = ca.height - this.gutterBottom;
480
                    yEnd     = (ca.height - this.gutterBottom) + 3;
481
 
482
                    for (x=(ca.width - this.gutterRight), i=0; prop['chart.yaxispos'] == 'center' ? x>=this.gutterLeft : x>this.gutterLeft; x-=xTickGap) {
483
 
484
                        if (prop['chart.yaxispos'] != 'center' || i != 5) {
485
                            co.moveTo(Math.round(x), yStart);
486
                            co.lineTo(Math.round(x), yEnd);
487
                        }
488
                        i++;
489
                    }
490
 
491
                    // If the Y axis isn't being shown draw the end tick
492
                    if (prop['chart.noyaxis'] == true) {
493
                        co.moveTo(this.gutterLeft, Math.round(yStart));
494
                        co.lineTo( this.gutterLeft, Math.round(yEnd));
495
                    }
496
                }
497
            co.stroke();
498
 
499
            /**
500
            * Reset the linewidth
501
            */
502
            co.lineWidth = 1;
503
        }
504
 
505
 
506
 
507
 
508
        /**
509
        * This draws the labels for the graph
510
        */
511
        this.DrawLabels = function ()
512
        {
513
            var units_pre  = prop['chart.units.pre'];
514
            var units_post = prop['chart.units.post'];
515
            var text_size  = prop['chart.text.size'];
516
            var font       = prop['chart.text.font'];
517
 
518
 
519
 
520
            /**
521
            * Set the units to blank if they're to be used for ingraph labels only
522
            */
523
            if (prop['chart.units.ingraph']) {
524
                units_pre  = '';
525
                units_post = '';
526
            }
527
 
528
 
529
            /**
530
            * Draw the X axis labels
531
            */
532
            if (prop['chart.xlabels']) {
533
 
534
                /**
535
                * Specific X labels
536
                */
537
                if (RGraph.is_array(prop['chart.xlabels.specific'])) {
538
 
539
                    if (prop['chart.yaxispos'] == 'center') {
540
 
541
                        var halfGraphWidth = this.graphwidth / 2;
542
                        var labels         = prop['chart.xlabels.specific'];
543
                        var interval       = (this.graphwidth / 2) / (labels.length - 1);
544
 
545
                        co.fillStyle = prop['chart.text.color'];
546
 
547
                        for (var i=0; i<labels.length; i+=1) {
548
                                RG.Text2(this, {'font':font,
549
                                                'size':text_size,
550
                                                'x':this.gutterLeft + halfGraphWidth + (interval * i),
551
                                                'y':ca.height - this.gutterBottom,
552
                                                'text':labels[i],
553
                                                'valign':'top',
554
                                                'halign':'center',
555
                                                'tag': 'scale'});
556
                        }
557
 
558
                        for (var i=(labels.length - 1); i>0; i-=1) {
559
                                RG.Text2(this, {'font':font,
560
                                                'size':text_size,
561
                                                'x':this.gutterLeft + (interval * (labels.length - i - 1)),
562
                                                'y':ca.height - this.gutterBottom,
563
                                                'text':labels[i],
564
                                                'valign':'top',
565
                                                'halign':'center',
566
                                                'tag': 'scale'});
567
                        }
568
 
569
                    } else {
570
 
571
                        var labels   = prop['chart.xlabels.specific'];
572
                        var interval = this.graphwidth / (labels.length - 1);
573
 
574
                        co.fillStyle = prop['chart.text.color'];
575
 
576
                        for (var i=0; i<labels.length; i+=1) {
577
                                RG.Text2(this, {'font':font,
578
                                                'size':text_size,
579
                                                'x':this.gutterLeft + (interval * i),
580
                                                'y':ca.height - this.gutterBottom,
581
                                                'text':labels[i],
582
                                                'valign':'top',
583
                                                'halign':'center',
584
                                                'tag': 'scale'});
585
                        }
586
                    }
587
 
588
                /**
589
                * Draw an X scale
590
                */
591
                } else {
592
 
593
                    var gap = 7;
594
 
595
                    co.beginPath();
596
                    co.fillStyle = prop['chart.text.color'];
597
 
598
 
599
                    if (prop['chart.yaxispos'] == 'center') {
600
 
601
                        for (var i=0; i<this.scale2.labels.length; ++i) {
602
                            RG.Text2(this, {'font':font,
603
                                                'size':text_size,
604
                                                'x':this.gutterLeft + (this.graphwidth / 2) - ((this.graphwidth / 2) * ((i+1)/this.scale2.labels.length)),
605
                                                'y':this.gutterTop + this.halfTextHeight + this.graphheight + gap,
606
                                                'text':this.scale2.labels[i],
607
                                                'valign':'center',
608
                                                'halign':'center',
609
                                        'tag': 'scale'});
610
                        }
611
 
612
                        for (var i=0; i<this.scale2.labels.length; ++i) {
613
                            RG.Text2(this, {'font':font,
614
                                                'size':text_size,
615
                                                'x':this.gutterLeft + ((this.graphwidth / 2) * ((i+1)/this.scale2.labels.length)) + (this.graphwidth / 2),
616
                                                'y':this.gutterTop + this.halfTextHeight + this.graphheight + gap,
617
                                                'text':this.scale2.labels[i],
618
                                                'valign':'center',
619
                                                'halign':'center',
620
                                        'tag': 'scale'});
621
                        }
622
 
623
                    } else {
624
 
625
                        for (var i=0; i<this.scale2.labels.length; ++i) {
626
                            RG.Text2(this, {'font':font,
627
                                                'size':text_size,
628
                                                'x':this.gutterLeft + (this.graphwidth * ((i+1)/this.scale2.labels.length)),
629
                                                'y':this.gutterTop + this.halfTextHeight + this.graphheight + gap,
630
                                                'text':this.scale2.labels[i],
631
                                                'valign':'center',
632
                                                'halign':'center',
633
                                                'tag': 'scale'
634
                                               });
635
                        }
636
                    }
637
 
638
                    /**
639
                    * If xmin is not zero - draw that
640
                    */
641
                    if (prop['chart.xmin'] > 0 || prop['chart.noyaxis'] == true) {
642
 
643
                        var x = prop['chart.yaxispos'] == 'center' ?  this.gutterLeft + (this.graphwidth / 2): this.gutterLeft;
644
 
645
                        RG.Text2(this, {'font':font,
646
                                            'size':text_size,
647
                                            'x':x,
648
                                            'y':this.gutterTop + this.halfTextHeight + this.graphheight + gap,
649
                                            'text':RG.number_format(this, prop['chart.xmin'].toFixed(prop['chart.scale.decimals']), units_pre, units_post),
650
                                            'valign':'center',
651
                                            'halign':'center',
652
                                            'tag': 'scale'
653
                                           });
654
                    }
655
 
656
                    co.fill();
657
                    co.stroke();
658
                }
659
            }
660
 
661
            /**
662
            * The Y axis labels
663
            */
664
            if (typeof(prop['chart.labels']) == 'object') {
665
 
666
                var xOffset = 5;
667
                var font    = prop['chart.text.font'];
668
 
669
                // Draw the X axis labels
670
                co.fillStyle = prop['chart.text.color'];
671
 
672
                // How wide is each bar
673
                var barHeight = (ca.height - this.gutterTop - this.gutterBottom ) / prop['chart.labels'].length;
674
 
675
                // Reset the xTickGap
676
                yTickGap = (ca.height - this.gutterTop - this.gutterBottom) / prop['chart.labels'].length
677
 
678
                // Draw the X tickmarks
679
                var i=0;
680
                for (y=this.gutterTop + (yTickGap / 2); y<=ca.height - this.gutterBottom; y+=yTickGap) {
681
 
682
                    RG.Text2(this, {'font':font,
683
                                       'size':prop['chart.text.size'],
684
                                       'x':this.gutterLeft - xOffset,
685
                                       'y':y,
686
                                       'text':String(prop['chart.labels'][i++]),
687
                                       'halign':'right',
688
                                       'valign':'center',
689
                                       'tag': 'labels'
690
                                      });
691
                }
692
            }
693
        }
694
 
695
 
696
 
697
 
698
        /**
699
        * This function draws the bars
700
        */
701
        this.Drawbars = function ()
702
        {
703
            co.lineWidth   = prop['chart.linewidth'];
704
            co.strokeStyle = prop['chart.strokestyle'];
705
            co.fillStyle   = prop['chart.colors'][0];
706
            var prevX      = 0;
707
            var prevY      = 0;
708
 
709
            /**
710
            * Work out the max value
711
            */
712
            if (prop['chart.xmax']) {
713
                this.scale2 = RG.getScale2(this, {'max':prop['chart.xmax'],
714
                                                      'min':prop['chart.xmin'],
715
                                                      'scale.decimals':Number(prop['chart.scale.decimals']),
716
                                                      'scale.point':prop['chart.scale.point'],
717
                                                      'scale.thousand':prop['chart.scale.thousand'],
718
                                                      'scale.round':prop['chart.scale.round'],
719
                                                      'units.pre':prop['chart.units.pre'],
720
                                                      'units.post':prop['chart.units.post'],
721
                                                      'ylabels.count':prop['chart.xlabels.count'],
722
                                                      'strict':true
723
                                                     });
724
                this.max = this.scale2.max;
725
 
726
            } else {
727
 
728
                var grouping = prop['chart.grouping'];
729
 
730
                for (i=0; i<this.data.length; ++i) {
731
                    if (typeof(this.data[i]) == 'object') {
732
                        var value = grouping == 'grouped' ? Number(RG.array_max(this.data[i], true)) : Number(RG.array_sum(this.data[i])) ;
733
                    } else {
734
                        var value = Number(Math.abs(this.data[i]));
735
                    }
736
 
737
                    this.max = Math.max(Math.abs(this.max), Math.abs(value));
738
                }
739
 
740
                this.scale2 = RG.getScale2(this, {'max':this.max,
741
                                                      'min':prop['chart.xmin'],
742
                                                      'scale.decimals':Number(prop['chart.scale.decimals']),
743
                                                      'scale.point':prop['chart.scale.point'],
744
                                                      'scale.thousand':prop['chart.scale.thousand'],
745
                                                      'scale.round':prop['chart.scale.round'],
746
                                                      'units.pre':prop['chart.units.pre'],
747
                                                      'units.post':prop['chart.units.post'],
748
                                                      'ylabels.count':prop['chart.xlabels.count']
749
                                                     });
750
 
751
 
752
                this.max = this.scale2.max;
753
                this.min = this.scale2.min;
754
            }
755
 
756
            if (prop['chart.scale.decimals'] == null && Number(this.max) == 1) {
757
                this.Set('chart.scale.decimals', 1);
758
            }
759
 
760
            /**
761
            * This is here to facilitate sequential colors
762
            */
763
            var colorIdx = 0;
764
 
765
            /**
766
            * The bars are drawn HERE
767
            */
768
            var graphwidth = (ca.width - this.gutterLeft - this.gutterRight);
769
            var halfwidth  = graphwidth / 2;
770
 
771
            for (i=0; i<this.data.length; ++i) {
772
 
773
                // Work out the width and height
774
                var width  = (this.data[i] / this.max) *  graphwidth;
775
                var height = this.graphheight / this.data.length;
776
 
777
                var orig_height = height;
778
 
779
                var x       = this.gutterLeft;
780
                var y       = this.gutterTop + (i * height);
781
                var vmargin = prop['chart.vmargin'];
782
 
783
                // Account for negative lengths - Some browsers (eg Chrome) don't like a negative value
784
                if (width < 0) {
785
                    x -= width;
786
                    width = Math.abs(width);
787
                }
788
 
789
                /**
790
                * Turn on the shadow if need be
791
                */
792
                if (prop['chart.shadow']) {
793
                    co.shadowColor   = prop['chart.shadow.color'];
794
                    co.shadowBlur    = prop['chart.shadow.blur'];
795
                    co.shadowOffsetX = prop['chart.shadow.offsetx'];
796
                    co.shadowOffsetY = prop['chart.shadow.offsety'];
797
                }
798
 
799
                /**
800
                * Draw the bar
801
                */
802
                co.beginPath();
803
                    if (typeof(this.data[i]) == 'number') {
804
 
805
                        var barHeight = height - (2 * vmargin);
806
                        var barWidth  = ((this.data[i] - prop['chart.xmin']) / (this.max - prop['chart.xmin'])) * this.graphwidth;
807
                        var barX      = this.gutterLeft;
808
 
809
                        // Account for Y axis pos
810
                        if (prop['chart.yaxispos'] == 'center') {
811
                            barWidth /= 2;
812
                            barX += halfwidth;
813
 
814
                            if (this.data[i] < 0) {
815
                                barWidth = (Math.abs(this.data[i]) - prop['chart.xmin']) / (this.max - prop['chart.xmin']);
816
                                barWidth = barWidth * (this.graphwidth / 2);
817
                                barX = ((this.graphwidth / 2) + this.gutterLeft) - barWidth;
818
                            }
819
                        }
820
 
821
                        // Set the fill color
822
                        co.strokeStyle = prop['chart.strokestyle'];
823
                        co.fillStyle = prop['chart.colors'][0];
824
 
825
                        // Sequential colors
826
                        if (prop['chart.colors.sequential']) {
827
                            co.fillStyle = prop['chart.colors'][colorIdx++];
828
                        }
829
 
830
                        co.strokeRect(barX, this.gutterTop + (i * height) + prop['chart.vmargin'], barWidth, barHeight);
831
                        co.fillRect(barX, this.gutterTop + (i * height) + prop['chart.vmargin'], barWidth, barHeight);
832
 
833
                        this.coords.push([barX,
834
                                          y + vmargin,
835
                                          barWidth,
836
                                          height - (2 * vmargin),
837
                                          co.fillStyle,
838
                                          this.data[i],
839
                                          true]);
840
 
841
                    /**
842
                    * Stacked bar chart
843
                    */
844
                    } else if (typeof(this.data[i]) == 'object' && prop['chart.grouping'] == 'stacked') {
845
 
846
                        if (prop['chart.yaxispos'] == 'center') {
847
                            alert('[HBAR] You can\'t have a stacked chart with the Y axis in the center, change it to grouped');
848
                        }
849
 
850
                        var barHeight = height - (2 * vmargin);
851
 
852
                        if (typeof this.coords2[i] == 'undefined') {
853
                            this.coords2[i] = [];
854
                        }
855
 
856
                        for (j=0; j<this.data[i].length; ++j) {
857
 
858
 
859
                            // Set the fill/stroke colors
860
                            co.strokeStyle = prop['chart.strokestyle'];
861
                            co.fillStyle = prop['chart.colors'][j];
862
 
863
 
864
                            // Sequential colors
865
                            if (prop['chart.colors.sequential']) {
866
                                co.fillStyle = prop['chart.colors'][colorIdx++];
867
                            }
868
 
869
 
870
                            var width = (((this.data[i][j]) / (this.max))) * this.graphwidth;
871
                            var totalWidth = (RG.array_sum(this.data[i]) / this.max) * this.graphwidth;
872
 
873
                            co.strokeRect(x, this.gutterTop + prop['chart.vmargin'] + (this.graphheight / this.data.length) * i, width, height - (2 * vmargin) );
874
                            co.fillRect(x, this.gutterTop + prop['chart.vmargin'] + (this.graphheight / this.data.length) * i, width, height - (2 * vmargin) );
875
 
876
                            /**
877
                            * Store the coords for tooltips
878
                            */
879
 
880
                            // The last property of this array is a boolean which tells you whether the value is the last or not
881
                            this.coords.push([x,
882
                                              y + vmargin,
883
                                              width,
884
                                              height - (2 * vmargin),
885
                                              co.fillStyle,
886
                                              RG.array_sum(this.data[i]),
887
                                              j == (this.data[i].length - 1)
888
                                             ]);
889
                            this.coords2[i].push([x,
890
                                                  y + vmargin,
891
                                                  width,
892
                                                  height - (2 * vmargin),
893
                                                  co.fillStyle,
894
                                                  RG.array_sum(this.data[i]),
895
                                                  j == (this.data[i].length - 1)
896
                                                 ]);
897
 
898
                            x += width;
899
                        }
900
 
901
                    /**
902
                    * A grouped bar chart
903
                    */
904
                    } else if (typeof(this.data[i]) == 'object' && prop['chart.grouping'] == 'grouped') {
905
 
906
                        var vmarginGrouped      = prop['chart.vmargin.grouped'];
907
                        var individualBarHeight = ((height - (2 * vmargin) - ((this.data[i].length - 1) * vmarginGrouped)) / this.data[i].length)
908
 
909
                        if (typeof this.coords2[i] == 'undefined') {
910
                            this.coords2[i] = [];
911
                        }
912
 
913
                        for (j=0; j<this.data[i].length; ++j) {
914
 
915
 
916
                            /**
917
                            * Turn on the shadow if need be
918
                            */
919
                            if (prop['chart.shadow']) {
920
                                RG.SetShadow(this, prop['chart.shadow.color'], prop['chart.shadow.offsetx'], prop['chart.shadow.offsety'], prop['chart.shadow.blur']);
921
                            }
922
 
923
                            // Set the fill/stroke colors
924
                            co.strokeStyle = prop['chart.strokestyle'];
925
                            co.fillStyle   = prop['chart.colors'][j];
926
 
927
                            // Sequential colors
928
                            if (prop['chart.colors.sequential']) {
929
                                co.fillStyle = prop['chart.colors'][colorIdx++];
930
                            }
931
 
932
 
933
 
934
                            var startY = this.gutterTop + (height * i) + (individualBarHeight * j) + vmargin + (vmarginGrouped * j);
935
                            var width = ((this.data[i][j] - prop['chart.xmin']) / (this.max - prop['chart.xmin'])) * (ca.width - this.gutterLeft - this.gutterRight );
936
                            var startX = this.gutterLeft;
937
 
938
 
939
 
940
 
941
                            // Account for the Y axis being in the middle
942
                            if (prop['chart.yaxispos'] == 'center') {
943
                                width  /= 2;
944
                                startX += halfwidth;
945
                            }
946
 
947
                            if (width < 0) {
948
                                startX += width;
949
                                width *= -1;
950
                            }
951
 
952
                            co.strokeRect(startX, startY, width, individualBarHeight);
953
                            co.fillRect(startX, startY, width, individualBarHeight);
954
 
955
                            this.coords.push([startX,
956
                                              startY,
957
                                              width,
958
                                              individualBarHeight,
959
                                              co.fillStyle,
960
                                              this.data[i][j],
961
                                              true]);
962
 
963
                            this.coords2[i].push([startX,
964
                                                  startY,
965
                                                  width,
966
                                                  individualBarHeight,
967
                                                  co.fillStyle,
968
                                                  this.data[i][j],
969
                                                  true]);
970
                        }
971
 
972
                        startY += vmargin;
973
                    }
974
 
975
                co.closePath();
976
            }
977
 
978
            co.stroke();
979
            co.fill();
980
 
981
 
982
 
983
            /**
984
            * Now the bars are stroke()ed, turn off the shadow
985
            */
986
            RG.NoShadow(this);
987
 
988
            this.RedrawBars();
989
        }
990
 
991
 
992
 
993
 
994
        /**
995
        * This function goes over the bars after they been drawn, so that upwards shadows are underneath the bars
996
        */
997
        this.RedrawBars = function ()
998
        {
999
            if (prop['chart.noredraw']) {
1000
                return;
1001
            }
1002
 
1003
            var coords = this.coords;
1004
 
1005
            var font   = prop['chart.text.font'];
1006
            var size   = prop['chart.text.size'];
1007
            var color  = prop['chart.text.color'];
1008
 
1009
            RG.NoShadow(this);
1010
            co.strokeStyle = prop['chart.strokestyle'];
1011
 
1012
            for (var i=0; i<coords.length; ++i) {
1013
 
1014
                if (prop['chart.shadow']) {
1015
                    co.beginPath();
1016
                        co.strokeStyle = prop['chart.strokestyle'];
1017
                        co.fillStyle = coords[i][4];
1018
                        co.lineWidth = prop['chart.linewidth'];
1019
                        co.strokeRect(coords[i][0], coords[i][1], coords[i][2], coords[i][3]);
1020
                        co.fillRect(coords[i][0], coords[i][1], coords[i][2], coords[i][3]);
1021
                    co.fill();
1022
                    co.stroke();
1023
                }
1024
 
1025
                /**
1026
                * Draw labels "above" the bar
1027
                */
1028
                if (prop['chart.labels.above'] && coords[i][6]) {
1029
 
1030
                    co.fillStyle   = prop['chart.text.color'];
1031
                    co.strokeStyle = 'black';
1032
                    RG.NoShadow(this);
1033
 
1034
                    var border = (coords[i][0] + coords[i][2] + 7 + co.measureText(prop['chart.units.pre'] + this.coords[i][5] + prop['chart.units.post']).width) > ca.width ? true : false;
1035
 
1036
                    /**
1037
                    * Default to the value - then check for specific labels
1038
                    */
1039
                    var text = RG.number_format(this, (this.coords[i][5]).toFixed(prop['chart.labels.above.decimals']), prop['chart.units.pre'], prop['chart.units.post']);
1040
                    if (typeof prop['chart.labels.above.specific'] == 'object' && prop['chart.labels.above.specific'] && prop['chart.labels.above.specific'][i]) {
1041
                        text = prop['chart.labels.above.specific'][i];
1042
                    }
1043
 
1044
                    RG.Text2(this, {'font':font,
1045
                                        'size':size,
1046
                                        'x':coords[i][0] + coords[i][2] + 5,
1047
                                        'y':coords[i][1] + (coords[i][3] / 2),
1048
                                        'text': text,
1049
                                        'valign':'center',
1050
                                        'halign':'left',
1051
                                        'tag': 'labels.above'
1052
                                       });
1053
                }
1054
            }
1055
        }
1056
 
1057
 
1058
 
1059
 
1060
        /**
1061
        * This function can be used to get the appropriate bar information (if any)
1062
        *
1063
        * @param  e Event object
1064
        * @return   Appriate bar information (if any)
1065
        */
1066
        this.getShape =
1067
        this.getBar = function (e)
1068
        {
1069
            var mouseCoords = RG.getMouseXY(e);
1070
 
1071
            /**
1072
            * Loop through the bars determining if the mouse is over a bar
1073
            */
1074
            for (var i=0,len=this.coords.length; i<len; i++) {
1075
 
1076
                var mouseX = mouseCoords[0];  // In relation to the canvas
1077
                var mouseY = mouseCoords[1];  // In relation to the canvas
1078
                var left   = this.coords[i][0];
1079
                var top    = this.coords[i][1];
1080
                var width  = this.coords[i][2];
1081
                var height = this.coords[i][3];
1082
                var idx    = i;
1083
 
1084
                if (mouseX >= left && mouseX <= (left + width) && mouseY >= top && mouseY <= (top + height) ) {
1085
 
1086
                    var tooltip = RG.parseTooltipText(prop['chart.tooltips'], i);
1087
 
1088
                    return {
1089
                            0: this,   'object': this,
1090
                            1: left,   'x': left,
1091
                            2: top,    'y': top,
1092
                            3: width,  'width': width,
1093
                            4: height, 'height': height,
1094
                            5: idx,    'index': idx,
1095
                                       'tooltip': tooltip
1096
                           };
1097
                }
1098
            }
1099
        }
1100
 
1101
 
1102
 
1103
 
1104
        /**
1105
        * When you click on the chart, this method can return the X value at that point. It works for any point on the
1106
        * chart (that is inside the gutters) - not just points within the Bars.
1107
        *
1108
        * @param object e The event object
1109
        */
1110
        this.getValue = function (arg)
1111
        {
1112
            if (arg.length == 2) {
1113
                var mouseX = arg[0];
1114
                var mouseY = arg[1];
1115
            } else {
1116
                var mouseCoords = RG.getMouseXY(arg);
1117
                var mouseX      = mouseCoords[0];
1118
                var mouseY      = mouseCoords[1];
1119
            }
1120
 
1121
            if (   mouseY < this.gutterTop
1122
                || mouseY > (ca.height - this.gutterBottom)
1123
                || mouseX < this.gutterLeft
1124
                || mouseX > (ca.width - this.gutterRight)
1125
               ) {
1126
                return null;
1127
            }
1128
 
1129
            if (prop['chart.yaxispos'] == 'center') {
1130
                var value = ((mouseX - this.gutterLeft) / (this.graphwidth / 2)) * (this.max - prop['chart.xmin']);
1131
                    value = value - this.max
1132
 
1133
                    // Special case if xmin is defined
1134
                    if (prop['chart.xmin'] > 0) {
1135
                        value = ((mouseX - this.gutterLeft - (this.graphwidth / 2)) / (this.graphwidth / 2)) * (this.max - prop['chart.xmin']);
1136
                        value += prop['chart.xmin'];
1137
 
1138
                        if (mouseX < (this.gutterLeft + (this.graphwidth / 2))) {
1139
                            value -= (2 * prop['chart.xmin']);
1140
                        }
1141
                    }
1142
            } else {
1143
                var value = ((mouseX - this.gutterLeft) / this.graphwidth) * (this.max - prop['chart.xmin']);
1144
                    value += prop['chart.xmin'];
1145
            }
1146
 
1147
            return value;
1148
        }
1149
 
1150
 
1151
 
1152
 
1153
        /**
1154
        * Each object type has its own Highlight() function which highlights the appropriate shape
1155
        *
1156
        * @param object shape The shape to highlight
1157
        */
1158
        this.Highlight = function (shape)
1159
        {
1160
            // Add the new highlight
1161
            RG.Highlight.Rect(this, shape);
1162
        }
1163
 
1164
 
1165
 
1166
 
1167
        /**
1168
        * The getObjectByXY() worker method. Don't call this call:
1169
        *
1170
        * RG.ObjectRegistry.getObjectByXY(e)
1171
        *
1172
        * @param object e The event object
1173
        */
1174
        this.getObjectByXY = function (e)
1175
        {
1176
            var mouseXY = RG.getMouseXY(e);
1177
 
1178
            if (
1179
                   mouseXY[0] > this.gutterLeft
1180
                && mouseXY[0] < (ca.width - this.gutterRight)
1181
                && mouseXY[1] > this.gutterTop
1182
                && mouseXY[1] < (ca.height - this.gutterBottom)
1183
                ) {
1184
 
1185
                return this;
1186
            }
1187
        }
1188
 
1189
 
1190
 
1191
 
1192
        /**
1193
        * This function positions a tooltip when it is displayed
1194
        *
1195
        * @param obj object    The chart object
1196
        * @param int x         The X coordinate specified for the tooltip
1197
        * @param int y         The Y coordinate specified for the tooltip
1198
        * @param objec tooltip The tooltips DIV element
1199
        */
1200
        this.positionTooltip = function (obj, x, y, tooltip, idx)
1201
        {
1202
            var coordX     = obj.coords[tooltip.__index__][0];
1203
            var coordY     = obj.coords[tooltip.__index__][1];
1204
            var coordW     = obj.coords[tooltip.__index__][2];
1205
            var coordH     = obj.coords[tooltip.__index__][3];
1206
            var canvasXY   = RG.getCanvasXY(obj.canvas);
1207
            var gutterLeft = obj.gutterLeft;
1208
            var gutterTop  = obj.gutterTop;
1209
            var width      = tooltip.offsetWidth;
1210
            var height     = tooltip.offsetHeight;
1211
 
1212
            // Set the top position
1213
            tooltip.style.left = 0;
1214
            tooltip.style.top  = canvasXY[1] + coordY + (coordH / 2) - height + 'px';
1215
 
1216
            // By default any overflow is hidden
1217
            tooltip.style.overflow = '';
1218
 
1219
            // The arrow
1220
            var img = new Image();
1221
                img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAFCAYAAACjKgd3AAAARUlEQVQYV2NkQAN79+797+RkhC4M5+/bd47B2dmZEVkBCgcmgcsgbAaA9GA1BCSBbhAuA/AagmwQPgMIGgIzCD0M0AMMAEFVIAa6UQgcAAAAAElFTkSuQmCC';
1222
                img.style.position = 'absolute';
1223
                img.id = '__rgraph_tooltip_pointer__';
1224
                img.style.top = (tooltip.offsetHeight - 2) + 'px';
1225
            tooltip.appendChild(img);
1226
 
1227
            // Reposition the tooltip if at the edges:
1228
 
1229
            // LEFT edge
1230
            if ((canvasXY[0] + coordX  + (coordW / 2) - (width / 2)) < 10) {
1231
                tooltip.style.left = (canvasXY[0] + coordX - (width * 0.1)) + (coordW / 2) + 'px';
1232
                img.style.left = ((width * 0.1) - 8.5) + 'px';
1233
 
1234
            // RIGHT edge
1235
            } else if ((canvasXY[0] + (coordW / 2) + coordX + (width / 2)) > document.body.offsetWidth) {
1236
                tooltip.style.left = canvasXY[0] + coordX - (width * 0.9) + (coordW / 2) + 'px';
1237
                img.style.left = ((width * 0.9) - 8.5) + 'px';
1238
 
1239
            // Default positioning - CENTERED
1240
            } else {
1241
                tooltip.style.left = (canvasXY[0] + coordX + (coordW / 2) - (width * 0.5)) + 'px';
1242
                img.style.left = ((width * 0.5) - 8.5) + 'px';
1243
            }
1244
        }
1245
 
1246
 
1247
 
1248
 
1249
        /**
1250
        * Returns the appropriate Y coord for the given value
1251
        *
1252
        * @param number value The value to get the coord for
1253
        */
1254
        this.getXCoord = function (value)
1255
        {
1256
 
1257
            if (prop['chart.yaxispos'] == 'center') {
1258
 
1259
                // Range checking
1260
                if (value > this.max || value < (-1 * this.max)) {
1261
                    return null;
1262
                }
1263
 
1264
                var width = (ca.width - prop['chart.gutter.left'] - prop['chart.gutter.right']) / 2;
1265
                var coord = (((value - prop['chart.xmin']) / (this.max - prop['chart.xmin'])) * width) + width;
1266
 
1267
                    coord = prop['chart.gutter.left'] + coord;
1268
            } else {
1269
 
1270
                // Range checking
1271
                if (value > this.max || value < 0) {
1272
                    return null;
1273
                }
1274
 
1275
                var width = ca.width - prop['chart.gutter.left'] - prop['chart.gutter.right'];
1276
                var coord = ((value - prop['chart.xmin']) / (this.max - prop['chart.xmin'])) * width;
1277
 
1278
                    coord = prop['chart.gutter.left'] + coord;
1279
            }
1280
 
1281
            return coord;
1282
        }
1283
 
1284
 
1285
 
1286
 
1287
        /**
1288
        *
1289
        */
1290
        this.parseColors = function ()
1291
        {
1292
            var colors = prop['chart.colors'];
1293
 
1294
            for (var i=0; i<colors.length; ++i) {
1295
                colors[i] = this.parseSingleColorForGradient(colors[i]);
1296
            }
1297
 
1298
            prop['chart.background.grid.color'] = this.parseSingleColorForGradient(prop['chart.background.grid.color']);
1299
            prop['chart.background.barcolor1']  = this.parseSingleColorForGradient(prop['chart.background.barcolor1']);
1300
            prop['chart.background.barcolor2']  = this.parseSingleColorForGradient(prop['chart.background.barcolor2']);
1301
            prop['chart.text.color']            = this.parseSingleColorForGradient(prop['chart.text.color']);
1302
            prop['chart.labels.colors']         = this.parseSingleColorForGradient(prop['chart.labels.colors']);
1303
            prop['chart.strokestyle']           = this.parseSingleColorForGradient(prop['chart.strokestyle']);
1304
            prop['chart.axis.color']            = this.parseSingleColorForGradient(prop['chart.axis.color']);
1305
            prop['chart.highlight.fill']        = this.parseSingleColorForGradient(prop['chart.highlight.fill']);
1306
            prop['chart.highlight.stroke']      = this.parseSingleColorForGradient(prop['chart.highlight.stroke']);
1307
        }
1308
 
1309
 
1310
 
1311
        /**
1312
        * This parses a single color value
1313
        */
1314
        this.parseSingleColorForGradient = function (color)
1315
        {
1316
            if (!color || typeof(color) != 'string') {
1317
                return color;
1318
            }
1319
 
1320
            if (color.match(/^gradient\((.*)\)$/i)) {
1321
 
1322
                var parts = RegExp.$1.split(':');
1323
 
1324
                // Create the gradient
1325
                var grad = co.createLinearGradient(prop['chart.gutter.left'],0,ca.width - prop['chart.gutter.right'],0);
1326
 
1327
                var diff = 1 / (parts.length - 1);
1328
 
1329
                grad.addColorStop(0, RG.trim(parts[0]));
1330
 
1331
                for (var j=1; j<parts.length; ++j) {
1332
                    grad.addColorStop(j * diff, RG.trim(parts[j]));
1333
                }
1334
            }
1335
 
1336
            return grad ? grad : color;
1337
        }
1338
 
1339
 
1340
 
1341
 
1342
        /**
1343
        * This function handles highlighting an entire data-series for the interactive
1344
        * key
1345
        *
1346
        * @param int index The index of the data series to be highlighted
1347
        */
1348
        this.interactiveKeyHighlight = function (index)
1349
        {
1350
            var obj = this;
1351
 
1352
            this.coords2.forEach(function (value, idx, arr)
1353
            {
1354
                var shape = obj.coords2[idx][index]
1355
                var pre_linewidth = co.lineWidth;
1356
                co.lineWidth = 2;
1357
                co.fillStyle   = prop['chart.key.interactive.highlight.chart.fill'];
1358
                co.strokeStyle = prop['chart.key.interactive.highlight.chart.stroke'];
1359
                co.fillRect(shape[0], shape[1], shape[2], shape[3]);
1360
                co.strokeRect(shape[0], shape[1], shape[2], shape[3]);
1361
 
1362
                // Reset the lineWidth
1363
                co.lineWidth = pre_linewidth;
1364
            });
1365
        }
1366
 
1367
 
1368
 
1369
 
1370
        /**
1371
        * Charts are now always registered
1372
        */
1373
        RG.Register(this);
1374
    }