rgraph-rails 1.0.5 → 1.0.6
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 +8 -8
- data/.travis.yml +0 -1
- data/README.md +3 -3
- data/lib/rgraph-rails/version.rb +1 -1
- data/vendor/assets/javascripts/RGraph.bar.js +239 -3764
- data/vendor/assets/javascripts/RGraph.bipolar.js +115 -1986
- data/vendor/assets/javascripts/RGraph.common.annotate.js +35 -399
- data/vendor/assets/javascripts/RGraph.common.context.js +30 -600
- data/vendor/assets/javascripts/RGraph.common.core.js +403 -5187
- data/vendor/assets/javascripts/RGraph.common.csv.js +19 -275
- data/vendor/assets/javascripts/RGraph.common.deprecated.js +35 -454
- data/vendor/assets/javascripts/RGraph.common.dynamic.js +84 -1189
- data/vendor/assets/javascripts/RGraph.common.effects.js +90 -1548
- data/vendor/assets/javascripts/RGraph.common.key.js +54 -755
- data/vendor/assets/javascripts/RGraph.common.resizing.js +37 -567
- data/vendor/assets/javascripts/RGraph.common.sheets.js +29 -356
- data/vendor/assets/javascripts/RGraph.common.tooltips.js +32 -614
- data/vendor/assets/javascripts/RGraph.common.zoom.js +14 -223
- data/vendor/assets/javascripts/RGraph.cornergauge.js +71 -0
- data/vendor/assets/javascripts/RGraph.drawing.background.js +35 -620
- data/vendor/assets/javascripts/RGraph.drawing.circle.js +35 -576
- data/vendor/assets/javascripts/RGraph.drawing.image.js +52 -807
- data/vendor/assets/javascripts/RGraph.drawing.marker1.js +41 -717
- data/vendor/assets/javascripts/RGraph.drawing.marker2.js +37 -668
- data/vendor/assets/javascripts/RGraph.drawing.marker3.js +36 -563
- data/vendor/assets/javascripts/RGraph.drawing.poly.js +40 -608
- data/vendor/assets/javascripts/RGraph.drawing.rect.js +35 -597
- data/vendor/assets/javascripts/RGraph.drawing.text.js +34 -642
- data/vendor/assets/javascripts/RGraph.drawing.xaxis.js +50 -809
- data/vendor/assets/javascripts/RGraph.drawing.yaxis.js +51 -856
- data/vendor/assets/javascripts/RGraph.fuel.js +58 -964
- data/vendor/assets/javascripts/RGraph.funnel.js +55 -984
- data/vendor/assets/javascripts/RGraph.gantt.js +75 -1241
- data/vendor/assets/javascripts/RGraph.gauge.js +87 -1397
- data/vendor/assets/javascripts/RGraph.hbar.js +143 -2376
- data/vendor/assets/javascripts/RGraph.hprogress.js +80 -1397
- data/vendor/assets/javascripts/RGraph.line.js +241 -4162
- data/vendor/assets/javascripts/RGraph.meter.js +74 -1278
- metadata +3 -30
- data/vendor/assets/images/bg.png +0 -0
- data/vendor/assets/images/bullet.png +0 -0
- data/vendor/assets/images/facebook-large.png +0 -0
- data/vendor/assets/images/google-plus-large.png +0 -0
- data/vendor/assets/images/logo.png +0 -0
- data/vendor/assets/images/meter-image-sd-needle.png +0 -0
- data/vendor/assets/images/meter-image-sd.png +0 -0
- data/vendor/assets/images/meter-sketch-needle.png +0 -0
- data/vendor/assets/images/meter-sketch.png +0 -0
- data/vendor/assets/images/odometer-background.png +0 -0
- data/vendor/assets/images/rgraph.jpg +0 -0
- data/vendor/assets/images/title.png +0 -0
- data/vendor/assets/images/twitter-large.png +0 -0
- data/vendor/assets/javascripts/RGraph.modaldialog.js +0 -301
- data/vendor/assets/javascripts/RGraph.odo.js +0 -1265
- data/vendor/assets/javascripts/RGraph.pie.js +0 -2272
- data/vendor/assets/javascripts/RGraph.radar.js +0 -1847
- data/vendor/assets/javascripts/RGraph.rose.js +0 -1877
- data/vendor/assets/javascripts/RGraph.rscatter.js +0 -1425
- data/vendor/assets/javascripts/RGraph.scatter.js +0 -2970
- data/vendor/assets/javascripts/RGraph.semicircularprogress.js +0 -1015
- data/vendor/assets/javascripts/RGraph.thermometer.js +0 -1129
- data/vendor/assets/javascripts/RGraph.vprogress.js +0 -1452
- data/vendor/assets/javascripts/RGraph.waterfall.js +0 -1252
- data/vendor/assets/javascripts/financial-data.js +0 -1067
- data/vendor/assets/stylesheets/ModalDialog.css +0 -90
- data/vendor/assets/stylesheets/animations.css +0 -3347
- data/vendor/assets/stylesheets/website.css +0 -446
@@ -1,1015 +0,0 @@
|
|
1
|
-
// version: 2016-06-04
|
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 dual licensed under the Open Source GPL (General Public License) |
|
9
|
-
* | v2.0 license and a commercial license which means that you're not bound by |
|
10
|
-
* | the terms of the GPL. The commercial license is just 99 GBP and you can |
|
11
|
-
* | read about it here: |
|
12
|
-
* | http://www.rgraph.net/license |
|
13
|
-
* o--------------------------------------------------------------------------------o
|
14
|
-
*/
|
15
|
-
|
16
|
-
RGraph = window.RGraph || {isRGraph: true};
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
/**
|
22
|
-
* The progress bar constructor
|
23
|
-
*
|
24
|
-
* @param mixed conf This can either be an object that contains all of the configuration data
|
25
|
-
* (the updated way of configuring the object) or it can be a string consisting of the
|
26
|
-
* canvas ID
|
27
|
-
* @param number The minimum value (if using the older configuration style)
|
28
|
-
* @param number The maximum value (if using the older configuration style)
|
29
|
-
* @param number The represented value (if using the older configuration style)
|
30
|
-
*/
|
31
|
-
RGraph.SemiCircularProgress = function (conf)
|
32
|
-
{
|
33
|
-
/**
|
34
|
-
* Allow for object config style
|
35
|
-
*/
|
36
|
-
if ( typeof conf === 'object'
|
37
|
-
&& typeof conf.id === 'string') {
|
38
|
-
|
39
|
-
var parseConfObjectForOptions = true; // Set this so the config is parsed (at the end of the constructor)
|
40
|
-
|
41
|
-
} else {
|
42
|
-
|
43
|
-
var conf = {
|
44
|
-
id: arguments[0],
|
45
|
-
min: arguments[1],
|
46
|
-
max: arguments[2],
|
47
|
-
value: arguments[3]
|
48
|
-
}
|
49
|
-
}
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
this.id = conf.id;
|
55
|
-
this.canvas = document.getElementById(this.id);
|
56
|
-
this.context = this.canvas.getContext('2d');
|
57
|
-
this.canvas.__object__ = this;
|
58
|
-
|
59
|
-
this.min = RGraph.stringsToNumbers(conf.min);
|
60
|
-
this.max = RGraph.stringsToNumbers(conf.max);
|
61
|
-
this.value = RGraph.stringsToNumbers(conf.value);
|
62
|
-
this.type = 'semicircularprogress';
|
63
|
-
this.coords = [];
|
64
|
-
this.isRGraph = true;
|
65
|
-
this.currentValue = null;
|
66
|
-
this.uid = RGraph.createUID();
|
67
|
-
this.canvas.uid = this.canvas.uid ? this.canvas.uid : RGraph.CreateUID();
|
68
|
-
this.colorsParsed = false;
|
69
|
-
this.coordsText = [];
|
70
|
-
this.original_colors = [];
|
71
|
-
this.firstDraw = true; // After the first draw this will be false
|
72
|
-
|
73
|
-
|
74
|
-
/**
|
75
|
-
* Compatibility with older browsers
|
76
|
-
*/
|
77
|
-
//RGraph.OldBrowserCompat(this.context);
|
78
|
-
|
79
|
-
this.properties =
|
80
|
-
{
|
81
|
-
'chart.background.color': 'rgba(0,0,0,0)',
|
82
|
-
'chart.colors': ['#0c0'],
|
83
|
-
'chart.linewidth': 2,
|
84
|
-
'chart.strokestyle': '#666',
|
85
|
-
'chart.gutter.left': 25,
|
86
|
-
'chart.gutter.right': 25,
|
87
|
-
'chart.gutter.top': 25,
|
88
|
-
'chart.gutter.bottom': 35,
|
89
|
-
'chart.radius': null,
|
90
|
-
'chart.centerx': null,
|
91
|
-
'chart.centery': null,
|
92
|
-
'chart.width': null,
|
93
|
-
'chart.angles.start': 3.1415,
|
94
|
-
'chart.angles.end': 6.2830,
|
95
|
-
'chart.scale.decimals': 0,
|
96
|
-
'chart.scale.point': '.',
|
97
|
-
'chart.scale.thousand': ',',
|
98
|
-
'chart.scale.formatter': null,
|
99
|
-
'chart.scale.round': false,
|
100
|
-
'chart.shadow': false,
|
101
|
-
'chart.shadow.color': 'rgba(220,220,220,1)',
|
102
|
-
'chart.shadow.blur': 2,
|
103
|
-
'chart.shadow.offsetx': 2,
|
104
|
-
'chart.shadow.offsety': 2,
|
105
|
-
'chart.labels.center': true,
|
106
|
-
'chart.labels.center.font': null,
|
107
|
-
'chart.labels.center.bold': false,
|
108
|
-
'chart.labels.center.italic': false,
|
109
|
-
'chart.labels.center.fade': false,
|
110
|
-
'chart.labels.center.size': 40,
|
111
|
-
'chart.labels.center.color':'black',
|
112
|
-
|
113
|
-
'chart.labels.min.color': null,
|
114
|
-
'chart.labels.min.font': null,
|
115
|
-
'chart.labels.min.bold': false,
|
116
|
-
'chart.labels.min.size': null,
|
117
|
-
'chart.labels.min.italic': false,
|
118
|
-
|
119
|
-
'chart.labels.max.color': null,
|
120
|
-
'chart.labels.max.font': null,
|
121
|
-
'chart.labels.max.bold': false,
|
122
|
-
'chart.labels.max.size': null,
|
123
|
-
'chart.labels.max.italic': false,
|
124
|
-
|
125
|
-
'chart.title': '',
|
126
|
-
'chart.title.bold': true,
|
127
|
-
'chart.title.italic': false,
|
128
|
-
'chart.title.font': null,
|
129
|
-
'chart.title.size': null,
|
130
|
-
'chart.title.color': 'black',
|
131
|
-
'chart.text.size': 12,
|
132
|
-
'chart.text.color': 'black',
|
133
|
-
'chart.text.font': 'Segoe UI, Arial, Verdana, sans-serif',
|
134
|
-
'chart.text.accessible': true,
|
135
|
-
'chart.text.accessible.overflow': 'visible',
|
136
|
-
'chart.text.accessible.pointerevents': false,
|
137
|
-
'chart.contextmenu': null,
|
138
|
-
'chart.units.pre': '',
|
139
|
-
'chart.units.post': '',
|
140
|
-
'chart.tooltips': null,
|
141
|
-
'chart.tooltips.effect': 'fade',
|
142
|
-
'chart.tooltips.css.class': 'RGraph_tooltip',
|
143
|
-
'chart.tooltips.highlight': true,
|
144
|
-
'chart.tooltips.event': 'onclick',
|
145
|
-
'chart.tooltips.coords.page':true,
|
146
|
-
'chart.highlight.stroke': 'rgba(0,0,0,0)',
|
147
|
-
'chart.highlight.fill': 'rgba(255,255,255,0.7)',
|
148
|
-
'chart.annotatable': false,
|
149
|
-
'chart.annotate.color': 'black',
|
150
|
-
'chart.zoom.factor': 1.5,
|
151
|
-
'chart.zoom.fade.in': true,
|
152
|
-
'chart.zoom.fade.out': true,
|
153
|
-
'chart.zoom.hdir': 'right',
|
154
|
-
'chart.zoom.vdir': 'down',
|
155
|
-
'chart.zoom.frames': 25,
|
156
|
-
'chart.zoom.delay': 16.666,
|
157
|
-
'chart.zoom.shadow': true,
|
158
|
-
'chart.zoom.background': true,
|
159
|
-
'chart.zoom.action': 'zoom',
|
160
|
-
'chart.resizable': false,
|
161
|
-
'chart.resize.handle.adjust': [0,0],
|
162
|
-
'chart.resize.handle.background': null,
|
163
|
-
'chart.adjustable': false,
|
164
|
-
'chart.events.click': null,
|
165
|
-
'chart.events.mousemove': null,
|
166
|
-
'chart.clearto': 'rgba(0,0,0,0)'
|
167
|
-
}
|
168
|
-
|
169
|
-
// Check for support
|
170
|
-
if (!this.canvas) {
|
171
|
-
alert('[SEMICIRCULARPROGRESS] No canvas support');
|
172
|
-
return;
|
173
|
-
}
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
/**
|
179
|
-
* Translate half a pixel for antialiasing purposes - but only if it hasn't beeen
|
180
|
-
* done already
|
181
|
-
*/
|
182
|
-
if (!this.canvas.__rgraph_aa_translated__) {
|
183
|
-
this.context.translate(0.5,0.5);
|
184
|
-
|
185
|
-
this.canvas.__rgraph_aa_translated__ = true;
|
186
|
-
}
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
// Short variable names
|
192
|
-
var RG = RGraph,
|
193
|
-
ca = this.canvas,
|
194
|
-
co = ca.getContext('2d'),
|
195
|
-
prop = this.properties,
|
196
|
-
pa2 = RG.path2,
|
197
|
-
win = window,
|
198
|
-
doc = document,
|
199
|
-
ma = Math
|
200
|
-
|
201
|
-
|
202
|
-
|
203
|
-
/**
|
204
|
-
* "Decorate" the object with the generic effects if the effects library has been included
|
205
|
-
*/
|
206
|
-
if (RG.Effects && typeof RG.Effects.decorate === 'function') {
|
207
|
-
RG.Effects.decorate(this);
|
208
|
-
}
|
209
|
-
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
/**
|
214
|
-
* A generic setter
|
215
|
-
*
|
216
|
-
* @param string name The name of the property to set or it can also be an object containing
|
217
|
-
* object style configuration
|
218
|
-
*/
|
219
|
-
this.set =
|
220
|
-
this.Set = function (name)
|
221
|
-
{
|
222
|
-
var value = typeof arguments[1] === 'undefined' ? null : arguments[1];
|
223
|
-
|
224
|
-
/**
|
225
|
-
* the number of arguments is only one and it's an
|
226
|
-
* object - parse it for configuration data and return.
|
227
|
-
*/
|
228
|
-
if (arguments.length === 1 && typeof name === 'object') {
|
229
|
-
RG.parseObjectStyleConfig(this, name);
|
230
|
-
return this;
|
231
|
-
}
|
232
|
-
|
233
|
-
|
234
|
-
|
235
|
-
/**
|
236
|
-
* This should be done first - prepend the propertyy name with "chart." if necessary
|
237
|
-
*/
|
238
|
-
if (name.substr(0,6) != 'chart.') {
|
239
|
-
name = 'chart.' + name;
|
240
|
-
}
|
241
|
-
|
242
|
-
|
243
|
-
|
244
|
-
// Convert uppercase letters to dot+lower case letter
|
245
|
-
while(name.match(/([A-Z])/)) {
|
246
|
-
name = name.replace(/([A-Z])/, '.' + RegExp.$1.toLowerCase());
|
247
|
-
}
|
248
|
-
|
249
|
-
|
250
|
-
|
251
|
-
|
252
|
-
prop[name.toLowerCase()] = value;
|
253
|
-
|
254
|
-
return this;
|
255
|
-
};
|
256
|
-
|
257
|
-
|
258
|
-
|
259
|
-
|
260
|
-
/**
|
261
|
-
* A generic getter
|
262
|
-
*
|
263
|
-
* @param string name The name of the property to get
|
264
|
-
*/
|
265
|
-
this.get =
|
266
|
-
this.Get = function (name)
|
267
|
-
{
|
268
|
-
/**
|
269
|
-
* This should be done first - prepend the property name with "chart." if necessary
|
270
|
-
*/
|
271
|
-
if (name.substr(0,6) != 'chart.') {
|
272
|
-
name = 'chart.' + name;
|
273
|
-
}
|
274
|
-
|
275
|
-
// Convert uppercase letters to dot+lower case letter
|
276
|
-
name = name.replace(/([A-Z])/g, function (str)
|
277
|
-
{
|
278
|
-
return '.' + String(RegExp.$1).toLowerCase()
|
279
|
-
});
|
280
|
-
|
281
|
-
return prop[name.toLowerCase()];
|
282
|
-
};
|
283
|
-
|
284
|
-
|
285
|
-
|
286
|
-
|
287
|
-
/**
|
288
|
-
* Draws the progress bar
|
289
|
-
*/
|
290
|
-
this.draw =
|
291
|
-
this.Draw = function ()
|
292
|
-
{
|
293
|
-
/**
|
294
|
-
* Fire the onbeforedraw event
|
295
|
-
*/
|
296
|
-
RG.fireCustomEvent(this, 'onbeforedraw');
|
297
|
-
|
298
|
-
|
299
|
-
|
300
|
-
/**
|
301
|
-
* Parse the colors. This allows for simple gradient syntax
|
302
|
-
*/
|
303
|
-
if (!this.colorsParsed) {
|
304
|
-
|
305
|
-
this.parseColors();
|
306
|
-
|
307
|
-
|
308
|
-
// Don't want to do this again
|
309
|
-
this.colorsParsed = true;
|
310
|
-
}
|
311
|
-
|
312
|
-
|
313
|
-
/**
|
314
|
-
* Set the current value
|
315
|
-
*/
|
316
|
-
this.currentValue = this.value;
|
317
|
-
|
318
|
-
/**
|
319
|
-
* This is new in May 2011 and facilitates indiviual gutter settings,
|
320
|
-
* eg chart.gutter.left
|
321
|
-
*/
|
322
|
-
this.gutterLeft = prop['chart.gutter.left'];
|
323
|
-
this.gutterRight = prop['chart.gutter.right'];
|
324
|
-
this.gutterTop = prop['chart.gutter.top'];
|
325
|
-
this.gutterBottom = prop['chart.gutter.bottom'];
|
326
|
-
|
327
|
-
// Figure out the width and height
|
328
|
-
this.radius = ma.min(
|
329
|
-
(ca.width - prop['chart.gutter.left'] - prop['chart.gutter.right']) / 2,
|
330
|
-
ca.height - prop['chart.gutter.top'] - prop['chart.gutter.bottom']
|
331
|
-
);
|
332
|
-
this.centerx = ((ca.width - this.gutterLeft - this.gutterRight) / 2) + this.gutterLeft;
|
333
|
-
this.centery = ca.height - this.gutterBottom;
|
334
|
-
this.width = this.radius / 3;
|
335
|
-
|
336
|
-
// User specified centerx/y/radius
|
337
|
-
if (typeof prop['chart.radius'] === 'number') this.radius = prop['chart.radius'];
|
338
|
-
if (typeof prop['chart.centerx'] === 'number') this.centerx = prop['chart.centerx'];
|
339
|
-
if (typeof prop['chart.centery'] === 'number') this.centery = prop['chart.centery'];
|
340
|
-
if (typeof prop['chart.width'] === 'number') this.width = prop['chart.width'];
|
341
|
-
|
342
|
-
this.coords = [];
|
343
|
-
|
344
|
-
|
345
|
-
|
346
|
-
/**
|
347
|
-
* Stop this growing uncontrollably
|
348
|
-
*/
|
349
|
-
this.coordsText = [];
|
350
|
-
|
351
|
-
|
352
|
-
|
353
|
-
|
354
|
-
|
355
|
-
//
|
356
|
-
// Draw the meter
|
357
|
-
//
|
358
|
-
this.drawMeter();
|
359
|
-
this.drawLabels();
|
360
|
-
|
361
|
-
|
362
|
-
|
363
|
-
/**
|
364
|
-
* Setup the context menu if required
|
365
|
-
*/
|
366
|
-
if (prop['chart.contextmenu']) {
|
367
|
-
RG.showContext(this);
|
368
|
-
}
|
369
|
-
|
370
|
-
|
371
|
-
/**
|
372
|
-
* This installs the event listeners
|
373
|
-
*/
|
374
|
-
RG.installEventListeners(this);
|
375
|
-
|
376
|
-
|
377
|
-
|
378
|
-
|
379
|
-
/**
|
380
|
-
* This function enables resizing
|
381
|
-
*/
|
382
|
-
if (prop['chart.resizable']) {
|
383
|
-
RG.allowResizing(this);
|
384
|
-
}
|
385
|
-
|
386
|
-
/**
|
387
|
-
* Instead of using RGraph.common.adjusting.js, handle them here
|
388
|
-
*/
|
389
|
-
this.allowAdjusting();
|
390
|
-
|
391
|
-
|
392
|
-
/**
|
393
|
-
* Fire the onfirstdraw event
|
394
|
-
*/
|
395
|
-
if (this.firstDraw) {
|
396
|
-
RG.fireCustomEvent(this, 'onfirstdraw');
|
397
|
-
this.firstDraw = false;
|
398
|
-
this.firstDrawFunc();
|
399
|
-
}
|
400
|
-
|
401
|
-
|
402
|
-
|
403
|
-
|
404
|
-
/**
|
405
|
-
* Fire the RGraph ondraw event
|
406
|
-
*/
|
407
|
-
RG.fireCustomEvent(this, 'ondraw');
|
408
|
-
|
409
|
-
return this;
|
410
|
-
};
|
411
|
-
|
412
|
-
|
413
|
-
|
414
|
-
|
415
|
-
/**
|
416
|
-
* Draw the bar itself
|
417
|
-
*/
|
418
|
-
this.drawMeter =
|
419
|
-
this.DrawMeter = function ()
|
420
|
-
{
|
421
|
-
//
|
422
|
-
// The start/end angles
|
423
|
-
//
|
424
|
-
var start = prop['chart.angles.start'],
|
425
|
-
end = prop['chart.angles.end'];
|
426
|
-
|
427
|
-
//
|
428
|
-
// Calculate a scale (though only two labels are shown)
|
429
|
-
//
|
430
|
-
this.scale2 = RG.getScale2(this, {
|
431
|
-
'max': this.max,
|
432
|
-
'strict': prop['chart.scale.round'] ? false : true,
|
433
|
-
'min': this.min,
|
434
|
-
'scale.thousand': prop['chart.scale.thousand'],
|
435
|
-
'scale.point': prop['chart.scale.point'],
|
436
|
-
'scale.decimals': prop['chart.scale.decimals'],
|
437
|
-
'ylabels.count': 5,
|
438
|
-
'scale.round': prop['chart.scale.round'],
|
439
|
-
'units.pre': prop['chart.units.pre'],
|
440
|
-
'units.post': prop['chart.units.post']
|
441
|
-
});
|
442
|
-
|
443
|
-
// Draw the backgrundColor
|
444
|
-
if (prop['chart.background.color'] !== 'rgba(0,0,0,0)') {
|
445
|
-
pa2(co, 'fs % fr % % % %',
|
446
|
-
prop['chart.background.color'],
|
447
|
-
0,0,ca.width, ca.height
|
448
|
-
);
|
449
|
-
}
|
450
|
-
|
451
|
-
|
452
|
-
// Draw the main semi-circle background and then lighten it by filling it again
|
453
|
-
// in semi-transparent white
|
454
|
-
pa2(
|
455
|
-
co,
|
456
|
-
'lw % b a % % % % % false a % % % % % true c s % f % sx % sy % sc % sb % f rgba(255,255,255,0.85) sx 0 sy 0 sb 0 sc rgba(0,0,0,0) lw 1',
|
457
|
-
prop['chart.linewidth'],
|
458
|
-
this.centerx, this.centery, this.radius, start, end,
|
459
|
-
this.centerx, this.centery, this.radius - this.width, end, start,
|
460
|
-
prop['chart.strokestyle'],
|
461
|
-
prop['chart.colors'][0],
|
462
|
-
prop['chart.shadow.offsetx'], prop['chart.shadow.offsety'], prop['chart.shadow'] ? prop['chart.shadow.color'] : 'rgba(0,0,0,0)', prop['chart.shadow.blur']
|
463
|
-
);
|
464
|
-
|
465
|
-
var angle = start + ((end - start) * ((this.value - this.scale2.min) / (this.max - this.scale2.min)));
|
466
|
-
|
467
|
-
// Draw the meter
|
468
|
-
pa2(
|
469
|
-
co,
|
470
|
-
'b a % % % % % false a % % % % % true c f %',
|
471
|
-
this.centerx, this.centery, this.radius, start, angle,
|
472
|
-
this.centerx, this.centery, this.radius - this.width, start + ((end - start) * ((this.value - this.scale2.min) / (this.max - this.scale2.min))), start,
|
473
|
-
prop['chart.colors'][0]
|
474
|
-
);
|
475
|
-
|
476
|
-
this.coords = [[
|
477
|
-
this.centerx,
|
478
|
-
this.centery,
|
479
|
-
this.radius,
|
480
|
-
start,
|
481
|
-
end,
|
482
|
-
this.width,
|
483
|
-
angle
|
484
|
-
]];
|
485
|
-
};
|
486
|
-
|
487
|
-
|
488
|
-
|
489
|
-
|
490
|
-
/**
|
491
|
-
* The function that draws the labels
|
492
|
-
*/
|
493
|
-
this.drawLabels =
|
494
|
-
this.DrawLabels = function ()
|
495
|
-
{
|
496
|
-
var min = RG.numberFormat(
|
497
|
-
this,
|
498
|
-
this.scale2.min
|
499
|
-
)
|
500
|
-
|
501
|
-
var max = RG.numberFormat(
|
502
|
-
this,
|
503
|
-
this.scale2.max
|
504
|
-
)
|
505
|
-
|
506
|
-
// Draw the max label
|
507
|
-
RG.text2(this, {
|
508
|
-
font: prop['chart.labels.max.font'] || prop['chart.text.font'],
|
509
|
-
bold: prop['chart.labels.max.bold'] || prop['chart.text.bold'],
|
510
|
-
size: prop['chart.labels.max.size'] || prop['chart.text.size'],
|
511
|
-
x: this.centerx + this.radius - (this.width / 2),
|
512
|
-
y: this.centery + 5,
|
513
|
-
valign: 'top',
|
514
|
-
halign: 'center',
|
515
|
-
text: max,
|
516
|
-
color: prop['chart.labels.max.color'] || prop['chart.text.color'],
|
517
|
-
italic: prop['chart.labels.max.italic']
|
518
|
-
});
|
519
|
-
|
520
|
-
// Draw the min label
|
521
|
-
RG.text2(this, {
|
522
|
-
font: prop['chart.labels.min.font'] || prop['chart.text.font'],
|
523
|
-
bold: prop['chart.labels.min.bold'] || prop['chart.text.bold'],
|
524
|
-
size: prop['chart.labels.min.size'] || prop['chart.text.size'],
|
525
|
-
x: this.centerx - this.radius + (this.width / 2),
|
526
|
-
y: this.centery + 5,
|
527
|
-
valign: 'top',
|
528
|
-
halign: 'center',
|
529
|
-
text: min,
|
530
|
-
color: prop['chart.labels.min.color'] || prop['chart.text.color'],
|
531
|
-
italic: prop['chart.labels.min.italic']
|
532
|
-
});
|
533
|
-
|
534
|
-
|
535
|
-
// Draw the big label in the center
|
536
|
-
if (prop['chart.labels.center']) {
|
537
|
-
var ret = RG.text2(this, {
|
538
|
-
font: prop['chart.labels.center.font'] || prop['chart.text.font'],
|
539
|
-
size: prop['chart.labels.center.size'] || 50,
|
540
|
-
bold: prop['chart.labels.center.bold'],
|
541
|
-
italic: prop['chart.labels.center.italic'],
|
542
|
-
x: this.centerx,
|
543
|
-
y: this.centery,
|
544
|
-
valign: 'bottom',
|
545
|
-
halign: 'center',
|
546
|
-
text: RG.numberFormat(
|
547
|
-
this,
|
548
|
-
this.value.toFixed(prop['chart.scale.decimals']),
|
549
|
-
prop['chart.units.pre'],
|
550
|
-
prop['chart.units.post']
|
551
|
-
),
|
552
|
-
color: prop['chart.labels.center.color'] || prop['chart.text.color']
|
553
|
-
});
|
554
|
-
|
555
|
-
// Allows the center label to fade in
|
556
|
-
if (prop['chart.labels.center.fade'] && ret.node) {
|
557
|
-
ret.node.style.opacity = 0;
|
558
|
-
|
559
|
-
var delay = 25,
|
560
|
-
incr = 0.1;
|
561
|
-
|
562
|
-
for (var i=0; i<10; ++i) {
|
563
|
-
(function (index)
|
564
|
-
{
|
565
|
-
setTimeout(function ()
|
566
|
-
{
|
567
|
-
ret.node.style.opacity = incr * index;
|
568
|
-
}, delay * (index + 1));
|
569
|
-
})(i);
|
570
|
-
}
|
571
|
-
}
|
572
|
-
}
|
573
|
-
|
574
|
-
// Draw the title
|
575
|
-
RG.drawTitle(
|
576
|
-
this,
|
577
|
-
prop['chart.title'],
|
578
|
-
this.gutterTop,
|
579
|
-
null,
|
580
|
-
prop['chart.title.size']
|
581
|
-
);
|
582
|
-
};
|
583
|
-
|
584
|
-
|
585
|
-
|
586
|
-
|
587
|
-
/**
|
588
|
-
* Returns the focused bar
|
589
|
-
*
|
590
|
-
* @param event e The event object
|
591
|
-
*/
|
592
|
-
this.getShape = function (e)
|
593
|
-
{
|
594
|
-
var mouseXY = RG.getMouseXY(e),
|
595
|
-
mouseX = mouseXY[0],
|
596
|
-
mouseY = mouseXY[1]
|
597
|
-
|
598
|
-
// Draw the meter here but don't stroke or fill it
|
599
|
-
// so that it can be tested with isPointInPath()
|
600
|
-
pa2(
|
601
|
-
co,
|
602
|
-
'b a % % % % % false a % % % % % true',
|
603
|
-
this.coords[0][0], this.coords[0][1], this.coords[0][2], this.coords[0][3], this.coords[0][6],
|
604
|
-
this.coords[0][0], this.coords[0][1], this.coords[0][2] - this.coords[0][5], this.coords[0][6], this.coords[0][3]
|
605
|
-
);
|
606
|
-
|
607
|
-
|
608
|
-
|
609
|
-
if (co.isPointInPath(mouseX, mouseY)) {
|
610
|
-
|
611
|
-
return {
|
612
|
-
object: this, 0: this,
|
613
|
-
x: this.coords[0][0], 1: this.coords[0][0],
|
614
|
-
y: this.coords[0][1], 2: this.coords[0][1],
|
615
|
-
radius: this.coords[0][2], 3: this.coords[0][2],
|
616
|
-
width: this.coords[0][5], 4: this.coords[0][5],
|
617
|
-
start: this.coords[0][3], 5: this.coords[0][3],
|
618
|
-
end: this.coords[0][6], 6: this.coords[0][6],
|
619
|
-
index: 0,
|
620
|
-
tooltip: !RG.isNull(prop['chart.tooltips']) ? prop['chart.tooltips'][0] : null
|
621
|
-
};
|
622
|
-
}
|
623
|
-
};
|
624
|
-
|
625
|
-
|
626
|
-
|
627
|
-
|
628
|
-
/**
|
629
|
-
* This function returns the value that the mouse is positioned at, regardless of
|
630
|
-
* the actual indicated value.
|
631
|
-
*
|
632
|
-
* @param object e The event object
|
633
|
-
*/
|
634
|
-
this.getValue = function (e)
|
635
|
-
{
|
636
|
-
var mouseXY = RG.getMouseXY(e),
|
637
|
-
mouseX = mouseXY[0],
|
638
|
-
mouseY = mouseXY[1],
|
639
|
-
angle = RG.getAngleByXY(
|
640
|
-
this.centerx,
|
641
|
-
this.centery,
|
642
|
-
mouseX,
|
643
|
-
mouseY
|
644
|
-
);
|
645
|
-
|
646
|
-
if (angle < prop['chart.angles.start'] && mouseX > this.centerx) { angle = prop['chart.angles.end']; }
|
647
|
-
if (angle < prop['chart.angles.start']) { angle = prop['chart.angles.start']; }
|
648
|
-
|
649
|
-
var value = (((angle - prop['chart.angles.start']) / (prop['chart.angles.end'] - prop['chart.angles.start'])) * (this.max - this.min)) + this.min;
|
650
|
-
|
651
|
-
value = ma.max(value, this.min);
|
652
|
-
value = ma.min(value, this.max);
|
653
|
-
|
654
|
-
return value;
|
655
|
-
};
|
656
|
-
|
657
|
-
|
658
|
-
|
659
|
-
|
660
|
-
/**
|
661
|
-
* Each object type has its own Highlight() function which highlights the appropriate shape
|
662
|
-
*
|
663
|
-
* @param object shape The shape to highlight
|
664
|
-
*/
|
665
|
-
this.highlight =
|
666
|
-
this.Highlight = function (shape)
|
667
|
-
{
|
668
|
-
if (typeof prop['chart.highlight.style'] === 'function') {
|
669
|
-
(prop['chart.highlight.style'])(shape);
|
670
|
-
} else {
|
671
|
-
pa2(co, 'lw 5 b a % % % % % false a % % % % % true c s % f % lw 1',
|
672
|
-
shape.x, shape.y, shape.radius, shape.start, shape.end,
|
673
|
-
shape.x, shape.y, shape.radius - shape.width, shape.end, shape.start,
|
674
|
-
prop['chart.highlight.stroke'],
|
675
|
-
prop['chart.highlight.fill']
|
676
|
-
);
|
677
|
-
}
|
678
|
-
};
|
679
|
-
|
680
|
-
|
681
|
-
|
682
|
-
|
683
|
-
/**
|
684
|
-
* The getObjectByXY() worker method. Don't call this call:
|
685
|
-
*
|
686
|
-
* RGraph.ObjectRegistry.getObjectByXY(e)
|
687
|
-
*
|
688
|
-
* @param object e The event object
|
689
|
-
*/
|
690
|
-
this.getObjectByXY = function (e)
|
691
|
-
{
|
692
|
-
var mouseXY = RG.getMouseXY(e);
|
693
|
-
|
694
|
-
if (
|
695
|
-
mouseXY[0] > this.gutterLeft
|
696
|
-
&& mouseXY[0] < (ca.width - this.gutterRight)
|
697
|
-
&& mouseXY[1] >= this.gutterTop
|
698
|
-
&& mouseXY[1] <= (ca.height - this.gutterBottom)
|
699
|
-
) {
|
700
|
-
|
701
|
-
return this;
|
702
|
-
}
|
703
|
-
};
|
704
|
-
|
705
|
-
|
706
|
-
|
707
|
-
|
708
|
-
/**
|
709
|
-
* This function allows the VProgress to be adjustable.
|
710
|
-
* UPDATE: Not any more
|
711
|
-
*/
|
712
|
-
this.allowAdjusting =
|
713
|
-
this.AllowAdjusting = function () {};
|
714
|
-
|
715
|
-
|
716
|
-
|
717
|
-
|
718
|
-
/**
|
719
|
-
* This method handles the adjusting calculation for when the mouse is moved
|
720
|
-
*
|
721
|
-
* @param object e The event object
|
722
|
-
*/
|
723
|
-
this.adjusting_mousemove =
|
724
|
-
this.Adjusting_mousemove = function (e)
|
725
|
-
{
|
726
|
-
/**
|
727
|
-
* Handle adjusting for the HProgress
|
728
|
-
*/
|
729
|
-
if (prop['chart.adjustable'] && RG.Registry.Get('chart.adjusting') && RG.Registry.Get('chart.adjusting').uid == this.uid) {
|
730
|
-
|
731
|
-
var value = this.getValue(e);
|
732
|
-
|
733
|
-
if (typeof value === 'number') {
|
734
|
-
|
735
|
-
// Fire the onadjust event
|
736
|
-
RG.fireCustomEvent(this, 'onadjust');
|
737
|
-
|
738
|
-
this.value = Number(value.toFixed(prop['chart.scale.decimals']));
|
739
|
-
RG.redrawCanvas(this.canvas);
|
740
|
-
}
|
741
|
-
}
|
742
|
-
};
|
743
|
-
|
744
|
-
|
745
|
-
|
746
|
-
|
747
|
-
/**
|
748
|
-
* This function positions a tooltip when it is displayed
|
749
|
-
*
|
750
|
-
* @param obj object The chart object
|
751
|
-
* @param int x The X coordinate specified for the tooltip
|
752
|
-
* @param int y The Y coordinate specified for the tooltip
|
753
|
-
* @param objec tooltip The tooltips DIV element
|
754
|
-
*/
|
755
|
-
this.positionTooltip = function (obj, x, y, tooltip, idx)
|
756
|
-
{
|
757
|
-
var coordX = obj.coords[tooltip.__index__][0],
|
758
|
-
coordY = obj.coords[tooltip.__index__][1],
|
759
|
-
coordW = obj.coords[tooltip.__index__][2],
|
760
|
-
coordH = obj.coords[tooltip.__index__][3],
|
761
|
-
canvasXY = RG.getCanvasXY(obj.canvas),
|
762
|
-
mouseXY = RG.getMouseXY(window.event),
|
763
|
-
gutterLeft = obj.gutterLeft,
|
764
|
-
gutterTop = obj.gutterTop,
|
765
|
-
width = tooltip.offsetWidth,
|
766
|
-
height = tooltip.offsetHeight
|
767
|
-
/*
|
768
|
-
// Set the top position
|
769
|
-
tooltip.style.left = 0;
|
770
|
-
tooltip.style.top = window.event.pageY - height - 5 + 'px';
|
771
|
-
|
772
|
-
// By default any overflow is hidden
|
773
|
-
tooltip.style.overflow = '';
|
774
|
-
|
775
|
-
// Reposition the tooltip if at the edges:
|
776
|
-
|
777
|
-
// LEFT edge
|
778
|
-
if (canvasXY[0] + mouseXY[0] - (width / 2) < 0) {
|
779
|
-
tooltip.style.left = canvasXY[0] + mouseXY[0] - (width * 0.1) + 'px';
|
780
|
-
|
781
|
-
// RIGHT edge
|
782
|
-
} else if (canvasXY[0] + mouseXY[0] + (width / 2) > doc.body.offsetWidth) {
|
783
|
-
tooltip.style.left = canvasXY[0] + mouseXY[0] - (width * 0.9) + 'px';
|
784
|
-
|
785
|
-
// Default positioning - CENTERED
|
786
|
-
} else {
|
787
|
-
tooltip.style.left = canvasXY[0] + mouseXY[0] - (width / 2) + 'px';
|
788
|
-
}
|
789
|
-
*/
|
790
|
-
};
|
791
|
-
|
792
|
-
|
793
|
-
|
794
|
-
|
795
|
-
/**
|
796
|
-
* This function returns the appropriate angle (in radians) for the given
|
797
|
-
* Y value
|
798
|
-
*
|
799
|
-
* @param int value The Y value you want the angle for
|
800
|
-
* @returm int The angle
|
801
|
-
*/
|
802
|
-
this.getAngle = function (value)
|
803
|
-
{
|
804
|
-
if (value > this.max || value < this.min) {
|
805
|
-
return null;
|
806
|
-
}
|
807
|
-
|
808
|
-
var angle = (value / this.max) * (prop['chart.angles.end'] - prop['chart.angles.start'])
|
809
|
-
angle += prop['chart.angles.start'];
|
810
|
-
|
811
|
-
return angle;
|
812
|
-
};
|
813
|
-
|
814
|
-
|
815
|
-
|
816
|
-
|
817
|
-
/**
|
818
|
-
* This returns true/false as to whether the cursor is over the chart area.
|
819
|
-
* The cursor does not necessarily have to be over the bar itself.
|
820
|
-
*/
|
821
|
-
this.overChartArea = function (e)
|
822
|
-
{
|
823
|
-
var mouseXY = RGraph.getMouseXY(e),
|
824
|
-
mouseX = mouseXY[0],
|
825
|
-
mouseY = mouseXY[1]
|
826
|
-
|
827
|
-
// Draw the background to the Progress but don't stroke or fill it
|
828
|
-
// so that it can be tested with isPointInPath()
|
829
|
-
pa2(
|
830
|
-
co,
|
831
|
-
'b a % % % % % false a % % % % % true',
|
832
|
-
this.coords[0][0], this.coords[0][1], this.coords[0][2], prop['chart.angles.start'], prop['chart.angles.end'],
|
833
|
-
this.coords[0][0], this.coords[0][1], this.coords[0][2] - this.coords[0][5], prop['chart.angles.end'], prop['chart.angles.start']
|
834
|
-
);
|
835
|
-
|
836
|
-
return co.isPointInPath(mouseX, mouseY);
|
837
|
-
};
|
838
|
-
|
839
|
-
|
840
|
-
|
841
|
-
|
842
|
-
/**
|
843
|
-
*
|
844
|
-
*/
|
845
|
-
this.parseColors = function ()
|
846
|
-
{
|
847
|
-
// Save the original colors so that they can be restored when the canvas is reset
|
848
|
-
if (this.original_colors.length === 0) {
|
849
|
-
this.original_colors['chart.colors'] = RG.arrayClone(prop['chart.colors']);
|
850
|
-
}
|
851
|
-
|
852
|
-
prop['chart.colors'][0] = this.parseSingleColorForGradient(prop['chart.colors'][0]);
|
853
|
-
};
|
854
|
-
|
855
|
-
|
856
|
-
|
857
|
-
|
858
|
-
/**
|
859
|
-
* Use this function to reset the object to the post-constructor state. Eg reset colors if
|
860
|
-
* need be etc
|
861
|
-
*/
|
862
|
-
this.reset = function ()
|
863
|
-
{
|
864
|
-
};
|
865
|
-
|
866
|
-
|
867
|
-
|
868
|
-
|
869
|
-
/**
|
870
|
-
* This parses a single color value
|
871
|
-
*/
|
872
|
-
this.parseSingleColorForGradient = function (color)
|
873
|
-
{
|
874
|
-
if (!color || typeof color != 'string') {
|
875
|
-
return color;
|
876
|
-
}
|
877
|
-
|
878
|
-
if (color.match(/^gradient\((.*)\)$/i)) {
|
879
|
-
var parts = RegExp.$1.split(':');
|
880
|
-
|
881
|
-
// Create the gradient
|
882
|
-
var grad = co.createLinearGradient(prop['chart.gutter.left'],0,ca.width - prop['chart.gutter.right'],0);
|
883
|
-
|
884
|
-
var diff = 1 / (parts.length - 1);
|
885
|
-
|
886
|
-
grad.addColorStop(0, RG.trim(parts[0]));
|
887
|
-
|
888
|
-
for (var j=1,len=parts.length; j<len; ++j) {
|
889
|
-
grad.addColorStop(j * diff, RG.trim(parts[j]));
|
890
|
-
}
|
891
|
-
|
892
|
-
return grad ? grad : color;
|
893
|
-
}
|
894
|
-
|
895
|
-
return grad ? grad : color;
|
896
|
-
};
|
897
|
-
|
898
|
-
|
899
|
-
|
900
|
-
|
901
|
-
/**
|
902
|
-
* Using a function to add events makes it easier to facilitate method chaining
|
903
|
-
*
|
904
|
-
* @param string type The type of even to add
|
905
|
-
* @param function func
|
906
|
-
*/
|
907
|
-
this.on = function (type, func)
|
908
|
-
{
|
909
|
-
if (type.substr(0,2) !== 'on') {
|
910
|
-
type = 'on' + type;
|
911
|
-
}
|
912
|
-
|
913
|
-
this[type] = func;
|
914
|
-
|
915
|
-
return this;
|
916
|
-
};
|
917
|
-
|
918
|
-
|
919
|
-
|
920
|
-
|
921
|
-
/**
|
922
|
-
* Used in chaining. Runs a function there and then - not waiting for
|
923
|
-
* the events to fire (eg the onbeforedraw event)
|
924
|
-
*
|
925
|
-
* @param function func The function to execute
|
926
|
-
*/
|
927
|
-
this.exec = function (func)
|
928
|
-
{
|
929
|
-
func(this);
|
930
|
-
|
931
|
-
return this;
|
932
|
-
};
|
933
|
-
|
934
|
-
|
935
|
-
|
936
|
-
|
937
|
-
/**
|
938
|
-
* This function runs once only
|
939
|
-
* (put at the end of the file (before any effects))
|
940
|
-
*/
|
941
|
-
this.firstDrawFunc = function ()
|
942
|
-
{
|
943
|
-
};
|
944
|
-
|
945
|
-
|
946
|
-
|
947
|
-
|
948
|
-
/**
|
949
|
-
* HProgress Grow effect (which is also the VPogress Grow effect)
|
950
|
-
*
|
951
|
-
* @param object obj The chart object
|
952
|
-
*/
|
953
|
-
this.grow = function ()
|
954
|
-
{
|
955
|
-
|
956
|
-
var obj = this,
|
957
|
-
initial_value = this.currentValue,
|
958
|
-
opt = arguments[0] || {},
|
959
|
-
numFrames = opt.frames || 30,
|
960
|
-
frame = 0,
|
961
|
-
callback = arguments[1] || function () {},
|
962
|
-
diff = this.value - Number(this.currentValue),
|
963
|
-
increment = diff / numFrames
|
964
|
-
|
965
|
-
if (prop['chart.labels.center']) {
|
966
|
-
var labelsCenter = true;
|
967
|
-
this.set('labelsCenter', false);
|
968
|
-
}
|
969
|
-
|
970
|
-
|
971
|
-
|
972
|
-
function iterator ()
|
973
|
-
{
|
974
|
-
frame++;
|
975
|
-
|
976
|
-
if (frame <= numFrames) {
|
977
|
-
|
978
|
-
obj.value = initial_value + (increment * frame);
|
979
|
-
|
980
|
-
RG.clear(ca);
|
981
|
-
RG.redrawCanvas(ca);
|
982
|
-
|
983
|
-
RG.Effects.updateCanvas(iterator);
|
984
|
-
} else {
|
985
|
-
if (labelsCenter) {
|
986
|
-
obj.set('labelsCenter', true);
|
987
|
-
RG.redrawCanvas(ca);
|
988
|
-
}
|
989
|
-
callback();
|
990
|
-
}
|
991
|
-
}
|
992
|
-
|
993
|
-
iterator();
|
994
|
-
|
995
|
-
return this;
|
996
|
-
};
|
997
|
-
|
998
|
-
|
999
|
-
|
1000
|
-
/**
|
1001
|
-
* The chart is now always registered
|
1002
|
-
*/
|
1003
|
-
RG.Register(this);
|
1004
|
-
|
1005
|
-
|
1006
|
-
|
1007
|
-
|
1008
|
-
/**
|
1009
|
-
* This is the 'end' of the constructor so if the first argument
|
1010
|
-
* contains configuration data - handle that.
|
1011
|
-
*/
|
1012
|
-
if (parseConfObjectForOptions) {
|
1013
|
-
RG.parseObjectStyleConfig(this, conf.options);
|
1014
|
-
}
|
1015
|
-
};
|