rgraph-rails 1.0.8 → 4.62

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (67) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +3 -3
  3. data/lib/rgraph-rails/version.rb +1 -1
  4. data/vendor/assets/javascripts/RGraph.bar.js +16 -8
  5. data/vendor/assets/javascripts/RGraph.bipolar.js +1 -1
  6. data/vendor/assets/javascripts/RGraph.common.annotate.js +1 -1
  7. data/vendor/assets/javascripts/RGraph.common.context.js +1 -1
  8. data/vendor/assets/javascripts/RGraph.common.core.js +84 -7
  9. data/vendor/assets/javascripts/RGraph.common.csv.js +1 -1
  10. data/vendor/assets/javascripts/RGraph.common.deprecated.js +1 -1
  11. data/vendor/assets/javascripts/RGraph.common.dynamic.js +1 -1
  12. data/vendor/assets/javascripts/RGraph.common.effects.js +1 -1
  13. data/vendor/assets/javascripts/RGraph.common.key.js +3 -3
  14. data/vendor/assets/javascripts/RGraph.common.resizing.js +1 -1
  15. data/vendor/assets/javascripts/RGraph.common.sheets.js +1 -1
  16. data/vendor/assets/javascripts/RGraph.common.tooltips.js +1 -1
  17. data/vendor/assets/javascripts/RGraph.common.zoom.js +1 -1
  18. data/vendor/assets/javascripts/RGraph.drawing.background.js +1 -1
  19. data/vendor/assets/javascripts/RGraph.drawing.circle.js +1 -1
  20. data/vendor/assets/javascripts/RGraph.drawing.image.js +1 -1
  21. data/vendor/assets/javascripts/RGraph.drawing.marker1.js +1 -1
  22. data/vendor/assets/javascripts/RGraph.drawing.marker2.js +1 -1
  23. data/vendor/assets/javascripts/RGraph.drawing.marker3.js +1 -1
  24. data/vendor/assets/javascripts/RGraph.drawing.poly.js +1 -1
  25. data/vendor/assets/javascripts/RGraph.drawing.rect.js +1 -1
  26. data/vendor/assets/javascripts/RGraph.drawing.text.js +1 -1
  27. data/vendor/assets/javascripts/RGraph.drawing.xaxis.js +1 -1
  28. data/vendor/assets/javascripts/RGraph.drawing.yaxis.js +1 -1
  29. data/vendor/assets/javascripts/RGraph.fuel.js +1 -1
  30. data/vendor/assets/javascripts/RGraph.funnel.js +1 -1
  31. data/vendor/assets/javascripts/RGraph.gantt.js +1 -1
  32. data/vendor/assets/javascripts/RGraph.gauge.js +1 -1
  33. data/vendor/assets/javascripts/RGraph.hbar.js +228 -2
  34. data/vendor/assets/javascripts/RGraph.hprogress.js +1 -1
  35. data/vendor/assets/javascripts/RGraph.line.js +27 -5
  36. data/vendor/assets/javascripts/RGraph.meter.js +1 -1
  37. data/vendor/assets/javascripts/RGraph.modaldialog.js +1 -1
  38. data/vendor/assets/javascripts/RGraph.odo.js +1 -1
  39. data/vendor/assets/javascripts/RGraph.pie.js +1 -1
  40. data/vendor/assets/javascripts/RGraph.radar.js +1 -1
  41. data/vendor/assets/javascripts/RGraph.rose.js +1 -1
  42. data/vendor/assets/javascripts/RGraph.rscatter.js +1 -1
  43. data/vendor/assets/javascripts/RGraph.scatter.js +161 -34
  44. data/vendor/assets/javascripts/RGraph.semicircularprogress.js +1 -1
  45. data/vendor/assets/javascripts/RGraph.svg.bar.js +772 -103
  46. data/vendor/assets/javascripts/RGraph.svg.common.ajax.js +1 -1
  47. data/vendor/assets/javascripts/RGraph.svg.common.core.js +806 -231
  48. data/vendor/assets/javascripts/RGraph.svg.common.csv.js +1 -1
  49. data/vendor/assets/javascripts/RGraph.svg.common.fx.js +24 -24
  50. data/vendor/assets/javascripts/RGraph.svg.common.key.js +206 -0
  51. data/vendor/assets/javascripts/RGraph.svg.common.sheets.js +1 -1
  52. data/vendor/assets/javascripts/RGraph.svg.common.tooltips.js +63 -22
  53. data/vendor/assets/javascripts/RGraph.svg.hbar.js +351 -91
  54. data/vendor/assets/javascripts/RGraph.svg.line.js +159 -64
  55. data/vendor/assets/javascripts/RGraph.svg.pie.js +402 -51
  56. data/vendor/assets/javascripts/RGraph.svg.radar.js +320 -143
  57. data/vendor/assets/javascripts/RGraph.svg.rose.js +1818 -0
  58. data/vendor/assets/javascripts/RGraph.svg.scatter.js +1262 -0
  59. data/vendor/assets/javascripts/RGraph.svg.semicircularprogress.js +106 -57
  60. data/vendor/assets/javascripts/RGraph.svg.waterfall.js +1253 -0
  61. data/vendor/assets/javascripts/RGraph.thermometer.js +7 -6
  62. data/vendor/assets/javascripts/RGraph.vprogress.js +1 -1
  63. data/vendor/assets/javascripts/RGraph.waterfall.js +1 -1
  64. data/vendor/assets/javascripts/financial-data.js +1067 -0
  65. metadata +8 -5
  66. data/vendor/assets/javascripts/RGraph.cornergauge.js +0 -71
  67. data/vendor/assets/javascripts/RGraph.thermometer.old.js +0 -68
