rgraph-rails 1.0.7 → 1.0.8
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/license.txt +4 -16
- data/vendor/assets/javascripts/RGraph.bar.js +3734 -241
- data/vendor/assets/javascripts/RGraph.bipolar.js +2005 -115
- data/vendor/assets/javascripts/RGraph.common.annotate.js +395 -35
- data/vendor/assets/javascripts/RGraph.common.context.js +595 -30
- data/vendor/assets/javascripts/RGraph.common.core.js +5282 -405
- data/vendor/assets/javascripts/RGraph.common.csv.js +276 -19
- data/vendor/assets/javascripts/RGraph.common.deprecated.js +450 -35
- data/vendor/assets/javascripts/RGraph.common.dynamic.js +1395 -86
- data/vendor/assets/javascripts/RGraph.common.effects.js +1545 -90
- data/vendor/assets/javascripts/RGraph.common.key.js +753 -54
- data/vendor/assets/javascripts/RGraph.common.resizing.js +563 -37
- data/vendor/assets/javascripts/RGraph.common.sheets.js +352 -29
- data/vendor/assets/javascripts/RGraph.common.tooltips.js +450 -32
- data/vendor/assets/javascripts/RGraph.common.zoom.js +219 -14
- data/vendor/assets/javascripts/RGraph.drawing.background.js +570 -35
- data/vendor/assets/javascripts/RGraph.drawing.circle.js +544 -35
- data/vendor/assets/javascripts/RGraph.drawing.image.js +755 -52
- data/vendor/assets/javascripts/RGraph.drawing.marker1.js +645 -41
- data/vendor/assets/javascripts/RGraph.drawing.marker2.js +633 -37
- data/vendor/assets/javascripts/RGraph.drawing.marker3.js +514 -36
- data/vendor/assets/javascripts/RGraph.drawing.poly.js +559 -39
- data/vendor/assets/javascripts/RGraph.drawing.rect.js +548 -35
- data/vendor/assets/javascripts/RGraph.drawing.text.js +664 -36
- data/vendor/assets/javascripts/RGraph.drawing.xaxis.js +812 -50
- data/vendor/assets/javascripts/RGraph.drawing.yaxis.js +856 -51
- data/vendor/assets/javascripts/RGraph.fuel.js +964 -58
- data/vendor/assets/javascripts/RGraph.funnel.js +984 -55
- data/vendor/assets/javascripts/RGraph.gantt.js +1354 -77
- data/vendor/assets/javascripts/RGraph.gauge.js +1421 -87
- data/vendor/assets/javascripts/RGraph.hbar.js +2562 -146
- data/vendor/assets/javascripts/RGraph.hprogress.js +1401 -80
- data/vendor/assets/javascripts/RGraph.line.js +4226 -244
- data/vendor/assets/javascripts/RGraph.meter.js +1280 -74
- data/vendor/assets/javascripts/RGraph.modaldialog.js +301 -19
- data/vendor/assets/javascripts/RGraph.odo.js +1264 -71
- data/vendor/assets/javascripts/RGraph.pie.js +2288 -137
- data/vendor/assets/javascripts/RGraph.radar.js +1847 -110
- data/vendor/assets/javascripts/RGraph.rose.js +1977 -108
- data/vendor/assets/javascripts/RGraph.rscatter.js +1432 -80
- data/vendor/assets/javascripts/RGraph.scatter.js +3036 -168
- data/vendor/assets/javascripts/RGraph.semicircularprogress.js +1120 -60
- data/vendor/assets/javascripts/RGraph.svg.bar.js +1067 -0
- data/vendor/assets/javascripts/RGraph.svg.common.ajax.js +247 -0
- data/vendor/assets/javascripts/RGraph.svg.common.core.js +3363 -0
- data/vendor/assets/javascripts/RGraph.svg.common.csv.js +277 -0
- data/vendor/assets/javascripts/RGraph.svg.common.fx.js +1304 -0
- data/vendor/assets/javascripts/RGraph.svg.common.sheets.js +353 -0
- data/vendor/assets/javascripts/RGraph.svg.common.tooltips.js +233 -0
- data/vendor/assets/javascripts/RGraph.svg.hbar.js +1141 -0
- data/vendor/assets/javascripts/RGraph.svg.line.js +1486 -0
- data/vendor/assets/javascripts/RGraph.svg.pie.js +781 -0
- data/vendor/assets/javascripts/RGraph.svg.radar.js +1326 -0
- data/vendor/assets/javascripts/RGraph.svg.semicircularprogress.js +817 -0
- data/vendor/assets/javascripts/RGraph.thermometer.js +1135 -62
- data/vendor/assets/javascripts/RGraph.vprogress.js +1470 -83
- data/vendor/assets/javascripts/RGraph.waterfall.js +1347 -80
- metadata +15 -3
@@ -1,81 +1,1402 @@
|
|
1
|
+
// version: 2017-01-02
|
2
|
+
/**
|
3
|
+
* o--------------------------------------------------------------------------------o
|
4
|
+
* | This file is part of the RGraph package - you can learn more at: |
|
5
|
+
* | |
|
6
|
+
* | http://www.rgraph.net |
|
7
|
+
* | |
|
8
|
+
* | RGraph is licensed under the Open Source MIT license. That means that it's |
|
9
|
+
* | totally free to use! |
|
10
|
+
* o--------------------------------------------------------------------------------o
|
11
|
+
*/
|
1
12
|
|
2
|
-
RGraph=window.RGraph||{isRGraph:true};
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
{
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
13
|
+
RGraph = window.RGraph || {isRGraph: true};
|
14
|
+
|
15
|
+
/**
|
16
|
+
* The progress bar constructor
|
17
|
+
*
|
18
|
+
* @param int id The ID of the canvas tag
|
19
|
+
* @param int value The indicated value of the meter.
|
20
|
+
* @param int max The end value (the upper most) of the meter
|
21
|
+
*/
|
22
|
+
RGraph.HProgress = function (conf)
|
23
|
+
{
|
24
|
+
/**
|
25
|
+
* Allow for object config style
|
26
|
+
*/
|
27
|
+
if ( typeof conf === 'object'
|
28
|
+
&& typeof conf.value !== 'undefined'
|
29
|
+
&& typeof conf.id === 'string') {
|
30
|
+
|
31
|
+
var id = conf.id,
|
32
|
+
canvas = document.getElementById(id),
|
33
|
+
min = conf.min,
|
34
|
+
max = conf.max,
|
35
|
+
value = conf.value,
|
36
|
+
parseConfObjectForOptions = true; // Set this so the config is parsed (at the end of the constructor)
|
37
|
+
|
38
|
+
} else {
|
39
|
+
|
40
|
+
var id = conf,
|
41
|
+
canvas = document.getElementById(id),
|
42
|
+
min = arguments[1],
|
43
|
+
max = arguments[2],
|
44
|
+
value = arguments[3];
|
45
|
+
}
|
46
|
+
|
47
|
+
|
48
|
+
|
49
|
+
this.id = id;
|
50
|
+
this.canvas = canvas;
|
51
|
+
this.context = this.canvas.getContext('2d');
|
52
|
+
this.canvas.__object__ = this;
|
53
|
+
|
54
|
+
this.min = RGraph.stringsToNumbers(min);
|
55
|
+
this.max = RGraph.stringsToNumbers(max);
|
56
|
+
this.value = RGraph.stringsToNumbers(value);
|
57
|
+
this.type = 'hprogress';
|
58
|
+
this.coords = [];
|
59
|
+
this.isRGraph = true;
|
60
|
+
this.currentValue = null;
|
61
|
+
this.uid = RGraph.CreateUID();
|
62
|
+
this.canvas.uid = this.canvas.uid ? this.canvas.uid : RGraph.CreateUID();
|
63
|
+
this.colorsParsed = false;
|
64
|
+
this.coordsText = [];
|
65
|
+
this.original_colors = [];
|
66
|
+
this.firstDraw = true; // After the first draw this will be false
|
67
|
+
|
68
|
+
|
69
|
+
/**
|
70
|
+
* Compatibility with older browsers
|
71
|
+
*/
|
72
|
+
//RGraph.OldBrowserCompat(this.context);
|
73
|
+
|
74
|
+
this.properties =
|
75
|
+
{
|
76
|
+
'chart.colors': ['Gradient(white:#0c0)','Gradient(white:red)','Gradient(white:green)','yellow','pink','cyan','black','white','gray'],
|
77
|
+
'chart.strokestyle.inner': '#999',
|
78
|
+
'chart.strokestyle.outer': '#999',
|
79
|
+
'chart.tickmarks': true,
|
80
|
+
'chart.tickmarks.color': '#999',
|
81
|
+
'chart.tickmarks.inner': false,
|
82
|
+
'chart.tickmarks.zerostart':true,
|
83
|
+
'chart.gutter.left': 25,
|
84
|
+
'chart.gutter.right': 25,
|
85
|
+
'chart.gutter.top': 25,
|
86
|
+
'chart.gutter.bottom': 25,
|
87
|
+
'chart.numticks': 10,
|
88
|
+
'chart.numticks.inner': 50,
|
89
|
+
'chart.background.color': 'Gradient(#ccc:#eee:#efefef)',
|
90
|
+
'chart.shadow': false,
|
91
|
+
'chart.shadow.color': 'rgba(0,0,0,0.5)',
|
92
|
+
'chart.shadow.blur': 3,
|
93
|
+
'chart.shadow.offsetx': 3,
|
94
|
+
'chart.shadow.offsety': 3,
|
95
|
+
'chart.title': '',
|
96
|
+
'chart.title.background': null,
|
97
|
+
'chart.title.bold': true,
|
98
|
+
'chart.title.font': null,
|
99
|
+
'chart.title.x': null,
|
100
|
+
'chart.title.y': null,
|
101
|
+
'chart.title.halign': null,
|
102
|
+
'chart.title.valign': null,
|
103
|
+
'chart.text.size': 12,
|
104
|
+
'chart.text.color': 'black',
|
105
|
+
'chart.text.font': 'Segoe UI, Arial, Verdana, sans-serif',
|
106
|
+
'chart.text.accessible': true,
|
107
|
+
'chart.text.accessible.overflow': 'visible',
|
108
|
+
'chart.text.accessible.pointerevents': true,
|
109
|
+
'chart.contextmenu': null,
|
110
|
+
'chart.units.pre': '',
|
111
|
+
'chart.units.post': '',
|
112
|
+
'chart.tooltips': null,
|
113
|
+
'chart.tooltips.effect': 'fade',
|
114
|
+
'chart.tooltips.css.class': 'RGraph_tooltip',
|
115
|
+
'chart.tooltips.highlight': true,
|
116
|
+
'chart.tooltips.event': 'onclick',
|
117
|
+
'chart.highlight.stroke': 'rgba(0,0,0,0)',
|
118
|
+
'chart.highlight.fill': 'rgba(255,255,255,0.7)',
|
119
|
+
'chart.annotatable': false,
|
120
|
+
'chart.annotate.color': 'black',
|
121
|
+
'chart.zoom.factor': 1.5,
|
122
|
+
'chart.zoom.fade.in': true,
|
123
|
+
'chart.zoom.fade.out': true,
|
124
|
+
'chart.zoom.hdir': 'right',
|
125
|
+
'chart.zoom.vdir': 'down',
|
126
|
+
'chart.zoom.frames': 25,
|
127
|
+
'chart.zoom.delay': 16.666,
|
128
|
+
'chart.zoom.shadow': true,
|
129
|
+
'chart.zoom.background': true,
|
130
|
+
'chart.arrows': false,
|
131
|
+
'chart.margin': 0,
|
132
|
+
'chart.resizable': false,
|
133
|
+
'chart.resize.handle.adjust':[0,0],
|
134
|
+
'chart.resize.handle.background':null,
|
135
|
+
'chart.labels.specific': null,
|
136
|
+
'chart.labels.count': 10,
|
137
|
+
'chart.labels.offsetx': 0,
|
138
|
+
'chart.labels.offsety': 0,
|
139
|
+
'chart.adjustable': false,
|
140
|
+
'chart.scale.decimals': 0,
|
141
|
+
'chart.scale.point': '.',
|
142
|
+
'chart.scale.thousand': ',',
|
143
|
+
'chart.key': null,
|
144
|
+
'chart.key.background': 'white',
|
145
|
+
'chart.key.position': 'gutter',
|
146
|
+
'chart.key.halign': 'right',
|
147
|
+
'chart.key.shadow': false,
|
148
|
+
'chart.key.shadow.color': '#666',
|
149
|
+
'chart.key.shadow.blur': 3,
|
150
|
+
'chart.key.shadow.offsetx': 2,
|
151
|
+
'chart.key.shadow.offsety': 2,
|
152
|
+
'chart.key.position.gutter.boxed': false,
|
153
|
+
'chart.key.position.x': null,
|
154
|
+
'chart.key.position.y': null,
|
155
|
+
'chart.key.color.shape': 'square',
|
156
|
+
'chart.key.rounded': true,
|
157
|
+
'chart.key.linewidth': 1,
|
158
|
+
'chart.key.colors': null,
|
159
|
+
'chart.key.color.shape': 'square',
|
160
|
+
'chart.key.interactive': false,
|
161
|
+
'chart.key.interactive.highlight.chart.stroke': 'black',
|
162
|
+
'chart.key.interactive.highlight.chart.fill': 'rgba(255,255,255,0.7)',
|
163
|
+
'chart.key.interactive.highlight.label': 'rgba(255,0,0,0.2)',
|
164
|
+
'chart.key.text.color': 'black',
|
165
|
+
'chart.labels.position': 'bottom',
|
166
|
+
'chart.events.mousemove': null,
|
167
|
+
'chart.events.click': null,
|
168
|
+
'chart.border.inner': true,
|
169
|
+
'chart.clearto': 'rgba(0,0,0,0)'
|
170
|
+
}
|
171
|
+
|
172
|
+
|
173
|
+
// Check for support
|
174
|
+
if (!this.canvas) {
|
175
|
+
alert('[HPROGRESS] No canvas support');
|
176
|
+
return;
|
177
|
+
}
|
178
|
+
|
179
|
+
|
180
|
+
/**
|
181
|
+
* Create the dollar objects so that functions can be added to them
|
182
|
+
*/
|
183
|
+
var linear_data = RGraph.array_linearize(value);
|
184
|
+
for (var i=0; i<linear_data.length; ++i) {
|
185
|
+
this['$' + i] = {};
|
186
|
+
}
|
187
|
+
|
188
|
+
|
189
|
+
/**
|
190
|
+
* Translate half a pixel for antialiasing purposes - but only if it hasn't beeen
|
191
|
+
* done already
|
192
|
+
*/
|
193
|
+
if (!this.canvas.__rgraph_aa_translated__) {
|
194
|
+
this.context.translate(0.5,0.5);
|
195
|
+
|
196
|
+
this.canvas.__rgraph_aa_translated__ = true;
|
197
|
+
}
|
198
|
+
|
199
|
+
|
200
|
+
|
201
|
+
// Short variable names
|
202
|
+
var RG = RGraph,
|
203
|
+
ca = this.canvas,
|
204
|
+
co = ca.getContext('2d'),
|
205
|
+
prop = this.properties,
|
206
|
+
pa2 = RG.path2,
|
207
|
+
win = window,
|
208
|
+
doc = document,
|
209
|
+
ma = Math
|
210
|
+
|
211
|
+
|
212
|
+
|
213
|
+
/**
|
214
|
+
* "Decorate" the object with the generic effects if the effects library has been included
|
215
|
+
*/
|
216
|
+
if (RG.Effects && typeof RG.Effects.decorate === 'function') {
|
217
|
+
RG.Effects.decorate(this);
|
218
|
+
}
|
219
|
+
|
220
|
+
|
221
|
+
|
222
|
+
|
223
|
+
/**
|
224
|
+
* A generic setter
|
225
|
+
*
|
226
|
+
* @param string name The name of the property to set
|
227
|
+
* @param string value The value of the poperty
|
228
|
+
*/
|
229
|
+
this.set =
|
230
|
+
this.Set = function (name)
|
231
|
+
{
|
232
|
+
var value = typeof arguments[1] === 'undefined' ? null : arguments[1];
|
233
|
+
|
234
|
+
/**
|
235
|
+
* the number of arguments is only one and it's an
|
236
|
+
* object - parse it for configuration data and return.
|
237
|
+
*/
|
238
|
+
if (arguments.length === 1 && typeof name === 'object') {
|
239
|
+
RG.parseObjectStyleConfig(this, name);
|
240
|
+
return this;
|
241
|
+
}
|
242
|
+
|
243
|
+
|
244
|
+
|
245
|
+
|
246
|
+
|
247
|
+
/**
|
248
|
+
* This should be done first - prepend the propertyy name with "chart." if necessary
|
249
|
+
*/
|
250
|
+
if (name.substr(0,6) != 'chart.') {
|
251
|
+
name = 'chart.' + name;
|
252
|
+
}
|
253
|
+
|
254
|
+
|
255
|
+
|
256
|
+
|
257
|
+
// Convert uppercase letters to dot+lower case letter
|
258
|
+
while(name.match(/([A-Z])/)) {
|
259
|
+
name = name.replace(/([A-Z])/, '.' + RegExp.$1.toLowerCase());
|
260
|
+
}
|
261
|
+
|
262
|
+
|
263
|
+
/**
|
264
|
+
* chart.strokestyle now sets both chart.strokestyle.inner and chart.strokestyle.outer
|
265
|
+
*/
|
266
|
+
if (name == 'chart.strokestyle') {
|
267
|
+
this.Set('chart.strokestyle.inner', value);
|
268
|
+
this.Set('chart.strokestyle.outer', value);
|
269
|
+
return;
|
270
|
+
}
|
271
|
+
|
272
|
+
|
273
|
+
|
274
|
+
|
275
|
+
|
276
|
+
|
277
|
+
prop[name] = value;
|
278
|
+
|
279
|
+
return this;
|
280
|
+
};
|
281
|
+
|
282
|
+
|
283
|
+
|
284
|
+
|
285
|
+
/**
|
286
|
+
* A generic getter
|
287
|
+
*
|
288
|
+
* @param string name The name of the property to get
|
289
|
+
*/
|
290
|
+
this.get =
|
291
|
+
this.Get = function (name)
|
292
|
+
{
|
293
|
+
/**
|
294
|
+
* This should be done first - prepend the property name with "chart." if necessary
|
295
|
+
*/
|
296
|
+
if (name.substr(0,6) != 'chart.') {
|
297
|
+
name = 'chart.' + name;
|
298
|
+
}
|
299
|
+
|
300
|
+
// Convert uppercase letters to dot+lower case letter
|
301
|
+
while(name.match(/([A-Z])/)) {
|
302
|
+
name = name.replace(/([A-Z])/, '.' + RegExp.$1.toLowerCase());
|
303
|
+
}
|
304
|
+
|
305
|
+
return prop[name.toLowerCase()];
|
306
|
+
};
|
307
|
+
|
308
|
+
|
309
|
+
|
310
|
+
|
311
|
+
/**
|
312
|
+
* Draws the progress bar
|
313
|
+
*/
|
314
|
+
this.draw =
|
315
|
+
this.Draw = function ()
|
316
|
+
{
|
317
|
+
/**
|
318
|
+
* Fire the onbeforedraw event
|
319
|
+
*/
|
320
|
+
RG.fireCustomEvent(this, 'onbeforedraw');
|
321
|
+
|
322
|
+
|
323
|
+
|
324
|
+
/**
|
325
|
+
* Parse the colors. This allows for simple gradient syntax
|
326
|
+
*/
|
327
|
+
if (!this.colorsParsed) {
|
328
|
+
|
329
|
+
this.parseColors();
|
330
|
+
|
331
|
+
|
332
|
+
// Don't want to do this again
|
333
|
+
this.colorsParsed = true;
|
334
|
+
}
|
335
|
+
|
336
|
+
|
337
|
+
/**
|
338
|
+
* Set the current value
|
339
|
+
*/
|
340
|
+
this.currentValue = this.value;
|
341
|
+
|
342
|
+
/**
|
343
|
+
* This is new in May 2011 and facilitates individual gutter settings,
|
344
|
+
* eg chart.gutter.left
|
345
|
+
*/
|
346
|
+
this.gutterLeft = prop['chart.gutter.left'];
|
347
|
+
this.gutterRight = prop['chart.gutter.right'];
|
348
|
+
this.gutterTop = prop['chart.gutter.top'];
|
349
|
+
this.gutterBottom = prop['chart.gutter.bottom'];
|
350
|
+
|
351
|
+
// Figure out the width and height
|
352
|
+
this.width = ca.width - this.gutterLeft - this.gutterRight;
|
353
|
+
this.height = ca.height - this.gutterTop - this.gutterBottom;
|
354
|
+
this.coords = [];
|
355
|
+
this.coordsText = [];
|
356
|
+
|
357
|
+
this.drawbar();
|
358
|
+
this.DrawTickMarks();
|
359
|
+
this.DrawLabels();
|
360
|
+
this.DrawTitle();
|
361
|
+
|
362
|
+
//co.stroke();
|
363
|
+
//co.fill();
|
364
|
+
|
365
|
+
|
366
|
+
/**
|
367
|
+
* Draw the bevel effect if requested
|
368
|
+
*/
|
369
|
+
if (prop['chart.bevel']) {
|
370
|
+
this.DrawBevel();
|
371
|
+
}
|
372
|
+
|
373
|
+
|
374
|
+
/**
|
375
|
+
* Setup the context menu if required
|
376
|
+
*/
|
377
|
+
if (prop['chart.contextmenu']) {
|
378
|
+
RG.ShowContext(this);
|
379
|
+
}
|
380
|
+
|
381
|
+
|
382
|
+
// Draw the key if necessary
|
383
|
+
if (prop['chart.key'] && prop['chart.key'].length) {
|
384
|
+
RG.DrawKey(this, prop['chart.key'], prop['chart.colors']);
|
385
|
+
}
|
386
|
+
|
387
|
+
|
388
|
+
/**
|
389
|
+
* This function enables resizing
|
390
|
+
*/
|
391
|
+
if (prop['chart.resizable']) {
|
392
|
+
RG.AllowResizing(this);
|
393
|
+
}
|
394
|
+
|
395
|
+
|
396
|
+
|
397
|
+
/**
|
398
|
+
* This installs the event listeners
|
399
|
+
*/
|
400
|
+
RG.InstallEventListeners(this);
|
401
|
+
|
402
|
+
/**
|
403
|
+
* Fire the onfirstdraw event
|
404
|
+
*/
|
405
|
+
if (this.firstDraw) {
|
406
|
+
RG.fireCustomEvent(this, 'onfirstdraw');
|
407
|
+
this.firstDraw = false;
|
408
|
+
this.firstDrawFunc();
|
409
|
+
}
|
410
|
+
|
411
|
+
|
412
|
+
/**
|
413
|
+
* Fire the RGraph ondraw event
|
414
|
+
*/
|
415
|
+
RG.FireCustomEvent(this, 'ondraw');
|
416
|
+
|
417
|
+
return this;
|
418
|
+
};
|
419
|
+
|
420
|
+
|
421
|
+
|
422
|
+
/**
|
423
|
+
* Used in chaining. Runs a function there and then - not waiting for
|
424
|
+
* the events to fire (eg the onbeforedraw event)
|
425
|
+
*
|
426
|
+
* @param function func The function to execute
|
427
|
+
*/
|
428
|
+
this.exec = function (func)
|
429
|
+
{
|
430
|
+
func(this);
|
431
|
+
|
432
|
+
return this;
|
433
|
+
};
|
434
|
+
|
435
|
+
|
436
|
+
|
437
|
+
|
438
|
+
/**
|
439
|
+
* Draws the bar
|
440
|
+
*/
|
441
|
+
this.drawbar =
|
442
|
+
this.Drawbar = function ()
|
443
|
+
{
|
444
|
+
/**
|
445
|
+
* First get the scale
|
446
|
+
*/
|
447
|
+
this.scale2 = RG.getScale2(this, {
|
448
|
+
'max':this.max,
|
449
|
+
'min':this.min,
|
450
|
+
'strict':true,
|
451
|
+
'scale.thousand': prop['chart.scale.thousand'],
|
452
|
+
'scale.point': prop['chart.scale.point'],
|
453
|
+
'scale.decimals': prop['chart.scale.decimals'],
|
454
|
+
'ylabels.count': prop['chart.labels.count'],
|
455
|
+
'scale.round': prop['chart.scale.round'],
|
456
|
+
'units.pre': prop['chart.units.pre'],
|
457
|
+
'units.post': prop['chart.units.post']
|
458
|
+
});
|
459
|
+
|
460
|
+
// Set a shadow if requested
|
461
|
+
if (prop['chart.shadow']) {
|
462
|
+
RG.SetShadow(this, prop['chart.shadow.color'], prop['chart.shadow.offsetx'], prop['chart.shadow.offsety'], prop['chart.shadow.blur']);
|
463
|
+
}
|
464
|
+
|
465
|
+
// Draw the outline
|
466
|
+
co.fillStyle = prop['chart.background.color'];
|
467
|
+
co.strokeStyle = prop['chart.strokestyle.outer'];
|
468
|
+
co.strokeRect(this.gutterLeft, this.gutterTop, this.width, this.height);
|
469
|
+
co.fillRect(this.gutterLeft, this.gutterTop, this.width, this.height);
|
470
|
+
|
471
|
+
// Turn off any shadow
|
472
|
+
RG.noShadow(this);
|
473
|
+
|
474
|
+
co.fillStyle = prop['chart.colors'][0];
|
475
|
+
co.strokeStyle = prop['chart.strokestyle.outer'];
|
476
|
+
|
477
|
+
var margin = prop['chart.margin'];
|
478
|
+
|
479
|
+
// Draw the actual bar itself
|
480
|
+
var barWidth = ma.min(this.width, ((RG.array_sum(this.value) - this.min) / (this.max - this.min) ) * this.width);
|
481
|
+
|
482
|
+
if (prop['chart.tickmarks.inner']) {
|
483
|
+
|
484
|
+
var spacing = (ca.width - this.gutterLeft - this.gutterRight) / prop['chart.numticks.inner'];
|
485
|
+
|
486
|
+
co.lineWidth = 1;
|
487
|
+
co.strokeStyle = prop['chart.strokestyle.outer'];
|
488
|
+
|
489
|
+
co.beginPath();
|
490
|
+
for (var x = this.gutterLeft; x<ca.width - this.gutterRight; x+=spacing) {
|
491
|
+
co.moveTo(Math.round(x), this.gutterTop);
|
492
|
+
co.lineTo(Math.round(x), this.gutterTop + 2);
|
493
|
+
|
494
|
+
co.moveTo(Math.round(x), ca.height - this.gutterBottom);
|
495
|
+
co.lineTo(Math.round(x), ca.height - this.gutterBottom - 2);
|
496
|
+
}
|
497
|
+
co.stroke();
|
498
|
+
}
|
499
|
+
|
500
|
+
|
501
|
+
/**
|
502
|
+
* This bit draws the actual progress bar
|
503
|
+
*/
|
504
|
+
if (typeof this.value === 'number') {
|
505
|
+
|
506
|
+
if (prop['chart.border.inner']) {
|
507
|
+
this.drawCurvedBar({
|
508
|
+
x: this.gutterLeft,
|
509
|
+
y: this.gutterTop + margin,
|
510
|
+
width: barWidth,
|
511
|
+
height: this.height - margin - margin,
|
512
|
+
stroke: prop['chart.strokestyle.inner']
|
513
|
+
});
|
514
|
+
}
|
515
|
+
|
516
|
+
this.drawCurvedBar({
|
517
|
+
x: this.gutterLeft,
|
518
|
+
y: this.gutterTop + margin,
|
519
|
+
width: barWidth,
|
520
|
+
height: this.height - margin - margin,
|
521
|
+
fill: prop['chart.colors'][0]
|
522
|
+
});
|
523
|
+
|
524
|
+
// Store the coords
|
525
|
+
this.coords.push([
|
526
|
+
this.gutterLeft,
|
527
|
+
this.gutterTop + margin,
|
528
|
+
barWidth,
|
529
|
+
this.height - margin - margin
|
530
|
+
]);
|
531
|
+
|
532
|
+
} else if (typeof this.value === 'object') {
|
533
|
+
|
534
|
+
co.beginPath();
|
535
|
+
|
536
|
+
var startPoint = this.gutterLeft;
|
537
|
+
|
538
|
+
for (var i=0,len=this.value.length; i<len; ++i) {
|
539
|
+
|
540
|
+
var segmentLength = (this.value[i] / RG.arraySum(this.value)) * barWidth;
|
541
|
+
|
542
|
+
if (prop['chart.border.inner']) {
|
543
|
+
this.drawCurvedBar({
|
544
|
+
x: startPoint,
|
545
|
+
y: this.gutterTop + margin,
|
546
|
+
width: segmentLength,
|
547
|
+
height: this.height - margin - margin,
|
548
|
+
fill: prop['chart.colors'][i],
|
549
|
+
stroke: prop['chart.strokestyle.inner']
|
550
|
+
});
|
551
|
+
}
|
552
|
+
|
553
|
+
this.drawCurvedBar({
|
554
|
+
x: startPoint,
|
555
|
+
y: this.gutterTop + margin,
|
556
|
+
width: segmentLength,
|
557
|
+
height: this.height - margin - margin,
|
558
|
+
fill: prop['chart.colors'][i]
|
559
|
+
});
|
560
|
+
|
561
|
+
|
562
|
+
// Store the coords
|
563
|
+
this.coords.push([
|
564
|
+
startPoint,
|
565
|
+
this.gutterTop + margin,
|
566
|
+
segmentLength,
|
567
|
+
this.height - margin - margin
|
568
|
+
]);
|
569
|
+
|
570
|
+
startPoint += segmentLength;
|
571
|
+
}
|
572
|
+
}
|
573
|
+
|
574
|
+
/**
|
575
|
+
* Draw the arrows indicating the level if requested
|
576
|
+
*/
|
577
|
+
if (prop['chart.arrows']) {
|
578
|
+
var x = this.gutterLeft + barWidth;
|
579
|
+
var y = this.gutterTop;
|
580
|
+
|
581
|
+
co.lineWidth = 1;
|
582
|
+
co.fillStyle = 'black';
|
583
|
+
co.strokeStyle = 'black';
|
584
|
+
|
585
|
+
co.beginPath();
|
586
|
+
co.moveTo(x, y - 3);
|
587
|
+
co.lineTo(x + 2, y - 7);
|
588
|
+
co.lineTo(x - 2, y - 7);
|
589
|
+
co.closePath();
|
590
|
+
|
591
|
+
co.stroke();
|
592
|
+
co.fill();
|
593
|
+
|
594
|
+
co.beginPath();
|
595
|
+
co.moveTo(x, y + this.height + 4);
|
596
|
+
co.lineTo(x + 2, y + this.height + 9);
|
597
|
+
co.lineTo(x - 2, y + this.height + 9);
|
598
|
+
co.closePath();
|
599
|
+
|
600
|
+
co.stroke();
|
601
|
+
co.fill()
|
602
|
+
}
|
603
|
+
|
604
|
+
|
605
|
+
/**
|
606
|
+
* Draw the "in-bar" label
|
607
|
+
*/
|
608
|
+
if (prop['chart.label.inner']) {
|
609
|
+
co.fillStyle = 'black';
|
610
|
+
RG.Text2(this, {
|
611
|
+
'font':prop['chart.text.font'],
|
612
|
+
'size':prop['chart.text.size'] + 2,
|
613
|
+
'x':this.gutterLeft + barWidth + 5,
|
614
|
+
'y':this.gutterTop + (this.height / 2),
|
615
|
+
'text': String(prop['chart.units.pre'] + this.value + prop['chart.units.post']),
|
616
|
+
'valign':'bottom',
|
617
|
+
'halign':'left',
|
618
|
+
'bounding':true,
|
619
|
+
'boundingFill':'white',
|
620
|
+
'tag': 'label.inner'
|
621
|
+
});
|
622
|
+
}
|
623
|
+
|
624
|
+
// This is here to stop colors being changed by later fillszs etc
|
625
|
+
pa2(co, 'b');
|
626
|
+
};
|
627
|
+
|
628
|
+
|
629
|
+
|
630
|
+
|
631
|
+
/**
|
632
|
+
* The function that draws the tick marks. Apt name...
|
633
|
+
*/
|
634
|
+
this.drawTickMarks =
|
635
|
+
this.DrawTickMarks = function ()
|
636
|
+
{
|
637
|
+
co.strokeStyle = prop['chart.tickmarks.color'];
|
638
|
+
|
639
|
+
if (prop['chart.tickmarks']) {
|
640
|
+
|
641
|
+
co.beginPath();
|
642
|
+
|
643
|
+
// This is used by the label function below
|
644
|
+
this.tickInterval = this.width / prop['chart.numticks'];
|
645
|
+
|
646
|
+
var start = prop['chart.tickmarks.zerostart'] ? 0 : this.tickInterval;
|
647
|
+
|
648
|
+
if (prop['chart.labels.position'] == 'top') {
|
649
|
+
for (var i=this.gutterLeft + start; i<=(this.width + this.gutterLeft + 0.1); i+=this.tickInterval) {
|
650
|
+
co.moveTo(Math.round(i), this.gutterTop);
|
651
|
+
co.lineTo(Math.round(i), this.gutterTop - 4);
|
652
|
+
}
|
653
|
+
|
654
|
+
} else {
|
655
|
+
|
656
|
+
for (var i=this.gutterLeft + start; i<=(this.width + this.gutterLeft + 0.1); i+=this.tickInterval) {
|
657
|
+
co.moveTo(Math.round(i), this.gutterTop + this.height);
|
658
|
+
co.lineTo(Math.round(i), this.gutterTop + this.height + 4);
|
659
|
+
}
|
660
|
+
}
|
661
|
+
|
662
|
+
co.stroke();
|
663
|
+
}
|
664
|
+
};
|
665
|
+
|
666
|
+
|
667
|
+
|
668
|
+
|
669
|
+
/**
|
670
|
+
* The function that draws the labels
|
671
|
+
*/
|
672
|
+
this.drawLabels =
|
673
|
+
this.DrawLabels = function ()
|
674
|
+
{
|
675
|
+
if (!RG.is_null(prop['chart.labels.specific'])) {
|
676
|
+
return this.DrawSpecificLabels();
|
677
|
+
}
|
678
|
+
|
679
|
+
co.fillStyle = prop['chart.text.color'];
|
680
|
+
|
681
|
+
var xPoints = [],
|
682
|
+
yPoints = [],
|
683
|
+
font = prop['chart.text.font'],
|
684
|
+
size = prop['chart.text.size'],
|
685
|
+
offsetx = prop['chart.labels.offsetx'],
|
686
|
+
offsety = prop['chart.labels.offsety'];
|
687
|
+
|
688
|
+
for (i=0,len=this.scale2.labels.length; i<len; i++) {
|
689
|
+
|
690
|
+
|
691
|
+
if (prop['chart.labels.position'] == 'top') {
|
692
|
+
var x = this.width * (i/this.scale2.labels.length) + this.gutterLeft + (this.width / this.scale2.labels.length);
|
693
|
+
var y = this.gutterTop - 6;
|
694
|
+
var valign = 'bottom';
|
695
|
+
} else {
|
696
|
+
var x = this.width * (i/this.scale2.labels.length) + this.gutterLeft + (this.width / this.scale2.labels.length);
|
697
|
+
var y = this.height + this.gutterTop + 4;
|
698
|
+
var valign = 'top';
|
699
|
+
}
|
700
|
+
|
701
|
+
RG.text2(this, {
|
702
|
+
'font':font,
|
703
|
+
'size':size,
|
704
|
+
'x':x + offsetx,
|
705
|
+
'y':y + offsety,
|
706
|
+
'text': this.scale2.labels[i],
|
707
|
+
'valign':valign,
|
708
|
+
'halign':'center',
|
709
|
+
'tag': 'scale'
|
710
|
+
});
|
711
|
+
}
|
712
|
+
|
713
|
+
if (prop['chart.tickmarks.zerostart']) {
|
714
|
+
if (prop['chart.labels.position'] == 'top') {
|
715
|
+
RG.text2(this, {
|
716
|
+
'font':font,
|
717
|
+
'size':size,
|
718
|
+
'x':this.gutterLeft + offsetx,
|
719
|
+
'y':this.gutterTop - 6 + offsety,
|
720
|
+
'text': prop['chart.units.pre'] + Number(this.min).toFixed(this.min > 0 ? prop['chart.scale.decimals'] : 0) + prop['chart.units.post'],
|
721
|
+
'valign':'bottom',
|
722
|
+
'halign':'center',
|
723
|
+
'tag': 'scale'
|
724
|
+
});
|
725
|
+
} else {
|
726
|
+
RG.text2(this, {
|
727
|
+
'font':font,
|
728
|
+
'size':size,
|
729
|
+
'x':this.gutterLeft + offsetx,
|
730
|
+
'y':ca.height - this.gutterBottom + 5 + offsety,
|
731
|
+
'text': prop['chart.units.pre'] + Number(this.min).toFixed(this.min > 0 ? prop['chart.scale.decimals'] : 0) + prop['chart.units.post'],
|
732
|
+
'valign':'top',
|
733
|
+
'halign':'center',
|
734
|
+
'tag': 'scale'
|
735
|
+
});
|
736
|
+
}
|
737
|
+
}
|
738
|
+
};
|
739
|
+
|
740
|
+
|
741
|
+
|
742
|
+
|
743
|
+
/**
|
744
|
+
* Returns the focused bar
|
745
|
+
*
|
746
|
+
* @param event e The event object
|
747
|
+
*/
|
748
|
+
this.getShape =
|
749
|
+
this.getBar = function (e)
|
750
|
+
{
|
751
|
+
var mouseXY = RG.getMouseXY(e),
|
752
|
+
mouseX = mouseXY[0],
|
753
|
+
mouseY = mouseXY[1];
|
754
|
+
|
755
|
+
for (var i=0,len=this.coords.length; i<len; i++) {
|
756
|
+
|
757
|
+
var x = this.coords[i][0],
|
758
|
+
y = this.coords[i][1],
|
759
|
+
w = this.coords[i][2],
|
760
|
+
h = this.coords[i][3],
|
761
|
+
idx = i;
|
762
|
+
|
763
|
+
co.beginPath();
|
764
|
+
this.drawCurvedBar({
|
765
|
+
x: x,
|
766
|
+
y: y,
|
767
|
+
height: h,
|
768
|
+
width: w
|
769
|
+
});
|
770
|
+
|
771
|
+
if (co.isPointInPath(mouseX, mouseY)) {
|
772
|
+
|
773
|
+
var tooltip = RG.parseTooltipText(prop['chart.tooltips'], idx);
|
774
|
+
|
775
|
+
return {
|
776
|
+
0: this, 1: x, 2: y, 3: w, 4: h, 5: idx,
|
777
|
+
'object':this, 'x':x, 'y':y, 'width': w, 'height': h, 'index': idx, 'tooltip': tooltip
|
778
|
+
}
|
779
|
+
}
|
780
|
+
}
|
781
|
+
};
|
782
|
+
|
783
|
+
|
784
|
+
|
785
|
+
|
786
|
+
/**
|
787
|
+
* This function returns the value that the mouse is positioned at, regardless of
|
788
|
+
* the actual indicated value.
|
789
|
+
*
|
790
|
+
* @param object e The event object
|
791
|
+
*/
|
792
|
+
this.getValue = function (e)
|
793
|
+
{
|
794
|
+
var mouseXY = RG.getMouseXY(e);
|
795
|
+
|
796
|
+
var value = (mouseXY[0] - this.gutterLeft) / this.width;
|
797
|
+
value *= this.max - this.min;
|
798
|
+
value += this.min;
|
799
|
+
|
800
|
+
if (mouseXY[0] < this.gutterLeft) {
|
801
|
+
value = this.min;
|
802
|
+
}
|
803
|
+
if (mouseXY[0] > (ca.width - this.gutterRight) ) {
|
804
|
+
value = this.max
|
805
|
+
}
|
806
|
+
|
807
|
+
return value;
|
808
|
+
};
|
809
|
+
|
810
|
+
|
811
|
+
|
812
|
+
|
813
|
+
/**
|
814
|
+
* Each object type has its own Highlight() function which highlights the appropriate shape
|
815
|
+
*
|
816
|
+
* @param object shape The shape to highlight
|
817
|
+
*/
|
818
|
+
this.highlight =
|
819
|
+
this.Highlight = function (shape)
|
820
|
+
{
|
821
|
+
var last = shape.index === this.coords.length - 1;
|
822
|
+
|
823
|
+
if (typeof prop['chart.highlight.style'] === 'function') {
|
824
|
+
(prop['chart.highlight.style'])(shape);
|
825
|
+
} else {
|
826
|
+
|
827
|
+
this.drawCurvedBar({
|
828
|
+
x: shape.x,
|
829
|
+
y: shape.y,
|
830
|
+
width: shape.width,
|
831
|
+
height: shape.height,
|
832
|
+
stroke: prop['chart.highlight.stroke'],
|
833
|
+
fill: prop['chart.highlight.fill']
|
834
|
+
});
|
835
|
+
}
|
836
|
+
};
|
837
|
+
|
838
|
+
|
839
|
+
|
840
|
+
|
841
|
+
/**
|
842
|
+
* The getObjectByXY() worker method. Don't call this call:
|
843
|
+
*
|
844
|
+
* RGraph.ObjectRegistry.getObjectByXY(e)
|
845
|
+
*
|
846
|
+
* @param object e The event object
|
847
|
+
*/
|
848
|
+
this.getObjectByXY = function (e)
|
849
|
+
{
|
850
|
+
var mouseXY = RG.getMouseXY(e);
|
851
|
+
|
852
|
+
if (
|
853
|
+
mouseXY[0] > this.gutterLeft
|
854
|
+
&& mouseXY[0] < (ca.width - this.gutterRight)
|
855
|
+
&& mouseXY[1] > this.gutterTop
|
856
|
+
&& mouseXY[1] < (ca.height - this.gutterBottom)
|
857
|
+
) {
|
858
|
+
|
859
|
+
return this;
|
860
|
+
}
|
861
|
+
};
|
862
|
+
|
863
|
+
|
864
|
+
|
865
|
+
|
866
|
+
/**
|
867
|
+
* This method handles the adjusting calculation for when the mouse is moved
|
868
|
+
*
|
869
|
+
* @param object e The event object
|
870
|
+
*/
|
871
|
+
this.adjusting_mousemove =
|
872
|
+
this.Adjusting_mousemove = function (e)
|
873
|
+
{
|
874
|
+
/**
|
875
|
+
* Handle adjusting for the HProgress
|
876
|
+
*/
|
877
|
+
if (prop['chart.adjustable'] && RG.Registry.Get('chart.adjusting') && RG.Registry.Get('chart.adjusting').uid == this.uid) {
|
878
|
+
|
879
|
+
var mouseXY = RG.getMouseXY(e);
|
880
|
+
var value = this.getValue(e);
|
881
|
+
|
882
|
+
if (typeof(value) == 'number') {
|
883
|
+
|
884
|
+
this.value = Number(value.toFixed(prop['chart.scale.decimals']));
|
885
|
+
RG.redrawCanvas(ca);
|
886
|
+
|
887
|
+
// Fire the onadjust event
|
888
|
+
RG.fireCustomEvent(this, 'onadjust');
|
889
|
+
}
|
890
|
+
}
|
891
|
+
};
|
892
|
+
|
893
|
+
|
894
|
+
|
895
|
+
|
896
|
+
/**
|
897
|
+
* Draws chart.labels.specific
|
898
|
+
*/
|
899
|
+
this.drawSpecificLabels =
|
900
|
+
this.DrawSpecificLabels = function ()
|
901
|
+
{
|
902
|
+
var labels = prop['chart.labels.specific'];
|
903
|
+
|
904
|
+
if (labels) {
|
905
|
+
|
906
|
+
var font = prop['chart.text.font'],
|
907
|
+
size = prop['chart.text.size'],
|
908
|
+
valign = (prop['chart.labels.position'] == 'top' ? 'bottom' : 'top'),
|
909
|
+
step = this.width / (labels.length - 1),
|
910
|
+
offsetx = prop['chart.labels.offsetx'],
|
911
|
+
offsety = prop['chart.labels.offsety']
|
912
|
+
|
913
|
+
co.beginPath();
|
914
|
+
co.fillStyle = prop['chart.text.color'];
|
915
|
+
for (var i=0; i<labels.length; ++i) {
|
916
|
+
RG.Text2(this, {
|
917
|
+
font:font,
|
918
|
+
size:size,
|
919
|
+
x: this.gutterLeft + (step * i) + offsetx,
|
920
|
+
y: prop['chart.labels.position'] == 'top' ? this.gutterTop - 7 + offsety: ca.height - this.gutterBottom + 7 + offsety,
|
921
|
+
text: labels[i],
|
922
|
+
valign:valign,
|
923
|
+
halign:'center',
|
924
|
+
tag: 'labels.specific'
|
925
|
+
});
|
926
|
+
}
|
927
|
+
co.fill();
|
928
|
+
}
|
929
|
+
};
|
930
|
+
|
931
|
+
|
932
|
+
|
933
|
+
|
934
|
+
/**
|
935
|
+
* This function positions a tooltip when it is displayed
|
936
|
+
*
|
937
|
+
* @param obj object The chart object
|
938
|
+
* @param int x The X coordinate specified for the tooltip
|
939
|
+
* @param int y The Y coordinate specified for the tooltip
|
940
|
+
* @param objec tooltip The tooltips DIV element
|
941
|
+
*
|
942
|
+
this.positionTooltip = function (obj, x, y, tooltip, idx)
|
943
|
+
{
|
944
|
+
var coordX = obj.coords[tooltip.__index__][0];
|
945
|
+
var coordY = obj.coords[tooltip.__index__][1];
|
946
|
+
var coordW = obj.coords[tooltip.__index__][2];
|
947
|
+
var coordH = obj.coords[tooltip.__index__][3];
|
948
|
+
var canvasXY = RG.getCanvasXY(obj.canvas);
|
949
|
+
var gutterLeft = this.gutterLeft;
|
950
|
+
var gutterTop = this.gutterTop;
|
951
|
+
var width = tooltip.offsetWidth;
|
952
|
+
var height = tooltip.offsetHeight;
|
953
|
+
var mouseXY = RG.getMouseXY(window.event);
|
954
|
+
|
955
|
+
// Set the top position
|
956
|
+
tooltip.style.left = 0;
|
957
|
+
tooltip.style.top = window.event.pageY - height - 5 + 'px';
|
958
|
+
|
959
|
+
// By default any overflow is hidden
|
960
|
+
tooltip.style.overflow = '';
|
961
|
+
|
962
|
+
// Reposition the tooltip if at the edges:
|
963
|
+
|
964
|
+
// LEFT edge
|
965
|
+
if (canvasXY[0] + mouseXY[0] - (width / 2) < 0) {
|
966
|
+
tooltip.style.left = canvasXY[0] + mouseXY[0] - (width * 0.1) + 'px';
|
967
|
+
|
968
|
+
// RIGHT edge
|
969
|
+
} else if (canvasXY[0] + mouseXY[0] + (width / 2) > doc.body.offsetWidth) {
|
970
|
+
tooltip.style.left = canvasXY[0] + mouseXY[0] - (width * 0.9) + 'px';
|
971
|
+
|
972
|
+
// Default positioning - CENTERED
|
973
|
+
} else {
|
974
|
+
tooltip.style.left = canvasXY[0] + mouseXY[0] - (width / 2) + 'px';
|
975
|
+
}
|
976
|
+
};*/
|
977
|
+
|
978
|
+
|
979
|
+
|
980
|
+
|
981
|
+
/**
|
982
|
+
* This function returns the appropriate X coordinate for the given value
|
983
|
+
*
|
984
|
+
* @param int value The value you want the coordinate for
|
985
|
+
* @returm int The coordinate
|
986
|
+
*/
|
987
|
+
this.getXCoord = function (value)
|
988
|
+
{
|
989
|
+
var min = this.min;
|
990
|
+
|
991
|
+
if (value < min || value > this.max) {
|
992
|
+
return null;
|
993
|
+
}
|
994
|
+
|
995
|
+
var barWidth = ca.width - this.gutterLeft - this.gutterRight;
|
996
|
+
var coord = ((value - min) / (this.max - min)) * barWidth;
|
997
|
+
coord = this.gutterLeft + coord;
|
998
|
+
|
999
|
+
return coord;
|
1000
|
+
};
|
1001
|
+
|
1002
|
+
|
1003
|
+
|
1004
|
+
|
1005
|
+
/**
|
1006
|
+
* This returns true/false as to whether the cursor is over the chart area.
|
1007
|
+
* The cursor does not necessarily have to be over the bar itself.
|
1008
|
+
*/
|
1009
|
+
this.overChartArea = function (e)
|
1010
|
+
{
|
1011
|
+
var mouseXY = RGraph.getMouseXY(e);
|
1012
|
+
var mouseX = mouseXY[0];
|
1013
|
+
var mouseY = mouseXY[1];
|
1014
|
+
|
1015
|
+
if ( mouseX >= this.gutterLeft
|
1016
|
+
&& mouseX <= (ca.width - this.gutterRight)
|
1017
|
+
&& mouseY >= this.gutterTop
|
1018
|
+
&& mouseY <= (ca.height - this.gutterBottom)
|
1019
|
+
) {
|
1020
|
+
|
1021
|
+
return true;
|
1022
|
+
}
|
1023
|
+
|
1024
|
+
return false;
|
1025
|
+
};
|
1026
|
+
|
1027
|
+
|
1028
|
+
|
1029
|
+
|
1030
|
+
/**
|
1031
|
+
*
|
1032
|
+
*/
|
1033
|
+
this.parseColors = function ()
|
1034
|
+
{
|
1035
|
+
|
1036
|
+
// Save the original colors so that they can be restored when the canvas is reset
|
1037
|
+
if (this.original_colors.length === 0) {
|
1038
|
+
this.original_colors['chart.colors'] = RG.array_clone(prop['chart.colors']);
|
1039
|
+
this.original_colors['chart.tickmarks.color'] = RG.array_clone(prop['chart.tickmarks.color']);
|
1040
|
+
this.original_colors['chart.strokestyle.inner'] = RG.array_clone(prop['chart.strokestyle.inner']);
|
1041
|
+
this.original_colors['chart.strokestyle.outer'] = RG.array_clone(prop['chart.strokestyle.outer']);
|
1042
|
+
this.original_colors['chart.highlight.fill'] = RG.array_clone(prop['chart.highlight.fill']);
|
1043
|
+
this.original_colors['chart.highlight.stroke'] = RG.array_clone(prop['chart.highlight.stroke']);
|
1044
|
+
this.original_colors['chart.highlight.color'] = RG.array_clone(prop['chart.highlight.color']);
|
1045
|
+
}
|
1046
|
+
|
1047
|
+
|
1048
|
+
|
1049
|
+
|
1050
|
+
var colors = prop['chart.colors'];
|
1051
|
+
|
1052
|
+
for (var i=0; i<colors.length; ++i) {
|
1053
|
+
colors[i] = this.parseSingleColorForGradient(colors[i]);
|
1054
|
+
}
|
1055
|
+
|
1056
|
+
prop['chart.tickmarks.color'] = this.parseSingleColorForGradient(prop['chart.tickmarks.color']);
|
1057
|
+
prop['chart.strokestyle.inner'] = this.parseSingleColorForGradient(prop['chart.strokestyle.inner']);
|
1058
|
+
prop['chart.strokestyle.outer'] = this.parseSingleColorForGradient(prop['chart.strokestyle.outer']);
|
1059
|
+
prop['chart.highlight.fill'] = this.parseSingleColorForGradient(prop['chart.highlight.fill']);
|
1060
|
+
prop['chart.highlight.stroke'] = this.parseSingleColorForGradient(prop['chart.highlight.stroke']);
|
1061
|
+
prop['chart.background.color'] = this.parseSingleColorForGradient(prop['chart.background.color']);
|
1062
|
+
};
|
1063
|
+
|
1064
|
+
|
1065
|
+
|
1066
|
+
|
1067
|
+
/**
|
1068
|
+
* Use this function to reset the object to the post-constructor state. Eg reset colors if
|
1069
|
+
* need be etc
|
1070
|
+
*/
|
1071
|
+
this.reset = function ()
|
1072
|
+
{
|
1073
|
+
};
|
1074
|
+
|
1075
|
+
|
1076
|
+
|
1077
|
+
|
1078
|
+
/**
|
1079
|
+
* This parses a single color value
|
1080
|
+
*/
|
1081
|
+
this.parseSingleColorForGradient = function (color)
|
1082
|
+
{
|
1083
|
+
if (!color || typeof(color) != 'string') {
|
1084
|
+
return color;
|
1085
|
+
}
|
1086
|
+
|
1087
|
+
if (color.match(/^gradient\((.*)\)$/i)) {
|
1088
|
+
|
1089
|
+
var parts = RegExp.$1.split(':');
|
1090
|
+
|
1091
|
+
// Create the gradient
|
1092
|
+
var grad = co.createLinearGradient(prop['chart.gutter.left'],0,ca.width - prop['chart.gutter.right'],0);
|
1093
|
+
|
1094
|
+
var diff = 1 / (parts.length - 1);
|
1095
|
+
|
1096
|
+
grad.addColorStop(0, RG.trim(parts[0]));
|
1097
|
+
|
1098
|
+
for (var j=1; j<parts.length; ++j) {
|
1099
|
+
grad.addColorStop(j * diff, RG.trim(parts[j]));
|
1100
|
+
}
|
1101
|
+
}
|
1102
|
+
|
1103
|
+
return grad ? grad : color;
|
1104
|
+
};
|
1105
|
+
|
1106
|
+
|
1107
|
+
|
1108
|
+
|
1109
|
+
/**
|
1110
|
+
* Draws the bevel effect
|
1111
|
+
*/
|
1112
|
+
this.drawBevel =
|
1113
|
+
this.DrawBevel = function ()
|
1114
|
+
{
|
1115
|
+
// In case of multiple segments - this adds up all the lengths
|
1116
|
+
for (var i=0,len=0; i<this.coords.length; ++i) len += this.coords[i][2];
|
1117
|
+
|
1118
|
+
co.save();
|
1119
|
+
// Draw a path to clip to
|
1120
|
+
co.beginPath();
|
1121
|
+
co.rect(
|
1122
|
+
this.coords[0][0],
|
1123
|
+
this.coords[0][1],
|
1124
|
+
len,
|
1125
|
+
this.coords[0][3]
|
1126
|
+
);
|
1127
|
+
co.clip();
|
1128
|
+
|
1129
|
+
co.save();
|
1130
|
+
// Draw a path to clip to
|
1131
|
+
co.beginPath();
|
1132
|
+
this.drawCurvedBar({
|
1133
|
+
x: this.coords[0][0],
|
1134
|
+
y: this.coords[0][1],
|
1135
|
+
width: len,
|
1136
|
+
height: this.coords[0][3]
|
1137
|
+
});
|
1138
|
+
co.clip();
|
1139
|
+
|
1140
|
+
// Now draw the rect with a shadow
|
1141
|
+
co.beginPath();
|
1142
|
+
|
1143
|
+
co.shadowColor = 'black';
|
1144
|
+
co.shadowOffsetX = 0;
|
1145
|
+
co.shadowOffsetY = 0;
|
1146
|
+
co.shadowBlur = 15;
|
1147
|
+
|
1148
|
+
co.lineWidth = 2;
|
1149
|
+
|
1150
|
+
this.drawCurvedBar({
|
1151
|
+
x: this.coords[0][0] - 51,
|
1152
|
+
y: this.coords[0][1] - 1,
|
1153
|
+
width: len + 52,
|
1154
|
+
height: this.coords[0][3] + 2
|
1155
|
+
});
|
1156
|
+
|
1157
|
+
co.stroke();
|
1158
|
+
|
1159
|
+
co.restore();
|
1160
|
+
co.restore();
|
1161
|
+
};
|
1162
|
+
|
1163
|
+
|
1164
|
+
|
1165
|
+
|
1166
|
+
/**
|
1167
|
+
* Draw the titles
|
1168
|
+
*/
|
1169
|
+
this.drawTitle =
|
1170
|
+
this.DrawTitle = function ()
|
1171
|
+
{
|
1172
|
+
// Draw the title text
|
1173
|
+
if (prop['chart.title'].length) {
|
1174
|
+
|
1175
|
+
var x = ((ca.width - this.gutterLeft - this.gutterRight) / 2) + this.gutterLeft;
|
1176
|
+
var text = prop['chart.title'];
|
1177
|
+
var size = prop['chart.title.size'] ? prop['chart.title.size'] : prop['chart.text.size'] + 2;
|
1178
|
+
var font = prop['chart.title.font'] ? prop['chart.title.font'] : prop['chart.text.font'];
|
1179
|
+
|
1180
|
+
if (prop['chart.labels.position'] == 'top') {
|
1181
|
+
y = ca.height - this.gutterBottom +5;
|
1182
|
+
x = ((ca.width - this.gutterLeft - this.gutterRight) / 2) + this.gutterLeft;
|
1183
|
+
valign = 'top';
|
1184
|
+
} else {
|
1185
|
+
x = ((ca.width - this.gutterLeft - this.gutterRight) / 2) + this.gutterLeft;
|
1186
|
+
y = this.gutterTop - 5;
|
1187
|
+
valign = 'bottom';
|
1188
|
+
}
|
1189
|
+
|
1190
|
+
|
1191
|
+
RG.Text2(this, {
|
1192
|
+
'font':font,
|
1193
|
+
'size':size,
|
1194
|
+
'x': typeof(prop['chart.title.x']) == 'number' ? prop['chart.title.x'] : x,
|
1195
|
+
'y': typeof(prop['chart.title.y']) == 'number' ? prop['chart.title.y'] : y,
|
1196
|
+
'text': text,
|
1197
|
+
'valign': prop['chart.title.valign'] ? prop['chart.title.valign'] : valign,
|
1198
|
+
'halign': prop['chart.title.halign'] ? prop['chart.title.halign'] : 'center',
|
1199
|
+
'bold':prop['chart.title.bold'],
|
1200
|
+
'bounding': prop['chart.title.background'] ? true : false,
|
1201
|
+
'boundingFill': prop['chart.title.background'],
|
1202
|
+
'tag': 'title'
|
1203
|
+
});
|
1204
|
+
}
|
1205
|
+
};
|
1206
|
+
|
1207
|
+
|
1208
|
+
|
1209
|
+
|
1210
|
+
/**
|
1211
|
+
* This function handles highlighting an entire data-series for the interactive
|
1212
|
+
* key
|
1213
|
+
*
|
1214
|
+
* @param int index The index of the data series to be highlighted
|
1215
|
+
*/
|
1216
|
+
this.interactiveKeyHighlight = function (index)
|
1217
|
+
{
|
1218
|
+
var coords = this.coords[index];
|
1219
|
+
|
1220
|
+
co.beginPath();
|
1221
|
+
|
1222
|
+
co.strokeStyle = prop['chart.key.interactive.highlight.chart.stroke'];
|
1223
|
+
co.lineWidth = 2;
|
1224
|
+
co.fillStyle = prop['chart.key.interactive.highlight.chart.fill'];
|
1225
|
+
|
1226
|
+
co.rect(coords[0], coords[1], coords[2], coords[3]);
|
1227
|
+
co.fill();
|
1228
|
+
co.stroke();
|
1229
|
+
|
1230
|
+
// Reset the linewidth
|
1231
|
+
co.lineWidth = 1;
|
1232
|
+
};
|
1233
|
+
|
1234
|
+
|
1235
|
+
|
1236
|
+
|
1237
|
+
/**
|
1238
|
+
* Using a function to add events makes it easier to facilitate method chaining
|
1239
|
+
*
|
1240
|
+
* @param string type The type of even to add
|
1241
|
+
* @param function func
|
1242
|
+
*/
|
1243
|
+
this.on = function (type, func)
|
1244
|
+
{
|
1245
|
+
if (type.substr(0,2) !== 'on') {
|
1246
|
+
type = 'on' + type;
|
1247
|
+
}
|
1248
|
+
|
1249
|
+
if (typeof this[type] !== 'function') {
|
1250
|
+
this[type] = func;
|
1251
|
+
} else {
|
1252
|
+
RG.addCustomEventListener(this, type, func);
|
1253
|
+
}
|
1254
|
+
|
1255
|
+
return this;
|
1256
|
+
};
|
1257
|
+
|
1258
|
+
|
1259
|
+
|
1260
|
+
|
1261
|
+
/**
|
1262
|
+
* Draws a bar with a curved end.
|
1263
|
+
*
|
1264
|
+
* DOESN'T DRAW A CURVED BAR ANY MORE - JUST A REGULAR SQUARE ENDED BAR
|
1265
|
+
*
|
1266
|
+
* @param object opt The coords and colours
|
1267
|
+
*/
|
1268
|
+
this.drawCurvedBar = function (opt)
|
1269
|
+
{
|
1270
|
+
pa2(co, 'b r % % % %',
|
1271
|
+
opt.x, opt.y,
|
1272
|
+
opt.width, opt.height
|
1273
|
+
);
|
1274
|
+
|
1275
|
+
if (opt.stroke) {
|
1276
|
+
co.strokeStyle = opt.stroke;
|
1277
|
+
co.stroke();
|
1278
|
+
}
|
1279
|
+
|
1280
|
+
if (opt.fill) {
|
1281
|
+
co.fillStyle = opt.fill;
|
1282
|
+
co.fill();
|
1283
|
+
}
|
1284
|
+
}
|
1285
|
+
|
1286
|
+
|
1287
|
+
|
1288
|
+
|
1289
|
+
/**
|
1290
|
+
* This function runs once only
|
1291
|
+
* (put at the end of the file (before any effects))
|
1292
|
+
*/
|
1293
|
+
this.firstDrawFunc = function ()
|
1294
|
+
{
|
1295
|
+
};
|
1296
|
+
|
1297
|
+
|
1298
|
+
|
1299
|
+
|
1300
|
+
/**
|
1301
|
+
* HProgress Grow effect (which is also the VPogress Grow effect)
|
1302
|
+
*
|
1303
|
+
* @param object obj The chart object
|
1304
|
+
*/
|
1305
|
+
this.grow = function ()
|
1306
|
+
{
|
1307
|
+
var obj = this;
|
1308
|
+
var canvas = obj.canvas;
|
1309
|
+
var context = obj.context;
|
1310
|
+
var initial_value = obj.currentValue;
|
1311
|
+
var opt = arguments[0] || {};
|
1312
|
+
var numFrames = opt.frames || 30;
|
1313
|
+
var frame = 0
|
1314
|
+
var callback = arguments[1] || function () {};
|
1315
|
+
|
1316
|
+
if (typeof obj.value === 'object') {
|
1317
|
+
|
1318
|
+
if (RG.is_null(obj.currentValue)) {
|
1319
|
+
obj.currentValue = [];
|
1320
|
+
for (var i=0,len=obj.value.length; i<len; ++i) {
|
1321
|
+
obj.currentValue[i] = 0;
|
1322
|
+
}
|
1323
|
+
}
|
1324
|
+
|
1325
|
+
var diff = [];
|
1326
|
+
var increment = [];
|
1327
|
+
|
1328
|
+
for (var i=0,len=obj.value.length; i<len; ++i) {
|
1329
|
+
diff[i] = obj.value[i] - Number(obj.currentValue[i]);
|
1330
|
+
increment[i] = diff[i] / numFrames;
|
1331
|
+
}
|
1332
|
+
|
1333
|
+
if (initial_value == null) {
|
1334
|
+
initial_value = [];
|
1335
|
+
for (var i=0,len=obj.value.length; i<len; ++i) {
|
1336
|
+
initial_value[i] = 0;
|
1337
|
+
}
|
1338
|
+
}
|
1339
|
+
|
1340
|
+
} else {
|
1341
|
+
|
1342
|
+
var diff = obj.value - Number(obj.currentValue);
|
1343
|
+
var increment = diff / numFrames;
|
1344
|
+
}
|
1345
|
+
|
1346
|
+
|
1347
|
+
|
1348
|
+
|
1349
|
+
|
1350
|
+
|
1351
|
+
function iterator ()
|
1352
|
+
{
|
1353
|
+
frame++;
|
1354
|
+
|
1355
|
+
if (frame <= numFrames) {
|
1356
|
+
|
1357
|
+
if (typeof obj.value == 'object') {
|
1358
|
+
obj.value = [];
|
1359
|
+
for (var i=0,len=initial_value.length; i<len; ++i) {
|
1360
|
+
obj.value[i] = initial_value[i] + (increment[i] * frame);
|
1361
|
+
}
|
1362
|
+
} else {
|
1363
|
+
obj.value = initial_value + (increment * frame);
|
1364
|
+
}
|
1365
|
+
|
1366
|
+
RGraph.clear(obj.canvas);
|
1367
|
+
RGraph.redrawCanvas(obj.canvas);
|
1368
|
+
|
1369
|
+
RGraph.Effects.updateCanvas(iterator);
|
1370
|
+
} else {
|
1371
|
+
callback();
|
1372
|
+
}
|
1373
|
+
}
|
1374
|
+
|
1375
|
+
iterator();
|
1376
|
+
|
1377
|
+
return this;
|
1378
|
+
};
|
1379
|
+
|
1380
|
+
|
1381
|
+
|
1382
|
+
RG.att(ca);
|
1383
|
+
|
1384
|
+
|
1385
|
+
|
1386
|
+
|
1387
|
+
/**
|
1388
|
+
* Register the object for redrawing
|
1389
|
+
*/
|
1390
|
+
RG.Register(this);
|
1391
|
+
|
1392
|
+
|
1393
|
+
|
1394
|
+
|
1395
|
+
/**
|
1396
|
+
* This is the 'end' of the constructor so if the first argument
|
1397
|
+
* contains configuration data - handle that.
|
1398
|
+
*/
|
1399
|
+
if (parseConfObjectForOptions) {
|
1400
|
+
RG.parseObjectStyleConfig(this, conf.options);
|
1401
|
+
}
|
1402
|
+
};
|