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.
- checksums.yaml +4 -4
- data/README.md +3 -3
- data/lib/rgraph-rails/version.rb +1 -1
- data/vendor/assets/javascripts/RGraph.bar.js +16 -8
- data/vendor/assets/javascripts/RGraph.bipolar.js +1 -1
- data/vendor/assets/javascripts/RGraph.common.annotate.js +1 -1
- data/vendor/assets/javascripts/RGraph.common.context.js +1 -1
- data/vendor/assets/javascripts/RGraph.common.core.js +84 -7
- data/vendor/assets/javascripts/RGraph.common.csv.js +1 -1
- data/vendor/assets/javascripts/RGraph.common.deprecated.js +1 -1
- data/vendor/assets/javascripts/RGraph.common.dynamic.js +1 -1
- data/vendor/assets/javascripts/RGraph.common.effects.js +1 -1
- data/vendor/assets/javascripts/RGraph.common.key.js +3 -3
- data/vendor/assets/javascripts/RGraph.common.resizing.js +1 -1
- data/vendor/assets/javascripts/RGraph.common.sheets.js +1 -1
- data/vendor/assets/javascripts/RGraph.common.tooltips.js +1 -1
- data/vendor/assets/javascripts/RGraph.common.zoom.js +1 -1
- data/vendor/assets/javascripts/RGraph.drawing.background.js +1 -1
- data/vendor/assets/javascripts/RGraph.drawing.circle.js +1 -1
- data/vendor/assets/javascripts/RGraph.drawing.image.js +1 -1
- data/vendor/assets/javascripts/RGraph.drawing.marker1.js +1 -1
- data/vendor/assets/javascripts/RGraph.drawing.marker2.js +1 -1
- data/vendor/assets/javascripts/RGraph.drawing.marker3.js +1 -1
- data/vendor/assets/javascripts/RGraph.drawing.poly.js +1 -1
- data/vendor/assets/javascripts/RGraph.drawing.rect.js +1 -1
- data/vendor/assets/javascripts/RGraph.drawing.text.js +1 -1
- data/vendor/assets/javascripts/RGraph.drawing.xaxis.js +1 -1
- data/vendor/assets/javascripts/RGraph.drawing.yaxis.js +1 -1
- data/vendor/assets/javascripts/RGraph.fuel.js +1 -1
- data/vendor/assets/javascripts/RGraph.funnel.js +1 -1
- data/vendor/assets/javascripts/RGraph.gantt.js +1 -1
- data/vendor/assets/javascripts/RGraph.gauge.js +1 -1
- data/vendor/assets/javascripts/RGraph.hbar.js +228 -2
- data/vendor/assets/javascripts/RGraph.hprogress.js +1 -1
- data/vendor/assets/javascripts/RGraph.line.js +27 -5
- data/vendor/assets/javascripts/RGraph.meter.js +1 -1
- data/vendor/assets/javascripts/RGraph.modaldialog.js +1 -1
- data/vendor/assets/javascripts/RGraph.odo.js +1 -1
- data/vendor/assets/javascripts/RGraph.pie.js +1 -1
- data/vendor/assets/javascripts/RGraph.radar.js +1 -1
- data/vendor/assets/javascripts/RGraph.rose.js +1 -1
- data/vendor/assets/javascripts/RGraph.rscatter.js +1 -1
- data/vendor/assets/javascripts/RGraph.scatter.js +161 -34
- data/vendor/assets/javascripts/RGraph.semicircularprogress.js +1 -1
- data/vendor/assets/javascripts/RGraph.svg.bar.js +772 -103
- data/vendor/assets/javascripts/RGraph.svg.common.ajax.js +1 -1
- data/vendor/assets/javascripts/RGraph.svg.common.core.js +806 -231
- data/vendor/assets/javascripts/RGraph.svg.common.csv.js +1 -1
- data/vendor/assets/javascripts/RGraph.svg.common.fx.js +24 -24
- data/vendor/assets/javascripts/RGraph.svg.common.key.js +206 -0
- data/vendor/assets/javascripts/RGraph.svg.common.sheets.js +1 -1
- data/vendor/assets/javascripts/RGraph.svg.common.tooltips.js +63 -22
- data/vendor/assets/javascripts/RGraph.svg.hbar.js +351 -91
- data/vendor/assets/javascripts/RGraph.svg.line.js +159 -64
- data/vendor/assets/javascripts/RGraph.svg.pie.js +402 -51
- data/vendor/assets/javascripts/RGraph.svg.radar.js +320 -143
- data/vendor/assets/javascripts/RGraph.svg.rose.js +1818 -0
- data/vendor/assets/javascripts/RGraph.svg.scatter.js +1262 -0
- data/vendor/assets/javascripts/RGraph.svg.semicircularprogress.js +106 -57
- data/vendor/assets/javascripts/RGraph.svg.waterfall.js +1253 -0
- data/vendor/assets/javascripts/RGraph.thermometer.js +7 -6
- data/vendor/assets/javascripts/RGraph.vprogress.js +1 -1
- data/vendor/assets/javascripts/RGraph.waterfall.js +1 -1
- data/vendor/assets/javascripts/financial-data.js +1067 -0
- metadata +8 -5
- data/vendor/assets/javascripts/RGraph.cornergauge.js +0 -71
- data/vendor/assets/javascripts/RGraph.thermometer.old.js +0 -68
@@ -1,4 +1,4 @@
|
|
1
|
-
// version: 2017-
|
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:
|
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:
|
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:
|
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:
|
261
|
+
attributionHref: null,// Default is set in RGraph.svg.common.core.js
|
189
262
|
attributionHalign: 'right',
|
190
263
|
attributionValign: 'bottom',
|
191
|
-
attributionSize:
|
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
|
-
|
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 =
|
457
|
-
height = (this.graphHeight / this.data.length) - prop.vmargin - prop.vmargin,
|
458
|
-
x = this.getXCoord(
|
459
|
-
|
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
|
570
|
+
rect.addEventListener(prop.tooltipsEvent.replace(/^on/, ''), function (e)
|
503
571
|
{
|
504
|
-
|
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.
|
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
|
690
|
+
rect.addEventListener(prop.tooltipsEvent.replace(/^on/, ''), function (e)
|
591
691
|
{
|
592
|
-
|
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.
|
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
|
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
|
816
|
+
rect.addEventListener(prop.tooltipsEvent.replace(/^on/, ''), function (e)
|
712
817
|
{
|
713
|
-
|
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.
|
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
|
-
|
819
|
-
|
820
|
-
|
821
|
-
|
956
|
+
//if (prop.tooltipsEvent === 'mousemove') {
|
957
|
+
// highlight.addEventListener('mouseout', function (e)
|
958
|
+
// {
|
959
|
+
// highlight.parentNode.removeChild(highlight);
|
960
|
+
// RG.SVG.hideTooltip();
|
822
961
|
|
823
|
-
|
824
|
-
|
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
|
-
|
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 =
|
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
|
-
|
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
|
//
|