@@ -1,4 +1,4 @@
1
- // version: 2017-01-02
1
+ // version: 2017-05-08
2
2
  /**
3
3
  * o--------------------------------------------------------------------------------o
4
4
  * | This file is part of the RGraph package - you can learn more at: |
@@ -1,5 +1,5 @@
1
- // version: 2017-01-02
2
- /**
1
+ // version: 2017-05-08
2
+ /**
3
3
  * o--------------------------------------------------------------------------------o
4
4
  * | This file is part of the RGraph package - you can learn more at: |
5
5
  * | |
@@ -26,6 +26,55 @@
26
26
 
27
27
  RG.SVG.Bar = function (conf)
28
28
  {
29
+ //
30
+ // A setter that the constructor uses (at the end)
31
+ // to set all of the properties
32
+ //
33
+ // @param string name The name of the property to set
34
+ // @param string value The value to set the property to
35
+ //
36
+ this.set = function (name, value)
37
+ {
38
+ if (arguments.length === 1 && typeof name === 'object') {
39
+ for (i in arguments[0]) {
40
+ if (typeof i === 'string') {
41
+
42
+ var ret = RG.SVG.commonSetter({
43
+ object: this,
44
+ name: i,
45
+ value: arguments[0][i]
46
+ });
47
+
48
+ name = ret.name;
49
+ value = ret.value;
50
+
51
+ this.set(name, value);
52
+ }
53
+ }
54
+ } else {
55
+
56
+ var ret = RG.SVG.commonSetter({
57
+ object: this,
58
+ name: name,
59
+ value: value
60
+ });
61
+
62
+ name = ret.name;
63
+ value = ret.value;
64
+
65
+ this.properties[name] = value;
66
+ }
67
+
68
+ return this;
69
+ };
70
+
71
+
72
+
73
+
74
+
75
+
76
+
77
+
29
78
  this.id = conf.id;
30
79
  this.uid = RG.SVG.createUID();
31
80
  this.container = document.getElementById(this.id);
@@ -37,7 +86,6 @@
37
86
  this.type = 'bar';
38
87
  this.coords = [];
39
88
  this.stackedBackfaces = [];
40
- this.colorsParsed = false;
41
89
  this.originalColors = {};
42
90
  this.gradientCounter = 1;
43
91
 
@@ -52,7 +100,20 @@
52
100
  gutterRight: 35,
53
101
  gutterTop: 35,
54
102
  gutterBottom: 35,
55
-
103
+
104
+ variant: null,
105
+ variant3dOffsetx: 10,
106
+ variant3dOffsety: 5,
107
+
108
+ backgroundColor: null,
109
+ backgroundImage: null,
110
+ backgroundImageAspect: 'none',
111
+ backgroundImageStretch: true,
112
+ backgroundImageOpacity: null,
113
+ backgroundImageX: null,
114
+ backgroundImageY: null,
115
+ backgroundImageW: null,
116
+ backgroundImageH: null,
56
117
  backgroundGrid: true,
57
118
  backgroundGridColor: '#ddd',
58
119
  backgroundGridLinewidth: 1,
@@ -97,7 +158,7 @@
97
158
 
98
159
  xaxis: true,
99
160
  xaxisTickmarks: true,
100
- xaxisTickmarksLength: 3,
161
+ xaxisTickmarksLength: 5,
101
162
  xaxisLabels: null,
102
163
  xaxisLabelsPosition: 'section',
103
164
  xaxisLabelsPositionEdgeTickmarksCount: null,
@@ -123,6 +184,7 @@
123
184
  labelsAboveOffsety: 0,
124
185
  labelsAboveHalign: 'center',
125
186
  labelsAboveValign: 'bottom',
187
+ labelsAboveSpecific: null,
126
188
 
127
189
  textColor: 'black',
128
190
  textFont: 'sans-serif',
@@ -148,7 +210,7 @@
148
210
  titleX: null,
149
211
  titleY: null,
150
212
  titleHalign: 'center',
151
- titleValign: 'bottom',
213
+ titleValign: null,
152
214
  titleColor: 'black',
153
215
  titleFont: null,
154
216
  titleBold: false,
@@ -159,7 +221,7 @@
159
221
  titleSubtitleX: null,
160
222
  titleSubtitleY: null,
161
223
  titleSubtitleHalign: 'center',
162
- titleSubtitleValign: 'top',
224
+ titleSubtitleValign: null,
163
225
  titleSubtitleColor: '#aaa',
164
226
  titleSubtitleFont: null,
165
227
  titleSubtitleBold: false,
@@ -170,14 +232,25 @@
170
232
  shadowOffsety: 2,
171
233
  shadowBlur: 2,
172
234
  shadowOpacity: 0.25,
235
+
236
+ key: null,
237
+ keyColors: null,
238
+ keyOffsetx: 0,
239
+ keyOffsety: 0,
240
+ keyTextOffsetx: 0,
241
+ keyTextOffsety: -1,
242
+ keyTextSize: null,
243
+ keyTextBold: null,
244
+ keyTextItalic: null,
245
+ keyTextFont: null,
173
246
 
174
247
  attribution: true,
175
248
  attributionX: null,
176
249
  attributionY: null,
177
- attributionHref: 'http://www.rgraph.net/svg/index.html',
250
+ attributionHref: null,// Default is set in RGraph.svg.common.core.js
178
251
  attributionHalign: 'right',
179
252
  attributionValign: 'bottom',
180
- attributionSize: 8,
253
+ attributionSize: 7,
181
254
  attributionColor: 'gray',
182
255
  attributionFont: 'sans-serif',
183
256
  attributionItalic: false,
@@ -204,32 +277,6 @@
204
277
 
205
278
 
206
279
 
207
- //
208
- // A setter that the constructor uses (at the end)
209
- // to set all of the properties
210
- //
211
- // @param string name The name of the property to set
212
- // @param string value The value to set the property to
213
- //
214
- this.set = function (name, value)
215
- {
216
- if (arguments.length === 1 && typeof name === 'object') {
217
- for (i in arguments[0]) {
218
- if (typeof i === 'string') {
219
- this.set(i, arguments[0][i]);
220
- }
221
- }
222
- } else {
223
- this.properties[name] = value;
224
- }
225
-
226
- return this;
227
- };
228
-
229
-
230
-
231
-
232
-
233
280
 
234
281
 
235
282
 
@@ -243,12 +290,30 @@
243
290
 
244
291
 
245
292
 
293
+ // Zero these if the 3D effect is not wanted
294
+ if (prop.variant !== '3d') {
295
+ prop.variant3dOffsetx = 0;
296
+ prop.variant3dOffsety = 0;
297
+
298
+ } else {
299
+
300
+ // Set the skew transform on the all group if necessary
301
+ this.svg.all.setAttribute('transform', 'skewY(5)');
302
+ }
303
+
304
+
246
305
 
247
306
  // Create the defs tag if necessary
248
307
  RG.SVG.createDefs(this);
249
308
 
309
+
310
+
311
+
312
+
250
313
 
251
314
 
315
+ // Reset the coords array
316
+ this.coords = [];
252
317
 
253
318
 
254
319
  this.graphWidth = this.width - prop.gutterLeft - prop.gutterRight;
@@ -259,12 +324,10 @@
259
324
  /**
260
325
  * Parse the colors. This allows for simple gradient syntax
261
326
  */
262
- if (!this.colorsParsed) {
263
- this.parseColors();
264
-
265
- // Don't want to do this again
266
- this.colorsParsed = true;
267
- }
327
+
328
+ // Parse the colors for gradients
329
+ RG.SVG.resetColorsToOriginalValues({object:this});
330
+ this.parseColors();
268
331
 
269
332
 
270
333
 
@@ -345,10 +408,94 @@
345
408
 
346
409
 
347
410
 
348
-
349
411
  // Draw the background first
350
412
  RG.SVG.drawBackground(this);
351
413
 
