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,5 +1,5 @@
|
|
1
|
-
// version: 2017-
|
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:
|
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:
|
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:
|
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:
|
250
|
+
attributionHref: null,// Default is set in RGraph.svg.common.core.js
|
178
251
|
attributionHalign: 'right',
|
179
252
|
attributionValign: 'bottom',
|
180
|
-
attributionSize:
|
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
|
-
|
263
|
-
|
264
|
-
|
265
|
-
|
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
|
-
|
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(
|
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
|
-
|
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
|
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
|
664
|
+
rect.addEventListener(prop.tooltipsEvent.replace(/^on/, ''), function (e)
|
479
665
|
{
|
480
|
-
|
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.
|
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
|
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
|
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
|
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.
|
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.
|
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
|
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.
|
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
|
-
|
741
|
-
|
742
|
-
|
1022
|
+
if (value < this.scale.min) {
|
1023
|
+
return null;
|
1024
|
+
}
|
743
1025
|
|
744
|
-
|
745
|
-
|
746
|
-
|
747
|
-
|
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
|
-
|
789
|
-
|
790
|
-
|
791
|
-
|
792
|
-
|
793
|
-
|
794
|
-
|
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
|
-
|
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:
|
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:
|
872
|
-
y:
|
1206
|
+
x: x,
|
1207
|
+
y: y,
|
873
1208
|
halign: prop.labelsAboveHalign,
|
874
|
-
valign:
|
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
|
//
|