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: |
@@ -26,6 +26,55 @@
26
26
 
27
27
  RG.SVG.HBar = 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);
@@ -54,6 +103,15 @@
54
103
  gutterBottom: 35,
55
104
  gutterLeftAutosize: true,
56
105
 
106
+ backgroundColor: null,
107
+ backgroundImage: null,
108
+ backgroundImageAspect: 'none',
109
+ backgroundImageStretch: true,
110
+ backgroundImageOpacity: null,
111
+ backgroundImageX: null,
112
+ backgroundImageY: null,
113
+ backgroundImageW: null,
114
+ backgroundImageH: null,
57
115
  backgroundGrid: true,
58
116
  backgroundGridColor: '#ddd',
59
117
  backgroundGridLinewidth: 1,
@@ -73,10 +131,12 @@
73
131
 
74
132
  vmargin: 3,
75
133
  vmarginGrouped: 2,
134
+ vmarginTop: 0,
135
+ vmarginBottom: 0,
76
136
 
77
137
  xaxis: true,
78
138
  xaxisTickmarks: true,
79
- xaxisTickmarksLength: 4,
139
+ xaxisTickmarksLength: 5,
80
140
  xaxisColor: 'black',
81
141
  xaxisLabels: [],
82
142
  xaxisLabelsOffsetx: 0,
@@ -140,6 +200,7 @@
140
200
  labelsAboveOffsety: 0,
141
201
  labelsAboveHalign: 'left',
142
202
  labelsAboveValign: 'center',
203
+ labelsAboveSpecific: null,
143
204
 
144
205
  linewidth: 1,
145
206
  grouping: 'grouped',
@@ -159,7 +220,7 @@
159
220
  titleX: null,
160
221
  titleY: null,
161
222
  titleHalign: 'center',
162
- titleValign: 'bottom',
223
+ titleValign: null,
163
224
  titleColor: 'black',
164
225
  titleFont: null,
165
226
  titleBold: false,
@@ -169,7 +230,7 @@
169
230
  titleSubtitleX: null,
170
231
  titleSubtitleY: null,
171
232
  titleSubtitleHalign: 'center',
172
- titleSubtitleValign: 'top',
233
+ titleSubtitleValign: null,
173
234
  titleSubtitleColor: '#aaa',
174
235
  titleSubtitleSize: 10,
175
236
  titleSubtitleFont: null,
@@ -181,14 +242,26 @@
181
242
  shadowOffsety: 2,
182
243
  shadowBlur: 2,
183
244
  shadowOpacity: 0.25,
245
+
246
+
247
+
248
+ key: null,
249
+ keyColors: null,
250
+ keyOffsetx: 0,
251
+ keyOffsety: 0,
252
+ keyTextOffsetx: 0,
253
+ keyTextOffsety: -1,
254
+ keyTextSize: null,
255
+ keyTextBold: null,
256
+ keyTextItalic: null,
184
257
 
185
258
  attribution: true,
186
259
  attributionX: null,
187
260
  attributionY: null,
188
- attributionHref: 'http://www.rgraph.net/svg/index.html',
261
+ attributionHref: null,// Default is set in RGraph.svg.common.core.js
189
262
  attributionHalign: 'right',
190
263
  attributionValign: 'bottom',
191
- attributionSize: 8,
264
+ attributionSize: 7,
192
265
  attributionColor: 'gray',
193
266
  attributionFont: 'sans-serif',
194
267
  attributionItalic: false,
@@ -215,32 +288,6 @@
215
288
 
216
289
 
217
290
 
218
- //
219
- // A setter that the constructor uses (at the end)
220
- // to set all of the properties
221
- //
222
- // @param string name The name of the property to set
223
- // @param string value The value to set the property to
224
- //
225
- this.set = function (name, value)
226
- {
227
- if (arguments.length === 1 && typeof name === 'object') {
228
- for (i in arguments[0]) {
229
- if (typeof i === 'string') {
230
- this.set(i, arguments[0][i]);
231
- }
232
- }
233
- } else {
234
- this.properties[name] = value;
235
- }
236
-
237
- return this;
238
- };
239
-
240
-
241
-
242
-
243
-
244
291
 