414
+
415
+
416
+ // Draw the threeD axes here so everything else is drawn on top of
417
+ // it, but after the scale generation
418
+ if (prop.variant === '3d') {
419
+
420
+
421
+
422
+
423
+ // Draw the 3D Y axis
424
+ RG.SVG.create({
425
+ svg: this.svg,
426
+ parent: this.svg.all,
427
+ type: 'path',
428
+ attr: {
429
+ d: 'M {1} {2} L {3} {4} L {5} {6} L {7} {8}'.format(
430
+ prop.gutterLeft,
431
+ prop.gutterTop,
432
+
433
+ prop.gutterLeft + prop.variant3dOffsetx,
434
+ prop.gutterTop - prop.variant3dOffsety,
435
+
436
+ prop.gutterLeft + prop.variant3dOffsetx,
437
+ this.height - prop.gutterBottom - prop.variant3dOffsety,
438
+
439
+ prop.gutterLeft,
440
+ this.height - prop.gutterBottom,
441
+
442
+ prop.gutterLeft,
443
+ prop.gutterTop
444
+ ),
445
+ fill: '#ddd',
446
+ stroke: '#ccc'
447
+ }
448
+ });
449
+
450
+
451
+
452
+
453
+ // Add the group that the negative bars are added to. This makes them
454
+ // appear below the axes
455
+ this.threed_xaxis_group = RG.SVG.create({
456
+ svg: this.svg,
457
+ type: 'g',
458
+ parent: this.svg.all,
459
+ attr: {
460
+ className: 'rgraph_3d_bar_xaxis_negative'
461
+ }
462
+ });
463
+
464
+
465
+
466
+ // Draw the 3D X axis
467
+ RG.SVG.create({
468
+ svg: this.svg,
469
+ parent: this.svg.all,
470
+ type: 'path',
471
+ attr: {
472
+ d: 'M {1} {2} L {3} {4} L {5} {6} L {7} {8}'.format(
473
+ prop.gutterLeft,
474
+ this.getYCoord(0),
475
+
476
+ prop.gutterLeft + prop.variant3dOffsetx,
477
+ this.getYCoord(0) - prop.variant3dOffsety,
478
+
479
+ this.width - prop.gutterRight + prop.variant3dOffsetx,
480
+ this.getYCoord(0) - prop.variant3dOffsety,
481
+
482
+ this.width - prop.gutterRight,
483
+ this.getYCoord(0),
484
+
485
+ prop.gutterLeft,
486
+ this.getYCoord(0)
487
+ ),
488
+ fill: '#ddd',
489
+ stroke: '#ccc'
490
+ }
491
+ });
492
+ }
493
+
494
+
495
+
496
+
497
+
498
+
352
499
  // Draw the bars
353
500
  this.drawBars();
354
501
 
@@ -365,6 +512,17 @@
365
512
 
366
513
 
367
514
 
515
+ // Draw the key
516
+ if (typeof prop.key !== null && RG.SVG.drawKey) {
517
+ RG.SVG.drawKey(this);
518
+ } else if (!RGraph.SVG.isNull(prop.key)) {
519
+ alert('The drawKey() function does not exist - have you forgotten to include the key library?');
520
+ }
521
+
522
+
523
+
524
+
525
+
368
526
  // Add the attribution link. If you're adding this elsewhere on your page/site
369
527
  // and you don't want it displayed then there are options available to not
370
528
  // show it.
@@ -375,12 +533,12 @@
375
533
 
376
534
  // Add the event listener that clears the highlight rect if
377
535
  // there is any. Must be MOUSEDOWN (ie before the click event)
378
- var obj = this;
379
- document.body.addEventListener('mousedown', function (e)
380
- {
381
- RG.SVG.removeHighlight(obj);
382
-
383
- }, false);
536
+ //var obj = this;
537
+ //document.body.addEventListener('mousedown', function (e)
538
+ //{
539
+ // //RG.SVG.removeHighlight(obj);
540
+ //
541
+ //}, false);
384
542
 
385
543
 
386
544
 
@@ -427,22 +585,42 @@
427
585
  if (typeof this.data[i] === 'number') {
428
586
 
429
587
  var outerSegment = this.graphWidth / this.data.length,
430
- height = ma.abs((this.data[i] / (this.max - this.min)) * this.graphHeight),
588
+ height = (ma.abs(this.data[i]) - ma.abs(this.scale.min)) / (ma.abs(this.scale.max) - ma.abs(this.scale.min)) * this.graphHeight,
431
589
  width = (this.graphWidth / this.data.length) - prop.hmargin - prop.hmargin,
432
- x = prop.gutterLeft + prop.hmargin + (outerSegment * i),
433
- y = this.getYCoord(0);
590
+ x = prop.gutterLeft + prop.hmargin + (outerSegment * i);
591
+
592
+ // Work out the height and the Y coord of the Bar
593
+ if (this.scale.min >= 0 && this.scale.max > 0) {
594
+ y = this.getYCoord(this.scale.min) - height;
595
+
596
+ } else if (this.scale.min < 0 && this.scale.max > 0) {
597
+ height = (ma.abs(this.data[i]) / (this.scale.max - this.scale.min)) * this.graphHeight;
598
+ y = this.getYCoord(0) - height;
599
+
600
+ if (this.data[i] < 0) {
601
+ y = this.getYCoord(0);
602
+ }
603
+ } else if (this.scale.min < 0 && this.scale.max < 0) {
604
+ height = (ma.abs(this.data[i]) - ma.abs(this.scale.max)) / (ma.abs(this.scale.min) - ma.abs(this.scale.max)) * this.graphHeight;
605
+ y = prop.gutterTop;
606
+ }
434
607
 
435
608
  var rect = RG.SVG.create({
436
609
  svg: this.svg,
437
610
  type: 'rect',
611
+ parent: prop.variant === '3d' && this.data[i] < 0 ? this.threed_xaxis_group : this.svg.all,
438
612
  attr: {
439
613
  stroke: prop.strokestyle,
440
614
  fill: prop.colorsSequential ? (prop.colors[sequentialIndex] ? prop.colors[sequentialIndex] : prop.colors[prop.colors.length - 1]) : prop.colors[0],
441
615
  x: x,
442
- y: y - (this.data[i] > 0 ? height : 0),
443
- width: width,
616
+ y: y,
617
+ width: width < 0 ? 0 : width,
444
618
  height: height,
445
619
  'stroke-width': prop.linewidth,
620
+ 'data-original-x': x,
621
+ 'data-original-y': y,
622
+ 'data-original-width': width,
623
+ 'data-original-height': height,
446
624
  'data-tooltip': (!RG.SVG.isNull(prop.tooltips) && prop.tooltips.length) ? prop.tooltips[i] : '',
447
625
  'data-index': i,
448
626
  'data-sequential-index': sequentialIndex,
@@ -460,6 +638,14 @@
460
638
  });
461
639
 
462
640
 
641
+ //
642
+ // Add the 3D faces if required
643
+ //
644
+ if (prop.variant === '3d') {
645
+ this.drawTop3dFace({rect: rect, value: this.data[i]});
646
+ this.drawSide3dFace({rect: rect, value: this.data[i]});
647
+ }
648
+
463
649
 
464
650
 
465
651
 
@@ -475,10 +661,9 @@
475
661
  //
476
662
  (function (idx, seq)
477
663
  {
478
- rect['on' + prop.tooltipsEvent] = function (e)
664
+ rect.addEventListener(prop.tooltipsEvent.replace(/^on/, ''), function (e)
479
665
  {
480
- // Hide any existing tooltip
481
- RG.SVG.hideTooltip();
666
+ obj.removeHighlight();
482
667
 
483
668
  // Show the tooltip
484
669
  RG.SVG.tooltip({
@@ -492,12 +677,12 @@
492
677
 
493
678
  // Highlight the rect that has been clicked on
494
679
  obj.highlight(e.target);
495
- };
496
-
497
- rect.onmousemove = function (e)
680
+ }, false);
681
+
682
+ rect.addEventListener('mousemove', function (e)
498
683
  {
499
684
  e.target.style.cursor = 'pointer'
500
- };
685
+ }, false);
501
686
  })(i, sequentialIndex);
502
687
  }
503
688
 
@@ -516,23 +701,73 @@
516
701
  // Loop through the group
517
702
  for (var j=0; j<this.data[i].length; ++j,++sequentialIndex) {
518
703
 
519
- var height = ma.abs((this.data[i][j] / (this.max - this.min)) * this.graphHeight),
520
- width = ( (innerSegment - ((this.data[i].length - 1) * prop.hmarginGrouped)) / this.data[i].length),
704
+ var width = ( (innerSegment - ((this.data[i].length - 1) * prop.hmarginGrouped)) / this.data[i].length),
521
705
  x = (outerSegment * i) + prop.hmargin + prop.gutterLeft + (j * width) + ((j - 1) * prop.hmarginGrouped);
522
706
 
523
707
  x = prop.gutterLeft + (outerSegment * i) + (width * j) + prop.hmargin + (j * prop.hmarginGrouped);
524
708
 
709
+
710
+
711
+
712
+
713
+
714
+
715
+
716
+
717
+
718
+
719
+
720
+
721
+
722
+
723
+ // Calculate the height
724
+ // eg 0 -> 10
725
+ if (this.scale.min === 0 && this.scale.max > this.scale.min) {
726
+ var height = ((this.data[i][j] - this.scale.min) / (this.scale.max - this.scale.min)) * this.graphHeight,
727
+ y = this.getYCoord(0) - height;
728
+
729
+ // eg -5 -> -15
730
+ } else if (this.scale.max <= 0 && this.scale.min < this.scale.max) {
731
+ var height = ((this.data[i][j] - this.scale.max) / (this.scale.max - this.scale.min)) * this.graphHeight,
732
+ y = this.getYCoord(this.scale.max);
733
+
734
+ height = ma.abs(height);
735
+
736
+ // eg 10 -> -10
737
+ } else if (this.scale.max > 0 && this.scale.min < 0) {
738
+
739
+ var height = (ma.abs(this.data[i][j]) / (this.scale.max - this.scale.min)) * this.graphHeight,
740
+ y = this.data[i][j] < 0 ? this.getYCoord(0) : this.getYCoord(this.data[i][j]);
741
+
742
+ // eg 5 -> 10
743
+ } else if (this.scale.min > 0 && this.scale.max > this.scale.min) {
744
+ var height = (ma.abs(this.data[i][j] - this.scale.min) / (this.scale.max - this.scale.min)) * this.graphHeight,
745
+ y = this.getYCoord(this.scale.min) - height;
746
+ }
747
+
748
+
749
+
750
+
751
+
752
+
753
+
754
+ // Add the rect tag
525
755
  var rect = RG.SVG.create({
526
756
  svg: this.svg,
757
+ parent: prop.variant === '3d' && this.data[i][j] < 0 ? this.threed_xaxis_group : this.svg.all,
527
758
  type: 'rect',
528
759
  attr: {
529
760
  stroke: prop['strokestyle'],
530
761
  fill: (prop.colorsSequential && prop.colors[sequentialIndex]) ? prop.colors[sequentialIndex] : prop.colors[j],
531
762
  x: x,
532
- y: y - (this.data[i][j] > 0 ? height : 0),
763
+ y: y,
533
764
  width: width,
534
765
  height: height,
535
766
  'stroke-width': prop.linewidth,
767
+ 'data-original-x': x,
768
+ 'data-original-y': y,
769
+ 'data-original-width': width,
770
+ 'data-original-height': height,
536
771
  'data-index': i,
537
772
  'data-sequential-index': sequentialIndex,
538
773
  'data-tooltip': (!RG.SVG.isNull(prop.tooltips) && prop.tooltips.length) ? prop.tooltips[sequentialIndex] : '',
@@ -551,6 +786,21 @@
551
786
 
552
787
 
553
788
 
789
+
790
+ //
791
+ // Add the 3D faces if required
792
+ //
793
+ if (prop.variant === '3d') {
794
+ this.drawTop3dFace({rect: rect, value: this.data[i][j]});
795
+ this.drawSide3dFace({rect: rect, value: this.data[i][j]});
796
+ }
797
+
798
+
799
+
800
+
801
+
802
+
803
+
554
804
  // Add the tooltip data- attribute
555
805
  if (!RG.SVG.isNull(prop.tooltips) && prop.tooltips[sequentialIndex]) {
556
806
 
@@ -562,9 +812,11 @@
562
812
  //
563
813
  (function (idx, seq)
564
814
  {
815
+ obj.removeHighlight();
816
+
565
817
  var indexes = RG.SVG.sequentialIndexToGrouped(seq, obj.data);
566
818
 
567
- rect['on' + prop.tooltipsEvent] = function (e)
819
+ rect.addEventListener(prop.tooltipsEvent.replace(/^on/, ''), function (e)
568
820
  {
569
821
  // Show the tooltip
570
822
  RG.SVG.tooltip({
@@ -579,20 +831,26 @@
579
831
  // Highlight the rect that has been clicked on
580
832
  obj.highlight(e.target);
581
833
 
582
- };
834
+ }, false);
583
835
 
584
- rect.onmousemove = function (e)
836
+ rect.addEventListener('mousemove', function (e)
585
837
  {
586
838
  e.target.style.cursor = 'pointer'
587
- };
839
+ }, false);
588
840
  })(i, sequentialIndex);
589
841
  }
590
842
  }
591
843
 
592
844
  --sequentialIndex;
593
-
594
845
 
595
-
846
+
847
+
848
+
849
+
850
+
851
+
852
+
853
+
596
854
 
597
855
  //
598
856
  // Stacked charts
@@ -610,7 +868,7 @@
610
868
  // Loop through the stack
611
869
  for (var j=0; j<this.data[i].length; ++j,++sequentialIndex) {
612
870
 
613
- var height = ma.abs((this.data[i][j] / (this.max - this.min)) * this.graphHeight),
871
+ var height = ma.round((this.data[i][j] / (this.max - this.min)) * this.graphHeight),
614
872
  width = section - (2 * prop.hmargin),
615
873
  x = prop.gutterLeft + (i * section) + prop.hmargin,
616
874
  y = y - height;
@@ -623,6 +881,7 @@
623
881
 
624
882
  var rect = RG.SVG.create({
625
883
  svg: this.svg,
884
+ parent: this.svg.all,
626
885
  type: 'rect',
627
886
  attr: {
628
887
  fill: 'white',
@@ -644,6 +903,7 @@
644
903
  // Create the visible bar
645
904
  var rect = RG.SVG.create({
646
905
  svg: this.svg,
906
+ parent: this.svg.all,
647
907
  type: 'rect',
648
908
  attr: {
649
909
  stroke: prop['strokestyle'],
@@ -653,6 +913,10 @@
653
913
  width: width,
654
914
  height: height,
655
915
  'stroke-width': prop.linewidth,
916
+ 'data-original-x': x,
917
+ 'data-original-y': y,
918
+ 'data-original-width': width,
919
+ 'data-original-height': height,
656
920
  'data-index': i,
657
921
  'data-sequential-index': sequentialIndex,
658
922
  'data-tooltip': (!RG.SVG.isNull(prop.tooltips) && prop.tooltips.length) ? prop.tooltips[sequentialIndex] : '',
@@ -671,6 +935,25 @@
671
935
 
672
936
 
673
937
 
938
+
939
+
940
+
941
+
942
+ //
943
+ // Add the 3D faces if required
944
+ //
945
+ if (prop.variant === '3d') {
946
+ this.drawTop3dFace({rect: rect, value: this.data[i][j]});
947
+ this.drawSide3dFace({rect: rect, value: this.data[i][j]});
948
+ }
949
+
950
+
951
+
952
+
953
+
954
+
955
+
956
+
674
957
  // Add the tooltip data- attribute
675
958
  if (!RG.SVG.isNull(prop.tooltips) && prop.tooltips[sequentialIndex]) {
676
959
 
@@ -682,8 +965,9 @@
682
965
  //
683
966
  (function (idx, seq)
684
967
  {
685
- rect['on' + prop.tooltipsEvent] = function (e)
968
+ rect.addEventListener(prop.tooltipsEvent.replace(/^on/, ''), function (e)
686
969
  {
970
+ obj.removeHighlight();
687
971
 
688
972
  var indexes = RG.SVG.sequentialIndexToGrouped(seq, obj.data);
689
973
 
@@ -699,12 +983,12 @@
699
983
 
700
984
  // Highlight the rect that has been clicked on
701
985
  obj.highlight(e.target);
702
- };
986
+ }, false);
703
987
 
704
- rect.onmousemove = function (e)
988
+ rect.addEventListener('mousemove', function (e)
705
989
  {
706
- e.target.style.cursor = 'pointer'
707
- };
990
+ e.target.style.cursor = 'pointer';
991
+ }, false);
708
992
  })(i, sequentialIndex);
709
993
  }
710
994
  }
@@ -729,23 +1013,21 @@
729
1013
  */
730
1014
  this.getYCoord = function (value)
731
1015
  {
732
- var prop = this.properties;
733
-
734
1016
  if (value > this.scale.max) {
735
1017
  return null;
736
1018
  }
737
1019
 
738
1020
  var y, xaxispos = prop.xaxispos;
739
1021
 
740
- if (value < this.scale.min) {
741
- return null;
742
- }
1022
+ if (value < this.scale.min) {
1023
+ return null;
1024
+ }
743
1025
 
744
- y = ((value - this.scale.min) / (this.scale.max - this.scale.min));
745
- y *= (this.height - prop.gutterTop - prop.gutterBottom);
746
-
747
- y = this.height - prop.gutterBottom - y;
748
- //}
1026
+ y = ((value - this.scale.min) / (this.scale.max - this.scale.min));
1027
+
1028
+ y *= (this.height - prop.gutterTop - prop.gutterBottom);
1029
+
1030
+ y = this.height - prop.gutterBottom - y;
749
1031
 
750
1032
  return y;
751
1033
  };
@@ -771,6 +1053,7 @@
771
1053
 
772
1054
  var highlight = RG.SVG.create({
773
1055
  svg: this.svg,
1056
+ parent: this.svg.all,
774
1057
  type: 'rect',
775
1058
  attr: {
776
1059
  stroke: prop.highlightStroke,
@@ -785,13 +1068,15 @@
785
1068
 
786
1069
 
787
1070
  if (prop.tooltipsEvent === 'mousemove') {
788
- highlight.addEventListener('mouseout', function (e)
789
- {
790
- highlight.parentNode.removeChild(highlight);
791
- RG.SVG.hideTooltip();
792
-
793
- RG.SVG.REG.set('highlight', null);
794
- }, false);
1071
+
1072
+ //var obj = this;
1073
+
1074
+ //highlight.addEventListener('mouseout', function (e)
1075
+ //{
1076
+ // obj.removeHighlight();
1077
+ // RG.SVG.hideTooltip();
1078
+ // RG.SVG.REG.set('highlight', null);
1079
+ //}, false);
795
1080
  }
796
1081
 
797
1082
 
@@ -818,11 +1103,12 @@
818
1103
  this.originalColors = {
819
1104
  colors: RG.SVG.arrayClone(prop.colors),
820
1105
  backgroundGridColor: RG.SVG.arrayClone(prop.backgroundGridColor),
821
- highlightFill: RG.SVG.arrayClone(prop.highlightFill)
1106
+ highlightFill: RG.SVG.arrayClone(prop.highlightFill),
1107
+ backgroundColor: RG.SVG.arrayClone(prop.backgroundColor)
822
1108
  }
823
1109
  }
824
1110
 
825
-
1111
+
826
1112
  // colors
827
1113
  var colors = prop.colors;
828
1114
 
@@ -837,6 +1123,7 @@
837
1123
 
838
1124
  prop.backgroundGridColor = RG.SVG.parseColorLinear({object: this, color: prop.backgroundGridColor});
839
1125
  prop.highlightFill = RG.SVG.parseColorLinear({object: this, color: prop.highlightFill});
1126
+ prop.backgroundColor = RG.SVG.parseColorLinear({object: this, color: prop.backgroundColor});
840
1127
  };
841
1128
 
842
1129
 
@@ -853,11 +1140,41 @@
853
1140
  {
854
1141
  // Go through the above labels
855
1142
  if (prop.labelsAbove) {
856
- for (var i=0; i<this.coords.length; ++i) {
1143
+
1144
+ var data_seq = RG.SVG.arrayLinearize(this.data),
1145
+ seq = 0,
1146
+ stacked_total = 0;;
1147
+
1148
+ for (var i=0; i<this.coords.length; ++i,seq++) {
1149
+
1150
+ var num = typeof this.data[i] === 'number' ? this.data[i] : data_seq[seq] ;
1151
+
1152
+
1153
+
1154
+
1155
+
1156
+ // If this is a stacked chart then only dothe label
1157
+ // if it's the top segment
1158
+ if (prop.grouping === 'stacked') {
1159
+
1160
+ var indexes = RG.SVG.sequentialIndexToGrouped(i, this.data);
1161
+ var group = indexes[0];
1162
+ var datapiece = indexes[1];
1163
+
1164
+ if (datapiece !== (this.data[group].length - 1) ) {
1165
+ continue;
1166
+ } else {
1167
+ num = RG.SVG.arraySum(this.data[group]);
1168
+ }
1169
+ }
1170
+
1171
+
1172
+
1173
+
857
1174
 
858
1175
  var str = RG.SVG.numberFormat({
859
1176
  object: this,
860
- num: this.data[i].toFixed(prop.labelsAboveDecimals ),
1177
+ num: num.toFixed(prop.labelsAboveDecimals),
861
1178
  prepend: typeof prop.labelsAboveUnitsPre === 'string' ? prop.labelsAboveUnitsPre : null,
862
1179
  append: typeof prop.labelsAboveUnitsPost === 'string' ? prop.labelsAboveUnitsPost : null,
863
1180
  point: typeof prop.labelsAbovePoint === 'string' ? prop.labelsAbovePoint : null,
@@ -865,13 +1182,31 @@
865
1182
  formatter: typeof prop.labelsAboveFormatter === 'function' ? prop.labelsAboveFormatter : null
866
1183
  });
867
1184
 
1185
+ // Facilitate labelsAboveSpecific
1186
+ if (prop.labelsAboveSpecific && prop.labelsAboveSpecific.length && (typeof prop.labelsAboveSpecific[seq] === 'string' || typeof prop.labelsAboveSpecific[seq] === 'number') ) {
1187
+ str = prop.labelsAboveSpecific[seq];
1188
+ } else if ( prop.labelsAboveSpecific && prop.labelsAboveSpecific.length && typeof prop.labelsAboveSpecific[seq] !== 'string' && typeof prop.labelsAboveSpecific[seq] !== 'number') {
1189
+ continue;
1190
+ }
1191
+
1192
+ var x = parseFloat(this.coords[i].object.getAttribute('x')) + parseFloat(this.coords[i].object.getAttribute('width') / 2) + prop.labelsAboveOffsetx;
1193
+
1194
+ if (data_seq[i] >= 0) {
1195
+ var y = parseFloat(this.coords[i].object.getAttribute('y')) - 7 + prop.labelsAboveOffsety;
1196
+ var valign = prop.labelsAboveValign;
1197
+ } else {
1198
+ var y = parseFloat(this.coords[i].object.getAttribute('y')) + parseFloat(this.coords[i].object.getAttribute('height')) + 7 - prop.labelsAboveOffsety;
1199
+ var valign = prop.labelsAboveValign === 'top' ? 'bottom' : 'top';
1200
+ }
1201
+
868
1202
  RG.SVG.text({
869
1203
  object: this,
1204
+ parent: this.svg.all,
870
1205
  text: str,
871
- x: parseFloat(this.coords[i].object.getAttribute('x')) + parseFloat(this.coords[i].object.getAttribute('width') / 2) + prop.labelsAboveOffsetx,
872
- y: parseFloat(this.coords[i].object.getAttribute('y')) - 7 + prop.labelsAboveOffsety,
1206
+ x: x,
1207
+ y: y,
873
1208
  halign: prop.labelsAboveHalign,
874
- valign: prop.labelsAboveValign,
1209
+ valign: valign,
875
1210
  font: prop.labelsAboveFont || prop.textFont,
876
1211
  size: prop.labelsAboveSize || prop.textSize,
877
1212
  bold: prop.labelsAboveBold || prop.textBold,
@@ -936,6 +1271,139 @@
936
1271
 
937
1272
 
938
1273
 
1274
+ //
1275
+ // Remove highlight from the chart (tooltips)
1276
+ //
1277
+ this.removeHighlight = function ()
1278
+ {
1279
+ var highlight = RG.SVG.REG.get('highlight');
1280
+ if (highlight && highlight.parentNode) {
1281
+ highlight.parentNode.removeChild(highlight);
1282
+ }
1283
+
1284
+ RG.SVG.REG.set('highlight', null);
1285
+ };
1286
+
1287
+
1288
+
1289
+
1290
+
1291
+
1292
+
1293
+
1294
+ //
1295
+ // Draws the top of 3D bars
1296
+ //
1297
+ this.drawTop3dFace = function (opt)
1298
+ {
1299
+ var rect = opt.rect,
1300
+ arr = [parseInt(rect.getAttribute('fill')), 'rgba(255,255,255,0.7)'],
1301
+ x = parseInt(rect.getAttribute('x')),
1302
+ y = parseInt(rect.getAttribute('y')),
1303
+ w = parseInt(rect.getAttribute('width')),
1304
+ h = parseInt(rect.getAttribute('height'));
1305
+
1306
+ rect.rgraph_3d_top_face = [];
1307
+
1308
+
1309
+ for (var i=0; i<2; ++i) {
1310
+
1311
+ var color = (i === 0 ? rect.getAttribute('fill') : 'rgba(255,255,255,0.7)');
1312
+
1313
+
1314
+ var face = RG.SVG.create({
1315
+ svg: this.svg,
1316
+ type: 'path',
1317
+ parent: prop.variant === '3d' && opt.value < 0 ? this.threed_xaxis_group : this.svg.all,
1318
+ attr: {
1319
+ stroke: prop.strokestyle,
1320
+ fill: color,
1321
+ 'stroke-width': prop.linewidth,
1322
+ d: 'M {1} {2} L {3} {4} L {5} {6} L {7} {8}'.format(
1323
+ x,
1324
+ y,
1325
+
1326
+ x + prop.variant3dOffsetx,
1327
+ y - prop.variant3dOffsety,
1328
+
1329
+ x + w + prop.variant3dOffsetx,
1330
+ y - prop.variant3dOffsety,
1331
+
1332
+ x + w,
1333
+ y
1334
+ )
1335
+ }
1336
+ });
1337
+
1338
+
1339
+
1340
+ // Store a reference to the rect on the front face of the bar
1341
+ rect.rgraph_3d_top_face[i] = face
1342
+ }
1343
+ };
1344
+
1345
+
1346
+
1347
+
1348
+
1349
+
1350
+
1351
+
1352
+ //
1353
+ // Draws the top of 3D bars
1354
+ //
1355
+ this.drawSide3dFace = function (opt)
1356
+ {
1357
+ var rect = opt.rect,
1358
+ arr = [parseInt(rect.getAttribute('fill')), 'rgba(0,0,0,0.3)'],
1359
+ x = parseInt(rect.getAttribute('x')),
1360
+ y = parseInt(rect.getAttribute('y')),
1361
+ w = parseInt(rect.getAttribute('width')),
1362
+ h = parseInt(rect.getAttribute('height'));
1363
+
1364
+ rect.rgraph_3d_side_face = [];
1365
+
1366
+ for (var i=0; i<2; ++i) {
1367
+
1368
+ var color = (i === 0 ? rect.getAttribute('fill') : 'rgba(0,0,0,0.3)');
1369
+
1370
+ var face = RG.SVG.create({
1371
+ svg: this.svg,
1372
+ type: 'path',
1373
+ parent: prop.variant === '3d' && opt.value < 0 ? this.threed_xaxis_group : this.svg.all,
1374
+ attr: {
1375
+ stroke: prop.strokestyle,
1376
+ fill: color,
1377
+ 'stroke-width': prop.linewidth,
1378
+ d: 'M {1} {2} L {3} {4} L {5} {6} L {7} {8}'.format(
1379
+ x + w,
1380
+ y,
1381
+
1382
+ x + w + prop.variant3dOffsetx,
1383
+ y - prop.variant3dOffsety,
1384
+
1385
+ x + w + prop.variant3dOffsetx,
1386
+ y + h - prop.variant3dOffsety,
1387
+
1388
+ x + w,
1389
+ y + h
1390
+ )
1391
+ }
1392
+ });
1393
+
1394
+
1395
+ // Store a reference to the rect on the front face of the bar
1396
+ rect.rgraph_3d_side_face[i] = face
1397
+ }
1398
+ };
1399
+
1400
+
1401
+
1402
+
1403
+
1404
+
1405
+
1406
+
939
1407
  //
940
1408
  // The Bar chart grow effect
941
1409
  //
@@ -966,8 +1434,8 @@
966
1434
  * RG.SVG.FX.getEasingMultiplier(frames, frame);
967
1435
 
968
1436
 
969
-
970
-
1437
+
1438
+
971
1439
  // TODO Go through the data and update the value according to
972
1440
  // the frame number
973
1441
  if (typeof data[i] === 'number') {
@@ -975,7 +1443,7 @@
975
1443
  height = ma.abs(obj.getYCoord(data[i]) - obj.getYCoord(0));
976
1444
  obj.data[i] = data[i] * multiplier;
977
1445
  height = multiplier * height;
978
-
1446
+
979
1447
  // Set the new height on the rect
980
1448
  obj.coords[seq].object.setAttribute(
981
1449
  'height',
@@ -988,6 +1456,37 @@
988
1456
  data[i] < 0 ? obj.getYCoord(0) : obj.getYCoord(0) - height
989
1457
  );
990
1458
 
1459
+
1460
+
1461
+ // This upadtes the size of the 3D sides to the bar
1462
+ if (prop.variant === '3d') {
1463
+
1464
+ // Remove the 3D sides to the bar
1465
+ if (obj.coords[i].object.rgraph_3d_side_face[0].parentNode) obj.coords[i].object.rgraph_3d_side_face[0].parentNode.removeChild(obj.coords[i].object.rgraph_3d_side_face[0]);
1466
+ if (obj.coords[i].object.rgraph_3d_side_face[1].parentNode) obj.coords[i].object.rgraph_3d_side_face[1].parentNode.removeChild(obj.coords[i].object.rgraph_3d_side_face[1]);
1467
+
1468
+ if (obj.coords[i].object.rgraph_3d_top_face[0].parentNode) obj.coords[i].object.rgraph_3d_top_face[0].parentNode.removeChild(obj.coords[i].object.rgraph_3d_top_face[0]);
1469
+ if (obj.coords[i].object.rgraph_3d_top_face[1].parentNode) obj.coords[i].object.rgraph_3d_top_face[1].parentNode.removeChild(obj.coords[i].object.rgraph_3d_top_face[1]);
1470
+
1471
+ // Add the 3D sides to the bar (again)
1472
+ obj.drawSide3dFace({rect: obj.coords[i].object});
1473
+
1474
+ // Draw the top side of the 3D bar
1475
+ if (prop.grouping === 'grouped') {
1476
+ obj.drawTop3dFace({rect: obj.coords[i].object });
1477
+ }
1478
+
1479
+ // Now remove and immediately re-add the front face of
1480
+ // the bar - this is so that the front face appears
1481
+ // above the other sides
1482
+ if (obj.coords[i].object.parentNode) {
1483
+ var parent = obj.coords[i].object.parentNode;
1484
+ var node = parent.removeChild(obj.coords[i].object);
1485
+ parent.appendChild(node);
1486
+ }
1487
+ }
1488
+
1489
+
991
1490
  } else if (typeof data[i] === 'object') {
992
1491
 
993
1492
  var accumulativeHeight = 0;
@@ -997,6 +1496,7 @@
997
1496
  height = ma.abs(obj.getYCoord(data[i][j]) - obj.getYCoord(0));
998
1497
  height = multiplier * height;
999
1498
  obj.data[i][j] = data[i][j] * multiplier;
1499
+ height = ma.round(height);
1000
1500
 
1001
1501
  obj.coords[seq].object.setAttribute(
1002
1502
  'height',
@@ -1007,8 +1507,40 @@
1007
1507
  'y',
1008
1508
  data[i][j] < 0 ? (obj.getYCoord(0) + accumulativeHeight) : (obj.getYCoord(0) - height - accumulativeHeight)
1009
1509
  );
1010
-
1510
+
1511
+
1512
+
1513
+
1514
+
1515
+ // This updates the size of the 3D sides to the bar
1516
+ if (prop.variant === '3d') {
1517
+
1518
+ // Remove the 3D sides to the bar
1519
+ if (obj.coords[seq].object.rgraph_3d_side_face[0].parentNode) obj.coords[seq].object.rgraph_3d_side_face[0].parentNode.removeChild(obj.coords[seq].object.rgraph_3d_side_face[0]);
1520
+ if (obj.coords[seq].object.rgraph_3d_side_face[1].parentNode) obj.coords[seq].object.rgraph_3d_side_face[1].parentNode.removeChild(obj.coords[seq].object.rgraph_3d_side_face[1]);
1521
+
1522
+ if (obj.coords[seq].object.rgraph_3d_top_face[0].parentNode) obj.coords[seq].object.rgraph_3d_top_face[0].parentNode.removeChild(obj.coords[seq].object.rgraph_3d_top_face[0]);
1523
+ if (obj.coords[seq].object.rgraph_3d_top_face[1].parentNode) obj.coords[seq].object.rgraph_3d_top_face[1].parentNode.removeChild(obj.coords[seq].object.rgraph_3d_top_face[1]);
1524
+
1525
+ // Add the 3D sides to the bar (again)
1526
+ obj.drawSide3dFace({rect: obj.coords[seq].object});
1527
+
1528
+ // Draw the top side of the 3D bar
1529
+ // TODO Need to only draw the top face when the bar is either
1530
+ // not stacked or is the last segment in the stack
1531
+ obj.drawTop3dFace({rect: obj.coords[seq].object});
1532
+
1533
+ // Now remove and immediately re-add the front face of
1534
+ // the bar - this is so that the front face appears
1535
+ // above the other sides
1536
+ if (obj.coords[seq].object.parentNode) {
1537
+ var parent = obj.coords[seq].object.parentNode;
1538
+ var node = parent.removeChild(obj.coords[seq].object);
1539
+ parent.appendChild(node);
1540
+ }
1541
+ }
1011
1542
  accumulativeHeight += (prop.grouping === 'stacked' ? height : 0);
1543
+
1012
1544
  }
1013
1545
 
1014
1546
  //
@@ -1051,6 +1583,143 @@
1051
1583
 
1052
1584
 
1053
1585
 
1586
+ /**
1587
+ * HBar chart Wave effect.
1588
+ *
1589
+ * @param object OPTIONAL An object map of options. You specify 'frames'
1590
+ * here to give the number of frames in the effect
1591
+ * and also callback to specify a callback function
1592
+ * thats called at the end of the effect
1593
+ */
1594
+ this.wave = function ()
1595
+ {
1596
+ // First draw the chart
1597
+ this.draw();
1598
+
1599
+
1600
+ var obj = this,
1601
+ opt = arguments[0] || {};
1602
+
1603
+ opt.frames = opt.frames || 60;
1604
+ opt.startFrames = [];
1605
+ opt.counters = [];
1606
+
1607
+ var framesperbar = opt.frames / 3,
1608
+ frame = -1,
1609
+ callback = opt.callback || function () {};
1610
+
1611
+ for (var i=0,len=this.coords.length; i<len; i+=1) {
1612
+ opt.startFrames[i] = ((opt.frames / 2) / (obj.coords.length - 1)) * i;
1613
+ opt.counters[i] = 0;
1614
+
1615
+ // Now zero the width of the bar (and remove the 3D faces)
1616
+ this.coords[i].object.setAttribute('height', 0);
1617
+
1618
+ if (this.coords[i].object.rgraph_3d_side_face) {
1619
+ this.svg.all.removeChild(this.coords[i].object.rgraph_3d_side_face[0]);
1620
+ this.svg.all.removeChild(this.coords[i].object.rgraph_3d_side_face[1]);
1621
+
1622
+ this.svg.all.removeChild(this.coords[i].object.rgraph_3d_top_face[0]);
1623
+ this.svg.all.removeChild(this.coords[i].object.rgraph_3d_top_face[1]);
1624
+ }
1625
+ }
1626
+
1627
+
1628
+ function iterator ()
1629
+ {
1630
+ ++frame;
1631
+
1632
+ for (var i=0,len=obj.coords.length; i<len; i+=1) {
1633
+ if (frame > opt.startFrames[i]) {
1634
+
1635
+ var originalHeight = obj.coords[i].object.getAttribute('data-original-height'),
1636
+ height,
1637
+ value = parseFloat(obj.coords[i].object.getAttribute('data-value'));
1638
+
1639
+ var height = ma.min(
1640
+ ((frame - opt.startFrames[i]) / framesperbar) * originalHeight,
1641
+ originalHeight
1642
+ );
1643
+ obj.coords[i].object.setAttribute(
1644
+ 'height',
1645
+ height < 0 ? 0 : height
1646
+ );
1647
+
1648
+ obj.coords[i].object.setAttribute(
1649
+ 'y',
1650
+ value >=0 ? obj.getYCoord(0) - height : obj.getYCoord(0)
1651
+ );
1652
+
1653
+
1654
+
1655
+ // This updates the size of the 3D sides to the bar
1656
+ if (prop.variant === '3d') {
1657
+
1658
+ // Remove the 3D sides to the bar
1659
+ if (obj.coords[i].object.rgraph_3d_side_face[0].parentNode) obj.coords[i].object.rgraph_3d_side_face[0].parentNode.removeChild(obj.coords[i].object.rgraph_3d_side_face[0]);
1660
+ if (obj.coords[i].object.rgraph_3d_side_face[1].parentNode) obj.coords[i].object.rgraph_3d_side_face[1].parentNode.removeChild(obj.coords[i].object.rgraph_3d_side_face[1]);
1661
+
1662
+ if (obj.coords[i].object.rgraph_3d_top_face[0].parentNode) obj.coords[i].object.rgraph_3d_top_face[0].parentNode.removeChild(obj.coords[i].object.rgraph_3d_top_face[0]);
1663
+ if (obj.coords[i].object.rgraph_3d_top_face[1].parentNode) obj.coords[i].object.rgraph_3d_top_face[1].parentNode.removeChild(obj.coords[i].object.rgraph_3d_top_face[1]);
1664
+
1665
+
1666
+
1667
+ // Now remove and immediately re-add the front face of
1668
+ // the bar - this is so that the front face appears
1669
+ // above the other sides
1670
+ if (obj.coords[i].object.parentNode) {
1671
+ var parent = obj.coords[i].object.parentNode;
1672
+ var node = parent.removeChild(obj.coords[i].object);
1673
+ parent.appendChild(node);
1674
+ }
1675
+ }
1676
+
1677
+
1678
+ if (prop.grouping === 'stacked') {
1679
+
1680
+ var seq = obj.coords[i].object.getAttribute('data-sequential-index');
1681
+ var indexes = RG.SVG.sequentialIndexToGrouped(seq, obj.data);
1682
+
1683
+ if (indexes[1] > 0) {
1684
+ obj.coords[i].object.setAttribute(
1685
+ 'y',
1686
+ parseInt(obj.coords[i - 1].object.getAttribute('y')) - height
1687
+ );
1688
+ }
1689
+ }
1690
+
1691
+ if (prop.variant === '3d') {
1692
+ // Add the 3D sides to the bar (again)
1693
+ obj.drawSide3dFace({rect: obj.coords[i].object});
1694
+
1695
+ // Draw the top side of the 3D bar
1696
+ if (prop.grouping === 'grouped' || (prop.grouping === 'stacked' && (indexes[1] + 1) === obj.data[indexes[0]].length) ) {
1697
+ obj.drawTop3dFace({rect: obj.coords[i].object });
1698
+ }
1699
+ }
1700
+ }
1701
+ }
1702
+
1703
+
1704
+ if (frame >= opt.frames) {
1705
+ callback(obj);
1706
+ } else {
1707
+ RG.SVG.FX.update(iterator);
1708
+ }
1709
+ }
1710
+
1711
+ iterator();
1712
+
1713
+ return this;
1714
+ };
1715
+
1716
+
1717
+
1718
+
1719
+
1720
+
1721
+
1722
+
1054
1723
  //
1055
1724
  // Set the options that the user has provided
1056
1725
  //