245
292
 
246
293
 
@@ -286,15 +333,9 @@
286
333
 
287
334
 
288
335
 
289
- //
290
- // Parse the colors. This allows for simple gradient syntax
291
- //
292
- if (!this.colorsParsed) {
293
- this.parseColors();
294
-
295
- // Don't want to do this again
296
- this.colorsParsed = true;
297
- }
336
+ // Parse the colors for gradients
337
+ RG.SVG.resetColorsToOriginalValues({object:this});
338
+ this.parseColors();
298
339
 
299
340
 
300
341
 
@@ -392,6 +433,21 @@
392
433
  // Draw the labelsAbove
393
434
  this.drawLabelsAbove();
394
435
 
436
+
437
+
438
+
439
+
440
+
441
+ // Draw the key
442
+ if (typeof prop.key !== null && RG.SVG.drawKey) {
443
+ RG.SVG.drawKey(this);
444
+ } else if (!RGraph.SVG.isNull(prop.key)) {
445
+ alert('The drawKey() function does not exist - have you forgotten to include the key library?');
446
+ }
447
+
448
+
449
+
450
+
395
451
 
396
452
 
397
453
  // Add the attribution link. If you're adding this elsewhere on your page/site
@@ -452,14 +508,24 @@
452
508
  //
453
509
  if (typeof this.data[i] === 'number') {
454
510
 
455
- var outerSegment = this.graphHeight / this.data.length,
456
- width = ma.abs((this.data[i] / (this.max - this.min)) * this.graphWidth),
457
- height = (this.graphHeight / this.data.length) - prop.vmargin - prop.vmargin,
458
- x = this.getXCoord(0) - (this.data[i] < 0 ? width : 0),
459
- y = prop.gutterTop + prop.vmargin + (outerSegment * i);
511
+ var outerSegment = (this.graphHeight - prop.vmarginTop - prop.vmarginBottom) / this.data.length,
512
+ width = this.getWidth(this.data[i]),
513
+ height = ( (this.graphHeight - prop.vmarginTop - prop.vmarginBottom) / this.data.length) - prop.vmargin - prop.vmargin,
514
+ x = this.getXCoord(
515
+ (this.scale.min < 0 && this.scale.max < 0) || (this.scale.min > 0 && this.scale.max > 0) ? this.scale.min : 0
516
+ ) - (this.data[i] < 0 ? width : 0),
517
+ y = prop.gutterTop + prop.vmarginTop + prop.vmargin + (outerSegment * i);
518
+
519
+ // If theres a min set but both the min and max are below
520
+ // zero the the bars should be aligned to the right hand
521
+ // side
522
+ if (this.scale.min < 0 && this.scale.max < 0) {
523
+ x = this.width - prop.gutterRight - width;
524
+ }
460
525
 
461
526
  var rect = RG.SVG.create({
462
527
  svg: this.svg,
528
+ parent: this.svg.all,
463
529
  type: 'rect',
464
530
  attr: {
465
531
  stroke: prop.strokestyle,
@@ -471,6 +537,8 @@
471
537
  'stroke-width': prop.linewidth,
472
538
  'data-tooltip': (!RG.SVG.isNull(prop.tooltips) && prop.tooltips.length) ? prop.tooltips[i] : '',
473
539
  'data-index': i,
540
+ 'data-original-width': width,
541
+ 'data-original-height': height,
474
542
  'data-sequential-index': sequentialIndex,
475
543
  'data-value': this.data[i],
476
544
  filter: prop.shadow ? 'url(#dropShadow)' : ''
@@ -499,10 +567,9 @@
499
567
  //
500
568
  (function (idx, seq)
501
569
  {
502
- rect['on' + prop.tooltipsEvent] = function (e)
570
+ rect.addEventListener(prop.tooltipsEvent.replace(/^on/, ''), function (e)
503
571
  {
504
- // Hide any tooltip that is currently visible
505
- RG.SVG.hideTooltip();
572
+ obj.removeHighlight();
506
573
 
507
574
  // Show the tooltip
508
575
  RG.SVG.tooltip({
@@ -516,13 +583,12 @@
516
583
 
517
584
  // Highlight the rect that has been clicked on
518
585
  obj.highlight(e.target);
519
-
520
- };
586
+ }, false);
521
587
 
522
- rect.onmousemove = function (e)
588
+ rect.addEventListener('mousemove', function (e)
523
589
  {
524
- e.target.style.cursor = 'pointer'
525
- };
590
+ e.target.style.cursor = 'pointer';
591
+ }, false);
526
592
  })(i, sequentialIndex);
527
593
  }
528
594
 
@@ -534,7 +600,7 @@
534
600
  //
535
601
  } else if (RG.SVG.isArray(this.data[i]) && prop.grouping === 'grouped') {
536
602
 
537
- var outerSegment = (this.graphHeight / this.data.length),
603
+ var outerSegment = ( (this.graphHeight - prop.vmarginTop - prop.vmarginBottom) / this.data.length),
538
604
  innerSegment = outerSegment - (2 * prop.vmargin);
539
605
 
540
606
  // Loop through the group
@@ -542,13 +608,46 @@
542
608
 
543
609
  var width = ma.abs((this.data[i][j] / (this.max - this.min)) * this.graphWidth),
544
610
  height = ( (innerSegment - ((this.data[i].length - 1) * prop.vmarginGrouped)) / this.data[i].length),
545
- y = prop.gutterTop + prop.vmargin + (outerSegment * i) + (j * height) + (j * prop.vmarginGrouped),
611
+ y = prop.gutterTop + prop.vmargin + prop.vmarginTop + (outerSegment * i) + (j * height) + (j * prop.vmarginGrouped),
546
612
  x = this.getXCoord(0) - (this.data[i][j] < 0 ? width : 0);
547
613
 
548
614
 
615
+
616
+
617
+
618
+
619
+
620
+
621
+
622
+ // Work out some coordinates for the width and X coords ///////////////////////
623
+ if (this.scale.max < 0 && this.scale.min < this.scale.max) {
624
+ var x1 = this.getXCoord(this.data[i][j]);
625
+ var x2 = this.getXCoord(this.scale.max);
626
+ x = x1;
627
+ width = x2 - x1;
628
+
629
+ } else if (this.scale.min > 0 && this.scale.max > this.scale.min) {
630
+ var x1 = this.getXCoord(this.data[i][j]);
631
+ var x2 = this.getXCoord(this.scale.min);
632
+ x = this.getXCoord(this.scale.min);
633
+ width = x1 - x2;
634
+
635
+ }
636
+ //////////////////////////////////////////////////////////////////////////////
637
+
638
+
639
+
640
+
641
+
642
+
643
+
644
+
645
+
646
+
549
647
  var rect = RG.SVG.create({
550
648
  svg: this.svg,
551
649
  type: 'rect',
650
+ parent: this.svg.all,
552
651
  attr: {
553
652
  stroke: prop['strokestyle'],
554
653
  fill: (prop.colorsSequential && prop.colors[sequentialIndex]) ? prop.colors[sequentialIndex] : (prop.colors[j] ? prop.colors[j] : prop.colors[prop.colors.length - 1]),
@@ -558,6 +657,7 @@
558
657
  height: height,
559
658
  'stroke-width': prop.linewidth,
560
659
  'data-index': i,
660
+ 'data-original-width': width,
561
661
  'data-sequential-index': sequentialIndex,
562
662
  'data-tooltip': (!RG.SVG.isNull(prop.tooltips) && prop.tooltips.length) ? prop.tooltips[sequentialIndex] : '',
563
663
  'data-value': this.data[i][j],
@@ -587,10 +687,9 @@
587
687
  {
588
688
  var indexes = RG.SVG.sequentialIndexToGrouped(seq, obj.data);
589
689
 
590
- rect['on' + prop.tooltipsEvent] = function (e)
690
+ rect.addEventListener(prop.tooltipsEvent.replace(/^on/, ''), function (e)
591
691
  {
592
- // Hide any tooltip that is currently visible
593
- RG.SVG.hideTooltip();
692
+ obj.removeHighlight();
594
693
 
595
694
  // Show the tooltip
596
695
  RG.SVG.tooltip({
@@ -605,12 +704,12 @@
605
704
  // Highlight the rect that has been clicked on
606
705
  obj.highlight(e.target);
607
706
 
608
- };
707
+ }, false);
609
708
 
610
- rect.onmousemove = function (e)
709
+ rect.addEventListener('mousemove', function (e)
611
710
  {
612
711
  e.target.style.cursor = 'pointer'
613
- };
712
+ }, false);
614
713
  })(i, sequentialIndex);
615
714
  }
616
715
  }
@@ -625,7 +724,7 @@
625
724
  } else if (RG.SVG.isArray(this.data[i]) && prop.grouping === 'stacked') {
626
725
 
627
726
  // This is each bars "segment" of the chart
628
- var section = (this.graphHeight / this.data.length);
727
+ var section = ( (this.graphHeight - prop.vmarginTop - prop.vmarginBottom) / this.data.length);
629
728
 
630
729
 
631
730
  // Intialise the X and Y coordinates
@@ -636,10 +735,10 @@
636
735
  // Loop through the stack
637
736
  for (var j=0; j<this.data[i].length; ++j,++sequentialIndex) {
638
737
 
639
- var outerHeight = this.graphHeight / this.data.length,
738
+ var outerHeight = (this.graphHeight - prop.vmarginTop - prop.vmarginBottom) / this.data.length,
640
739
  width = ma.abs((this.data[i][j] / (this.max - this.min)) * this.graphWidth),
641
740
  height = outerHeight - (2 * prop.vmargin),
642
- y = prop.gutterTop + prop.vmargin + (outerHeight * i);
741
+ y = prop.gutterTop + prop.vmargin + prop.vmarginTop + (outerHeight * i);
643
742
 
644
743
  // If this is the first iteration of the loop and a shadow
645
744
  // is requested draw a rect here to create it.
@@ -649,6 +748,7 @@
649
748
 
650
749
  var rect = RG.SVG.create({
651
750
  svg: this.svg,
751
+ parent: this.svg.all,
652
752
  type: 'rect',
653
753
  attr: {
654
754
  x: x,
@@ -671,6 +771,7 @@
671
771
  var rect = RG.SVG.create({
672
772
  svg: this.svg,
673
773
  type: 'rect',
774
+ parent: this.svg.all,
674
775
  attr: {
675
776
  stroke: prop['strokestyle'],
676
777
  fill: prop.colorsSequential ? (prop.colors[sequentialIndex] ? prop.colors[sequentialIndex] : prop.colors[prop.colors.length - 1]) : (prop.colors[j] ? prop.colors[j] : prop.colors[prop.colors.length - 1]),
@@ -679,6 +780,10 @@
679
780
  width: width,
680
781
  height: height,
681
782
  'stroke-width': prop.linewidth,
783
+ 'data-original-width': width,
784
+ 'data-original-height': height,
785
+ 'data-original-x': x,
786
+ 'data-original-y': y,
682
787
  'data-index': i,
683
788
  'data-sequential-index': sequentialIndex,
684
789
  'data-tooltip': (!RG.SVG.isNull(prop.tooltips) && prop.tooltips.length) ? prop.tooltips[sequentialIndex] : '',
@@ -697,7 +802,7 @@
697
802
 
698
803
 
699
804
 
700
- // Add the tooltip data- attribute
805
+ // Add the tooltips
701
806
  if (!RG.SVG.isNull(prop.tooltips) && prop.tooltips[sequentialIndex]) {
702
807
 
703
808
  var obj = this;
@@ -708,10 +813,9 @@
708
813
  //
709
814
  (function (idx, seq)
710
815
  {
711
- rect['on' + prop.tooltipsEvent] = function (e)
816
+ rect.addEventListener(prop.tooltipsEvent.replace(/^on/, ''), function (e)
712
817
  {
713
- // Hide any tooltip that is currently visible
714
- RG.SVG.hideTooltip();
818
+ obj.removeHighlight();
715
819
 
716
820
  var indexes = RG.SVG.sequentialIndexToGrouped(seq, obj.data);
717
821
 
@@ -727,12 +831,12 @@
727
831
 
728
832
  // Highlight the rect that has been clicked on
729
833
  obj.highlight(e.target);
730
- };
834
+ }, false);
731
835
 
732
- rect.onmousemove = function (e)
836
+ rect.addEventListener('mousemove', function (e)
733
837
  {
734
838
  e.target.style.cursor = 'pointer'
735
- };
839
+ }, false);
736
840
  })(i, sequentialIndex);
737
841
  }
738
842
 
@@ -787,6 +891,40 @@
787
891
 
788
892
 
789
893
 
894
+
895
+ /**
896
+ * This function can be used to retrieve the relevant X coordinate for a
897
+ * particular value.
898
+ *
899
+ * @param int value The value to get the X coordinate for
900
+ */
901
+ this.getWidth = function (value)
902
+ {
903
+ if (this.scale.max <= 0 && this.scale.min < this.scale.max) {
904
+ var x1 = this.getXCoord(this.scale.max);
905
+ var x2 = this.getXCoord(value);
906
+
907
+ } else if (this.scale.min > 0 && this.scale.max > this.scale.min) {
908
+ var x1 = this.getXCoord(this.scale.min);
909
+ var x2 = this.getXCoord(value);
910
+
911
+ } else {
912
+ var x1 = this.getXCoord(0);
913
+ var x2 = this.getXCoord(value);
914
+ }
915
+
916
+ return ma.abs(x1 - x2);
917
+ };
918
+
919
+ //ma.abs(((this.data[i] - this.scale.min) / (this.max - this.scale.min)) * this.graphWidth)
920
+
921
+
922
+
923
+
924
+
925
+
926
+
927
+
790
928
  /**
791
929
  * This function can be used to highlight a bar on the chart
792
930
  *
@@ -802,6 +940,7 @@
802
940
  var highlight = RG.SVG.create({
803
941
  svg: this.svg,
804
942
  type: 'rect',
943
+ parent: this.svg.all,
805
944
  attr: {
806
945
  stroke: prop.highlightStroke,
807
946
  fill: prop.highlightFill,
@@ -814,15 +953,15 @@
814
953
  });
815
954
 
816
955
 
817
- if (prop.tooltipsEvent === 'mousemove') {
818
- highlight.addEventListener('mouseout', function (e)
819
- {
820
- highlight.parentNode.removeChild(highlight);
821
- RG.SVG.hideTooltip();
956
+ //if (prop.tooltipsEvent === 'mousemove') {
957
+ // highlight.addEventListener('mouseout', function (e)
958
+ // {
959
+ // highlight.parentNode.removeChild(highlight);
960
+ // RG.SVG.hideTooltip();
822
961
 
823
- RG.SVG.REG.set('highlight', null);
824
- }, false);
825
- }
962
+ // RG.SVG.REG.set('highlight', null);
963
+ // }, false);
964
+ //}
826
965
 
827
966
 
828
967
  // Store the highlight rect in the rebistry so
@@ -848,7 +987,8 @@
848
987
  this.originalColors = {
849
988
  colors: RG.SVG.arrayClone(prop.colors),
850
989
  backgroundGridColor: RG.SVG.arrayClone(prop.backgroundGridColor),
851
- highlightFill: RG.SVG.arrayClone(prop.highlightFill)
990
+ highlightFill: RG.SVG.arrayClone(prop.highlightFill),
991
+ backgroundColor: RG.SVG.arrayClone(prop.backgroundColor)
852
992
  }
853
993
  }
854
994
 
@@ -870,6 +1010,7 @@
870
1010
 
871
1011
  prop.backgroundGridColor = RG.SVG.parseColorLinear({object: this, color: prop.backgroundGridColor, direction: 'horizontal',start: prop.gutterLeft,end: this.width - prop.gutterRight});
872
1012
  prop.highlightFill = RG.SVG.parseColorLinear({object: this, color: prop.highlightFill, direction: 'horizontal',start: prop.gutterLeft,end: this.width - prop.gutterRight});
1013
+ prop.backgroundColor = RG.SVG.parseColorLinear({object: this, color: prop.backgroundColor});
873
1014
  };
874
1015
 
875
1016
 
@@ -892,8 +1033,10 @@
892
1033
  for (var i=0; i<this.coords.length; ++i) {
893
1034
 
894
1035
  var value = data[i].toFixed(typeof prop.labelsAboveDecimals === 'number' ? prop.labelsAboveDecimals : prop.xaxisDecimals);
895
-
896
1036
  var indexes = RG.SVG.sequentialIndexToGrouped(i, this.data);
1037
+
1038
+
1039
+
897
1040
  if (RG.SVG.isArray(this.data[indexes[0]]) && prop.grouping === 'stacked') {
898
1041
  if ((indexes[1] +1) === this.data[indexes[0]].length) {
899
1042
  value = RG.SVG.arraySum(this.data[indexes[0]]);
@@ -902,9 +1045,9 @@
902
1045
  continue;
903
1046
  }
904
1047
  }
905
-
906
1048
 
907
- var str = RG.SVG.numberFormat({
1049
+
1050
+ var str = prop.labelsAboveSpecific ? prop.labelsAboveSpecific[i].toString() : RG.SVG.numberFormat({
908
1051
  object: this,
909
1052
  num: value,
910
1053
  prepend: typeof prop.labelsAboveUnitsPre === 'string' ? prop.labelsAboveUnitsPre : null,
@@ -913,7 +1056,7 @@
913
1056
  thousand: typeof prop.labelsAboveThousand === 'string' ? prop.labelsAboveThousand : null,
914
1057
  formatter: typeof prop.labelsAboveFormatter === 'function' ? prop.labelsAboveFormatter : null
915
1058
  });
916
-
1059
+
917
1060
  var bold = typeof prop.labelsAboveBold === 'boolean' ? prop.labelsAboveBold : prop.textBold,
918
1061
  italic = typeof prop.labelsAboveItalic === 'boolean' ? prop.labelsAboveItalic : prop.textItalic,
919
1062
  size = prop.labelsAboveSize || prop.textSize,
@@ -927,21 +1070,25 @@
927
1070
  font: font,
928
1071
  size: size
929
1072
  });
930
-
931
- var x = parseFloat(this.coords[i].object.getAttribute('x')) + parseFloat(this.coords[i].object.getAttribute('width')) + 7 + prop.labelsAboveOffsetx,
1073
+
1074
+ var x = (value >= 0)
1075
+ ? (parseFloat(this.coords[i].object.getAttribute('x')) + parseFloat(this.coords[i].object.getAttribute('width')) + 7 + prop.labelsAboveOffsetx)
1076
+ : parseFloat(this.coords[i].object.getAttribute('x') - 7 - prop.labelsAboveOffsetx),
932
1077
  y = parseFloat(this.coords[i].object.getAttribute('y')) + parseFloat(this.coords[i].object.getAttribute('height') / 2) + prop.labelsAboveOffsety,
933
1078
  width = dimensions[0],
934
- height = dimensions[1];
935
-
936
- if (x + width > this.width) {
1079
+ height = dimensions[1],
1080
+ halign = (value >= 0) ? 'left': 'right';
1081
+
1082
+ if (x + width > this.width && value > 0) {
937
1083
  halign = 'right';
938
1084
  x = this.width - 5;
939
1085
  prop.labelsAboveBackground = prop.labelsAboveBackground || 'rgba(255,255,255,0.95)';
940
1086
  }
941
-
1087
+
942
1088
 
943
1089
  var text = RG.SVG.text({
944
1090
  object: this,
1091
+ parent: this.svg.all,
945
1092
  text: str,
946
1093
  x: x,
947
1094
  y: y,
@@ -1011,6 +1158,26 @@
1011
1158
 
1012
1159
 
1013
1160
 
1161
+ //
1162
+ // Remove highlight from the chart (tooltips)
1163
+ //
1164
+ this.removeHighlight = function ()
1165
+ {
1166
+ var highlight = RG.SVG.REG.get('highlight');
1167
+ if (highlight && highlight.parentNode) {
1168
+ highlight.parentNode.removeChild(highlight);
1169
+ }
1170
+
1171
+ RG.SVG.REG.set('highlight', null);
1172
+ };
1173
+
1174
+
1175
+
1176
+
1177
+
1178
+
1179
+
1180
+
1014
1181
  //
1015
1182
  // The Bar chart grow effect
1016
1183
  //
@@ -1125,6 +1292,99 @@
1125
1292
 
1126
1293
 
1127
1294
 
1295
+ /**
1296
+ * HBar chart Wave effect.
1297
+ *
1298
+ * @param object OPTIONAL An object map of options. You specify 'frames'
1299
+ * here to give the number of frames in the effect
1300
+ * and also callback to specify a callback function
1301
+ * thats called at the end of the effect
1302
+ */
1303
+ this.wave = function ()
1304
+ {
1305
+ // First draw the chart
1306
+ this.draw();
1307
+
1308
+
1309
+ var obj = this,
1310
+ opt = arguments[0] || {};
1311
+
1312
+ opt.frames = opt.frames || 60;
1313
+ opt.startFrames = [];
1314
+ opt.counters = [];
1315
+
1316
+ var framesperbar = opt.frames / 3,
1317
+ frame = -1,
1318
+ callback = opt.callback || function () {},
1319
+ width;
1320
+
1321
+ for (var i=0,len=this.coords.length; i<len; i+=1) {
1322
+ opt.startFrames[i] = ((opt.frames / 2) / (obj.coords.length - 1)) * i;
1323
+ opt.counters[i] = 0;
1324
+
1325
+ // Now zero the width of the bar
1326
+ this.coords[i].object.setAttribute('width', 0);
1327
+ }
1328
+
1329
+
1330
+ function iterator ()
1331
+ {
1332
+ ++frame;
1333
+
1334
+ for (var i=0,len=obj.coords.length; i<len; i+=1) {
1335
+ if (frame > opt.startFrames[i]) {
1336
+
1337
+ var originalWidth = obj.coords[i].object.getAttribute('data-original-width'),
1338
+ value = parseFloat(obj.coords[i].object.getAttribute('data-value'));
1339
+
1340
+ obj.coords[i].object.setAttribute(
1341
+ 'width',
1342
+ width = ma.min(
1343
+ ((frame - opt.startFrames[i]) / framesperbar) * originalWidth,
1344
+ originalWidth
1345
+ )
1346
+ );
1347
+
1348
+ obj.coords[i].object.setAttribute(
1349
+ 'x',
1350
+ value >=0 ? obj.getXCoord(0) : obj.getXCoord(0) - width
1351
+ );
1352
+
1353
+
1354
+ if (prop.grouping === 'stacked') {
1355
+ var seq = obj.coords[i].object.getAttribute('data-sequential-index');
1356
+ var indexes = RG.SVG.sequentialIndexToGrouped(seq, obj.data);
1357
+
1358
+ if (indexes[1] > 0) {
1359
+ obj.coords[i].object.setAttribute(
1360
+ 'x',
1361
+ parseInt(obj.coords[i - 1].object.getAttribute('x')) + parseInt(obj.coords[i - 1].object.getAttribute('width'))
1362
+ );
1363
+ }
1364
+ }
1365
+ }
1366
+ }
1367
+
1368
+
1369
+ if (frame >= opt.frames) {
1370
+ callback(obj);
1371
+ } else {
1372
+ RG.SVG.FX.update(iterator);
1373
+ }
1374
+ }
1375
+
1376
+ iterator();
1377
+
1378
+ return this;
1379
+ };
1380
+
1381
+
1382
+
1383
+
1384
+
1385
+
1386
+
1387
+
1128
1388
  //
1129
1389
  // Set the options that the user has provided
1130
1390
  //