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,1129 +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 chart constructor. This function sets up the object. It takes the ID (the HTML attribute) of the canvas as the
|
23
|
-
* first argument and the data as the second. If you need to change this, you can.
|
24
|
-
*
|
25
|
-
* NB: If tooltips are ever implemented they must go below the use event listeners!!
|
26
|
-
*
|
27
|
-
* @param string id The canvas tag ID
|
28
|
-
* @param number min The minimum value
|
29
|
-
* @param number max The maximum value
|
30
|
-
* @param number value The value reported by the thermometer
|
31
|
-
*/
|
32
|
-
RGraph.Thermometer = function (conf)
|
33
|
-
{
|
34
|
-
/**
|
35
|
-
* Allow for object config style
|
36
|
-
*/
|
37
|
-
if ( typeof conf === 'object'
|
38
|
-
&& typeof conf.id === 'string') {
|
39
|
-
|
40
|
-
var parseConfObjectForOptions = true; // Set this so the config is parsed (at the end of the constructor)
|
41
|
-
|
42
|
-
} else {
|
43
|
-
|
44
|
-
var conf = {
|
45
|
-
id: arguments[0],
|
46
|
-
min: arguments[1],
|
47
|
-
max: arguments[2],
|
48
|
-
value: arguments[3]
|
49
|
-
}
|
50
|
-
}
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
this.id = conf.id;
|
56
|
-
this.canvas = document.getElementById(this.id);
|
57
|
-
this.context = this.canvas.getContext ? this.canvas.getContext('2d') : null;
|
58
|
-
this.canvas.__object__ = this;
|
59
|
-
this.uid = RGraph.CreateUID();
|
60
|
-
this.canvas.uid = this.canvas.uid ? this.canvas.uid : RGraph.CreateUID();
|
61
|
-
this.colorsParsed = false;
|
62
|
-
this.type = 'thermometer';
|
63
|
-
this.isRGraph = true;
|
64
|
-
this.min = RGraph.stringsToNumbers(conf.min);
|
65
|
-
this.max = RGraph.stringsToNumbers(conf.max);
|
66
|
-
this.value = RGraph.stringsToNumbers(conf.value);
|
67
|
-
this.coords = [];
|
68
|
-
this.graphArea = [];
|
69
|
-
this.currentValue = null;
|
70
|
-
this.bulbRadius = 0;
|
71
|
-
this.bulbTopRadius = 0;
|
72
|
-
this.bulbTopCenterX = 0
|
73
|
-
this.bulbTopCenterY = 0;
|
74
|
-
this.coordsText = [];
|
75
|
-
this.original_colors = [];
|
76
|
-
this.firstDraw = true; // After the first draw this will be false
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
this.properties =
|
82
|
-
{
|
83
|
-
'chart.strokestyle': 'black',
|
84
|
-
'chart.colors': ['Gradient(#c00:red:#f66:#fcc)'],
|
85
|
-
'chart.gutter.left': 15,
|
86
|
-
'chart.gutter.right': 15,
|
87
|
-
'chart.gutter.top': 15,
|
88
|
-
'chart.gutter.bottom': 15,
|
89
|
-
'chart.ticksize': 3,
|
90
|
-
'chart.text.color': 'black',
|
91
|
-
'chart.text.font': 'Segoe UI, Arial, Verdana, sans-serif',
|
92
|
-
'chart.text.size': 12,
|
93
|
-
'chart.text.accessible': true,
|
94
|
-
'chart.text.accessible.overflow': 'visible',
|
95
|
-
'chart.text.accessible.pointerevents': false,
|
96
|
-
'chart.units.pre': '',
|
97
|
-
'chart.units.post': '',
|
98
|
-
'chart.zoom.factor': 1.5,
|
99
|
-
'chart.zoom.fade.in': true,
|
100
|
-
'chart.zoom.fade.out': true,
|
101
|
-
'chart.zoom.hdir': 'right',
|
102
|
-
'chart.zoom.vdir': 'down',
|
103
|
-
'chart.zoom.frames': 25,
|
104
|
-
'chart.zoom.delay': 16.666,
|
105
|
-
'chart.zoom.shadow': true,
|
106
|
-
'chart.zoom.background': true,
|
107
|
-
'chart.title': '',
|
108
|
-
'chart.title.side': '',
|
109
|
-
'chart.title.side.bold': true,
|
110
|
-
'chart.title.side.font': null,
|
111
|
-
'chart.shadow': true,
|
112
|
-
'chart.shadow.offsetx': 0,
|
113
|
-
'chart.shadow.offsety': 0,
|
114
|
-
'chart.shadow.blur': 15,
|
115
|
-
'chart.shadow.color': 'gray',
|
116
|
-
'chart.resizable': false,
|
117
|
-
'chart.contextmenu': null,
|
118
|
-
'chart.adjustable': false,
|
119
|
-
'chart.value.label': true,
|
120
|
-
'chart.value.label.decimals': null,
|
121
|
-
'chart.value.label.thousand': ',',
|
122
|
-
'chart.value.label.point': '.',
|
123
|
-
'chart.labels.count': 5,
|
124
|
-
'chart.scale.visible': false,
|
125
|
-
'chart.scale.decimals': 0,
|
126
|
-
'chart.annotatable': false,
|
127
|
-
'chart.annotate.color': 'black',
|
128
|
-
'chart.scale.decimals': 0,
|
129
|
-
'chart.scale.point': '.',
|
130
|
-
'chart.scale.thousand': ',',
|
131
|
-
'chart.tooltips': null,
|
132
|
-
'chart.tooltips.highlight': true,
|
133
|
-
'chart.tooltips.effect': 'fade',
|
134
|
-
'chart.tooltips.event': 'onclick',
|
135
|
-
'chart.highlight.stroke': 'rgba(0,0,0,0)',
|
136
|
-
'chart.highlight.fill': 'rgba(255,255,255,0.7)',
|
137
|
-
'chart.clearto': 'rgba(0,0,0,0)'
|
138
|
-
}
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
/**
|
143
|
-
* A simple check that the browser has canvas support
|
144
|
-
*/
|
145
|
-
if (!this.canvas) {
|
146
|
-
alert('[THERMOMETER] No canvas support');
|
147
|
-
return;
|
148
|
-
}
|
149
|
-
|
150
|
-
/**
|
151
|
-
* The thermometer can only have one data point so only this.$0 needs to be created
|
152
|
-
*/
|
153
|
-
this.$0 = {}
|
154
|
-
|
155
|
-
|
156
|
-
/**
|
157
|
-
* Translate half a pixel for antialiasing purposes - but only if it hasn't beeen
|
158
|
-
* done already
|
159
|
-
*/
|
160
|
-
if (!this.canvas.__rgraph_aa_translated__) {
|
161
|
-
this.context.translate(0.5,0.5);
|
162
|
-
|
163
|
-
this.canvas.__rgraph_aa_translated__ = true;
|
164
|
-
}
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
// Short variable names
|
170
|
-
var RG = RGraph,
|
171
|
-
ca = this.canvas,
|
172
|
-
co = ca.getContext('2d'),
|
173
|
-
prop = this.properties,
|
174
|
-
pa2 = RG.path2,
|
175
|
-
win = window,
|
176
|
-
doc = document,
|
177
|
-
ma = Math
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
/**
|
182
|
-
* "Decorate" the object with the generic effects if the effects library has been included
|
183
|
-
*/
|
184
|
-
if (RG.Effects && typeof RG.Effects.decorate === 'function') {
|
185
|
-
RG.Effects.decorate(this);
|
186
|
-
}
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
/**
|
192
|
-
* A setter.
|
193
|
-
*
|
194
|
-
* @param name string The name of the property to set
|
195
|
-
* @param value mixed The value of the property
|
196
|
-
*/
|
197
|
-
this.set =
|
198
|
-
this.Set = function (name)
|
199
|
-
{
|
200
|
-
var value = typeof arguments[1] === 'undefined' ? null : arguments[1];
|
201
|
-
|
202
|
-
/**
|
203
|
-
* the number of arguments is only one and it's an
|
204
|
-
* object - parse it for configuration data and return.
|
205
|
-
*/
|
206
|
-
if (arguments.length === 1 && typeof name === 'object') {
|
207
|
-
RG.parseObjectStyleConfig(this, name);
|
208
|
-
return this;
|
209
|
-
}
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
|
214
|
-
/**
|
215
|
-
* This should be done first - prepend the property name with "chart." if necessary
|
216
|
-
*/
|
217
|
-
if (name.substr(0,6) != 'chart.') {
|
218
|
-
name = 'chart.' + name;
|
219
|
-
}
|
220
|
-
|
221
|
-
|
222
|
-
|
223
|
-
|
224
|
-
// Convert uppercase letters to dot+lower case letter
|
225
|
-
while(name.match(/([A-Z])/)) {
|
226
|
-
name = name.replace(/([A-Z])/, '.' + RegExp.$1.toLowerCase());
|
227
|
-
}
|
228
|
-
|
229
|
-
|
230
|
-
|
231
|
-
|
232
|
-
|
233
|
-
|
234
|
-
/**
|
235
|
-
* Change of name
|
236
|
-
*/
|
237
|
-
if (name == 'chart.ylabels.count') {
|
238
|
-
name = 'chart.labels.count';
|
239
|
-
}
|
240
|
-
prop[name.toLowerCase()] = value;
|
241
|
-
|
242
|
-
return this;
|
243
|
-
};
|
244
|
-
|
245
|
-
|
246
|
-
|
247
|
-
|
248
|
-
/**
|
249
|
-
* A getter.
|
250
|
-
*
|
251
|
-
* @param name string The name of the property to get
|
252
|
-
*/
|
253
|
-
this.get =
|
254
|
-
this.Get = function (name)
|
255
|
-
{
|
256
|
-
/**
|
257
|
-
* This should be done first - prepend the property name with "chart." if necessary
|
258
|
-
*/
|
259
|
-
if (name.substr(0,6) != 'chart.') {
|
260
|
-
name = 'chart.' + name;
|
261
|
-
}
|
262
|
-
|
263
|
-
// Convert uppercase letters to dot+lower case letter
|
264
|
-
name = name.replace(/([A-Z])/g, function (str)
|
265
|
-
{
|
266
|
-
return '.' + String(RegExp.$1).toLowerCase()
|
267
|
-
});
|
268
|
-
|
269
|
-
return prop[name];
|
270
|
-
};
|
271
|
-
|
272
|
-
|
273
|
-
|
274
|
-
|
275
|
-
/**
|
276
|
-
* Draws the thermometer
|
277
|
-
*/
|
278
|
-
this.draw =
|
279
|
-
this.Draw = function ()
|
280
|
-
{
|
281
|
-
// Fire the custom RGraph onbeforedraw event (which should be fired before the chart is drawn)
|
282
|
-
RG.fireCustomEvent(this, 'onbeforedraw');
|
283
|
-
|
284
|
-
/**
|
285
|
-
* Parse the colors. This allows for simple gradient syntax
|
286
|
-
*/
|
287
|
-
if (!this.colorsParsed) {
|
288
|
-
this.parseColors();
|
289
|
-
|
290
|
-
// Don't want to do this again
|
291
|
-
this.colorsParsed = true;
|
292
|
-
}
|
293
|
-
|
294
|
-
/**
|
295
|
-
* Set the current value
|
296
|
-
*/
|
297
|
-
this.currentValue = this.value;
|
298
|
-
|
299
|
-
|
300
|
-
|
301
|
-
/**
|
302
|
-
* Stop this growing uncontrollably
|
303
|
-
*/
|
304
|
-
this.coordsText = [];
|
305
|
-
|
306
|
-
|
307
|
-
|
308
|
-
|
309
|
-
|
310
|
-
// This is new in May 2011 and facilitates indiviual gutter settings,
|
311
|
-
// eg chart.gutter.left
|
312
|
-
this.gutterLeft = prop['chart.gutter.left'];
|
313
|
-
this.gutterRight = prop['chart.gutter.right'];
|
314
|
-
this.gutterTop = prop['chart.gutter.top'];
|
315
|
-
this.gutterBottom = prop['chart.gutter.bottom'];
|
316
|
-
|
317
|
-
|
318
|
-
// Get the scale
|
319
|
-
this.scale2 = RG.getScale2(
|
320
|
-
this, {
|
321
|
-
'max':this.max,
|
322
|
-
'min':this.min,
|
323
|
-
'strict':true,
|
324
|
-
'scale.thousand':prop['chart.scale.thousand'],
|
325
|
-
'scale.point':prop['chart.scale.point'],
|
326
|
-
'scale.decimals':prop['chart.scale.decimals'],
|
327
|
-
'ylabels.count':prop['chart.labels.count'],
|
328
|
-
'scale.round':prop['chart.scale.round'],
|
329
|
-
'units.pre': prop['chart.units.pre'],
|
330
|
-
'units.post': prop['chart.units.post']
|
331
|
-
}
|
332
|
-
);
|
333
|
-
|
334
|
-
|
335
|
-
// Draw the background
|
336
|
-
this.drawBackground();
|
337
|
-
|
338
|
-
// Draw the bar that represents the value
|
339
|
-
this.drawBar();
|
340
|
-
|
341
|
-
|
342
|
-
|
343
|
-
|
344
|
-
// Draw the tickmarks
|
345
|
-
this.drawTickMarks();
|
346
|
-
|
347
|
-
|
348
|
-
|
349
|
-
/**
|
350
|
-
* Draw the label
|
351
|
-
*/
|
352
|
-
this.DrawLabels();
|
353
|
-
|
354
|
-
|
355
|
-
|
356
|
-
/**
|
357
|
-
* Draw the title
|
358
|
-
*/
|
359
|
-
if (prop['chart.title']) {
|
360
|
-
this.DrawTitle();
|
361
|
-
}
|
362
|
-
|
363
|
-
/**
|
364
|
-
* Draw the side title
|
365
|
-
*/
|
366
|
-
if (prop['chart.title.side']) {
|
367
|
-
this.DrawSideTitle();
|
368
|
-
}
|
369
|
-
|
370
|
-
/**
|
371
|
-
* This function enables resizing
|
372
|
-
*/
|
373
|
-
if (prop['chart.resizable']) {
|
374
|
-
RG.AllowResizing(this);
|
375
|
-
}
|
376
|
-
|
377
|
-
|
378
|
-
|
379
|
-
|
380
|
-
/**
|
381
|
-
* Setup the context menu if required
|
382
|
-
*/
|
383
|
-
if (prop['chart.contextmenu']) {
|
384
|
-
RG.ShowContext(this);
|
385
|
-
}
|
386
|
-
|
387
|
-
|
388
|
-
|
389
|
-
|
390
|
-
/**
|
391
|
-
* This installs the event listeners
|
392
|
-
*/
|
393
|
-
RG.InstallEventListeners(this);
|
394
|
-
|
395
|
-
|
396
|
-
/**
|
397
|
-
* Fire the onfirstdraw event
|
398
|
-
*/
|
399
|
-
if (this.firstDraw) {
|
400
|
-
RG.fireCustomEvent(this, 'onfirstdraw');
|
401
|
-
this.firstDraw = false;
|
402
|
-
this.firstDrawFunc();
|
403
|
-
}
|
404
|
-
|
405
|
-
|
406
|
-
|
407
|
-
/**
|
408
|
-
* Fire the custom RGraph ondraw event (which should be fired when you have drawn the chart)
|
409
|
-
*/
|
410
|
-
RG.FireCustomEvent(this, 'ondraw');
|
411
|
-
|
412
|
-
return this;
|
413
|
-
};
|
414
|
-
|
415
|
-
|
416
|
-
|
417
|
-
|
418
|
-
|
419
|
-
/**
|
420
|
-
* Draws the thermometer itself
|
421
|
-
*/
|
422
|
-
this.drawBackground =
|
423
|
-
this.DrawBackground = function ()
|
424
|
-
{
|
425
|
-
var bulbRadius = (ca.width - this.gutterLeft - this.gutterRight) / 2;
|
426
|
-
|
427
|
-
// This is the radius/x/y of the top "semi-circle"
|
428
|
-
this.bulbTopRadius = (ca.width - this.gutterLeft - this.gutterRight - 24)/ 2
|
429
|
-
this.bulbTopCenterX = this.gutterLeft + bulbRadius;
|
430
|
-
this.bulbTopCenterY = this.gutterTop + bulbRadius;
|
431
|
-
|
432
|
-
//This is the radius/x/y of the bottom bulb
|
433
|
-
this.bulbBottomRadius = bulbRadius;
|
434
|
-
this.bulbBottomCenterX = this.gutterLeft + bulbRadius;
|
435
|
-
this.bulbBottomCenterY = ca.height - this.gutterBottom - bulbRadius;
|
436
|
-
|
437
|
-
// Save the bulbRadius as an object variable
|
438
|
-
this.bulbRadius = bulbRadius;
|
439
|
-
|
440
|
-
// Draw the black background that becomes the border
|
441
|
-
co.beginPath();
|
442
|
-
co.fillStyle = prop['chart.strokestyle'];
|
443
|
-
|
444
|
-
if (prop['chart.shadow']) {
|
445
|
-
RG.setShadow(
|
446
|
-
this,
|
447
|
-
prop['chart.shadow.color'],
|
448
|
-
prop['chart.shadow.offsetx'],
|
449
|
-
prop['chart.shadow.offsety'],
|
450
|
-
prop['chart.shadow.blur']
|
451
|
-
);
|
452
|
-
}
|
453
|
-
|
454
|
-
co.fillRect(this.gutterLeft + 12,this.gutterTop + bulbRadius,ca.width - this.gutterLeft - this.gutterRight - 24, ca.height - this.gutterTop - this.gutterBottom - bulbRadius - bulbRadius);
|
455
|
-
|
456
|
-
// Bottom bulb
|
457
|
-
co.arc(this.bulbBottomCenterX, this.bulbBottomCenterY, bulbRadius, 0, RG.TWOPI, 0);
|
458
|
-
|
459
|
-
// Top bulb (which is actually a semi-circle)
|
460
|
-
co.arc(this.bulbTopCenterX,this.bulbTopCenterY,this.bulbTopRadius,0,RG.TWOPI,0);
|
461
|
-
co.fill();
|
462
|
-
|
463
|
-
// Save the radius of the top semi circle
|
464
|
-
|
465
|
-
|
466
|
-
RG.NoShadow(this);
|
467
|
-
|
468
|
-
// Draw the white inner content background that creates the border
|
469
|
-
co.beginPath();
|
470
|
-
co.fillStyle = 'white';
|
471
|
-
co.fillRect(this.gutterLeft + 12 + 1,this.gutterTop + bulbRadius,ca.width - this.gutterLeft - this.gutterRight - 24 - 2,ca.height - this.gutterTop - this.gutterBottom - bulbRadius - bulbRadius);
|
472
|
-
co.arc(this.gutterLeft + bulbRadius, ca.height - this.gutterBottom - bulbRadius, bulbRadius - 1, 0, RG.TWOPI, 0);
|
473
|
-
co.arc(this.gutterLeft + bulbRadius,this.gutterTop + bulbRadius,((ca.width - this.gutterLeft - this.gutterRight - 24)/ 2) - 1,0,RG.TWOPI,0);
|
474
|
-
co.fill();
|
475
|
-
|
476
|
-
// Draw the bottom content of the thermometer
|
477
|
-
co.beginPath();
|
478
|
-
co.fillStyle = prop['chart.colors'][0];
|
479
|
-
co.arc(this.gutterLeft + bulbRadius, ca.height - this.gutterBottom - bulbRadius, bulbRadius - 1, 0, RG.TWOPI, 0);
|
480
|
-
co.rect(this.gutterLeft + 12 + 1, ca.height - this.gutterBottom - bulbRadius - bulbRadius,ca.width - this.gutterLeft - this.gutterRight - 24 - 2, bulbRadius);
|
481
|
-
co.fill();
|
482
|
-
|
483
|
-
|
484
|
-
// Save the X/Y/width/height
|
485
|
-
this.graphArea[0] = this.gutterLeft + 12 + 1;
|
486
|
-
this.graphArea[1] = this.gutterTop + bulbRadius;
|
487
|
-
this.graphArea[2] = ca.width - this.gutterLeft - this.gutterRight - 24 - 2;
|
488
|
-
this.graphArea[3] = (ca.height - this.gutterBottom - bulbRadius - bulbRadius) - (this.graphArea[1]);
|
489
|
-
};
|
490
|
-
|
491
|
-
|
492
|
-
|
493
|
-
|
494
|
-
/**
|
495
|
-
* This draws the bar that indicates the value of the thermometer
|
496
|
-
*/
|
497
|
-
this.drawBar =
|
498
|
-
this.DrawBar = function ()
|
499
|
-
{
|
500
|
-
var barHeight = ((this.value - this.min) / (this.max - this.min)) * this.graphArea[3];
|
501
|
-
|
502
|
-
// Draw the actual bar that indicates the value
|
503
|
-
co.beginPath();
|
504
|
-
co.fillStyle = prop['chart.colors'][0];
|
505
|
-
|
506
|
-
// This solves an issue with ExCanvas showing a whiite cutout in the chart
|
507
|
-
if (RGraph.ISOLD) {
|
508
|
-
co.arc(this.bulbBottomCenterX, this.bulbBottomCenterY, this.bulbBottomRadius - 1, 0, RG.TWOPI, false)
|
509
|
-
}
|
510
|
-
|
511
|
-
|
512
|
-
co.rect(this.graphArea[0],
|
513
|
-
this.graphArea[1] + this.graphArea[3] - barHeight,
|
514
|
-
this.graphArea[2],
|
515
|
-
barHeight + 2);
|
516
|
-
co.fill();
|
517
|
-
|
518
|
-
this.coords[0] = [this.graphArea[0],this.graphArea[1] + this.graphArea[3] - barHeight,this.graphArea[2],barHeight];
|
519
|
-
};
|
520
|
-
|
521
|
-
|
522
|
-
|
523
|
-
|
524
|
-
/**
|
525
|
-
* Draws the tickmarks of the thermometer
|
526
|
-
*/
|
527
|
-
this.drawTickMarks =
|
528
|
-
this.DrawTickMarks = function ()
|
529
|
-
{
|
530
|
-
co.strokeStyle = prop['chart.strokestyle']
|
531
|
-
var ticksize = prop['chart.ticksize'];
|
532
|
-
|
533
|
-
// Left hand side tickmarks
|
534
|
-
co.beginPath();
|
535
|
-
for (var i=this.graphArea[1]; i<=(this.graphArea[1] + this.graphArea[3]); i += (this.graphArea[3] / 10)) {
|
536
|
-
co.moveTo(this.gutterLeft + 12, Math.round(i));
|
537
|
-
co.lineTo(this.gutterLeft + 12 + ticksize, Math.round(i));
|
538
|
-
}
|
539
|
-
co.stroke();
|
540
|
-
|
541
|
-
// Right hand side tickmarks
|
542
|
-
co.beginPath();
|
543
|
-
for (var i=this.graphArea[1]; i<=(this.graphArea[1] + this.graphArea[3]); i += (this.graphArea[3] / 10)) {
|
544
|
-
co.moveTo(ca.width - (this.gutterRight + 12), Math.round(i));
|
545
|
-
co.lineTo(ca.width - (this.gutterRight + 12 + ticksize), Math.round(i));
|
546
|
-
}
|
547
|
-
co.stroke();
|
548
|
-
};
|
549
|
-
|
550
|
-
|
551
|
-
|
552
|
-
|
553
|
-
/**
|
554
|
-
* Draws the labels of the thermometer. Now (4th August 2011) draws
|
555
|
-
* the scale too
|
556
|
-
*/
|
557
|
-
this.drawLabels =
|
558
|
-
this.DrawLabels = function ()
|
559
|
-
{
|
560
|
-
/**
|
561
|
-
* This draws draws the label that sits at the top of the chart
|
562
|
-
*/
|
563
|
-
if (prop['chart.value.label']) {
|
564
|
-
co.fillStyle = prop['chart.text.color'];
|
565
|
-
|
566
|
-
// Weird...
|
567
|
-
var text = prop['chart.scale.visible'] ? RG.number_format(this,
|
568
|
-
this.value.toFixed(typeof prop['chart.value.label.decimals'] == 'number' ? prop['chart.value.label.decimals'] : prop['chart.scale.decimals'])
|
569
|
-
)
|
570
|
-
:
|
571
|
-
RG.number_format(this,
|
572
|
-
this.value.toFixed(typeof prop['chart.value.label.decimals'] == 'number' ? prop['chart.value.label.decimals'] : prop['chart.scale.decimals']),
|
573
|
-
prop['chart.units.pre'],
|
574
|
-
prop['chart.units.post']
|
575
|
-
);
|
576
|
-
|
577
|
-
RG.Text2(this, {'font': prop['chart.text.font'],
|
578
|
-
'size': prop['chart.text.size'],
|
579
|
-
'x':this.gutterLeft + this.bulbRadius,
|
580
|
-
'y': this.coords[0][1] + 7,
|
581
|
-
'text': text,
|
582
|
-
'valign':'top',
|
583
|
-
'halign':'center',
|
584
|
-
'bounding':true,
|
585
|
-
'boundingFill':'white',
|
586
|
-
'tag': 'value.label'
|
587
|
-
});
|
588
|
-
}
|
589
|
-
|
590
|
-
|
591
|
-
/**
|
592
|
-
* Draw the scale if requested
|
593
|
-
*/
|
594
|
-
if (prop['chart.scale.visible']) {
|
595
|
-
this.DrawScale();
|
596
|
-
}
|
597
|
-
};
|
598
|
-
|
599
|
-
|
600
|
-
|
601
|
-
|
602
|
-
/**
|
603
|
-
* Draws the title
|
604
|
-
*/
|
605
|
-
this.drawTitle =
|
606
|
-
this.DrawTitle = function ()
|
607
|
-
{
|
608
|
-
co.fillStyle = prop['chart.text.color'];
|
609
|
-
RG.Text2(this, {'font': prop['chart.text.font'],
|
610
|
-
'size': prop['chart.text.size'] + 2,
|
611
|
-
'x':this.gutterLeft + ((ca.width - this.gutterLeft - this.gutterRight) / 2),
|
612
|
-
'y': this.gutterTop,
|
613
|
-
'text': String(prop['chart.title']),
|
614
|
-
'valign':'center',
|
615
|
-
'halign':'center',
|
616
|
-
'bold':true,
|
617
|
-
'tag': 'title'
|
618
|
-
});
|
619
|
-
};
|
620
|
-
|
621
|
-
|
622
|
-
|
623
|
-
|
624
|
-
/**
|
625
|
-
* Draws the title
|
626
|
-
*/
|
627
|
-
this.drawSideTitle =
|
628
|
-
this.DrawSideTitle = function ()
|
629
|
-
{
|
630
|
-
var font = prop['chart.title.side.font'] ? prop['chart.title.side.font'] : prop['chart.text.font'];
|
631
|
-
var size = prop['chart.title.side.size'] ? prop['chart.title.side.size'] : prop['chart.text.size'] + 2;
|
632
|
-
|
633
|
-
co.fillStyle = prop['chart.text.color'];
|
634
|
-
RG.Text2(this, {'font': font,
|
635
|
-
'size': size + 2,
|
636
|
-
'x':this.gutterLeft - 3,
|
637
|
-
'y': ((ca.height - this.gutterTop - this.gutterBottom) / 2) + this.gutterTop,
|
638
|
-
'text': String(prop['chart.title.side']),
|
639
|
-
'valign':'center',
|
640
|
-
'halign':'center',
|
641
|
-
'angle':270,
|
642
|
-
'bold':prop['chart.title.side.bold'],
|
643
|
-
'tag': 'title.side'
|
644
|
-
});
|
645
|
-
};
|
646
|
-
|
647
|
-
|
648
|
-
|
649
|
-
|
650
|
-
/**
|
651
|
-
* Draw the scale if requested
|
652
|
-
*/
|
653
|
-
this.drawScale =
|
654
|
-
this.DrawScale = function ()
|
655
|
-
{
|
656
|
-
var numLabels = prop['chart.labels.count']; // The -1 is so that the number of labels tallies with what is displayed
|
657
|
-
var step = (this.max - this.min) / numLabels;
|
658
|
-
|
659
|
-
co.fillStyle = prop['chart.text.color'];
|
660
|
-
|
661
|
-
var font = prop['chart.text.font'];
|
662
|
-
var size = prop['chart.text.size'];
|
663
|
-
var units_pre = prop['chart.units.pre'];
|
664
|
-
var units_post = prop['chart.units.post'];
|
665
|
-
var decimals = prop['chart.scale.decimals'];
|
666
|
-
|
667
|
-
for (var i=1; i<=numLabels; ++i) {
|
668
|
-
|
669
|
-
var x = ca.width - this.gutterRight;
|
670
|
-
var y = ca.height - this.gutterBottom - (2 * this.bulbRadius) - ((this.graphArea[3] / numLabels) * i);
|
671
|
-
var text = RG.number_format(this, String((this.min + (i * step)).toFixed(decimals)), units_pre, units_post);
|
672
|
-
|
673
|
-
RG.Text2(this, {'font':font,
|
674
|
-
'size':size,
|
675
|
-
'x':x-6,
|
676
|
-
'y':y,
|
677
|
-
'text':text,
|
678
|
-
'valign':'center',
|
679
|
-
'tag': 'scale'
|
680
|
-
});
|
681
|
-
}
|
682
|
-
|
683
|
-
// Draw zero
|
684
|
-
RG.Text2(this, {'font':font,
|
685
|
-
'size':size,
|
686
|
-
'x':x-6,
|
687
|
-
'y':ca.height - this.gutterBottom - (2 * this.bulbRadius),
|
688
|
-
'text':RG.number_format(this, (this.min).toFixed(decimals),units_pre,units_post),
|
689
|
-
'valign':'center',
|
690
|
-
'tag': 'scale'
|
691
|
-
});
|
692
|
-
};
|
693
|
-
|
694
|
-
|
695
|
-
|
696
|
-
|
697
|
-
/**
|
698
|
-
* Returns the focused/clicked bar
|
699
|
-
*
|
700
|
-
* @param event e The event object
|
701
|
-
*/
|
702
|
-
this.getShape =
|
703
|
-
this.getBar = function (e)
|
704
|
-
{
|
705
|
-
for (var i=0; i<this.coords.length; i++) {
|
706
|
-
|
707
|
-
var mouseCoords = RGraph.getMouseXY(e);
|
708
|
-
var mouseX = mouseCoords[0];
|
709
|
-
var mouseY = mouseCoords[1];
|
710
|
-
|
711
|
-
var left = this.coords[i][0];
|
712
|
-
var top = this.coords[i][1];
|
713
|
-
var width = this.coords[i][2];
|
714
|
-
var height = this.coords[i][3];
|
715
|
-
|
716
|
-
if ( (mouseX >= left && mouseX <= (left + width) && mouseY >= top && mouseY <= (top + height + this.bulbBottomRadius)) // The bulbBottomRadius is added as the rect and the bulb don't fully cover the red bit
|
717
|
-
|| RG.getHypLength(this.bulbBottomCenterX, this.bulbBottomCenterY, mouseX, mouseY) <= this.bulbBottomRadius) {
|
718
|
-
|
719
|
-
|
720
|
-
var tooltip = RG.parseTooltipText ? RG.parseTooltipText(prop['chart.tooltips'], i) : '';
|
721
|
-
|
722
|
-
|
723
|
-
return {0: this, 'object': this,
|
724
|
-
1: left, 'x': left,
|
725
|
-
2: top, 'y': top,
|
726
|
-
3: width, 'width': width,
|
727
|
-
4: height, 'height': height,
|
728
|
-
5: i, 'index': i,
|
729
|
-
'tooltip': tooltip
|
730
|
-
};
|
731
|
-
}
|
732
|
-
}
|
733
|
-
|
734
|
-
return null;
|
735
|
-
};
|
736
|
-
|
737
|
-
|
738
|
-
|
739
|
-
|
740
|
-
/**
|
741
|
-
* This function returns the value that the mouse is positioned t, regardless of
|
742
|
-
* the actual indicated value.
|
743
|
-
*
|
744
|
-
* @param object e The event object (or it can also be an two element array containing the X/Y coords)
|
745
|
-
*/
|
746
|
-
this.getValue = function (arg)
|
747
|
-
{
|
748
|
-
if (arg.length == 2) {
|
749
|
-
var mouseX = arg[0];
|
750
|
-
var mouseY = arg[1];
|
751
|
-
} else {
|
752
|
-
var mouseCoords = RGraph.getMouseXY(arg);
|
753
|
-
var mouseX = mouseCoords[0];
|
754
|
-
var mouseY = mouseCoords[1];
|
755
|
-
}
|
756
|
-
|
757
|
-
|
758
|
-
|
759
|
-
var value = this.graphArea[3] - (mouseY - this.graphArea[1]);
|
760
|
-
value = (value / this.graphArea[3]) * (this.max - this.min);
|
761
|
-
value = value + this.min;
|
762
|
-
|
763
|
-
value = Math.max(value, this.min);
|
764
|
-
value = Math.min(value, this.max);
|
765
|
-
|
766
|
-
return value;
|
767
|
-
};
|
768
|
-
|
769
|
-
|
770
|
-
|
771
|
-
|
772
|
-
/**
|
773
|
-
* Each object type has its own Highlight() function which highlights the appropriate shape
|
774
|
-
*
|
775
|
-
* @param object shape The shape to highlight
|
776
|
-
*/
|
777
|
-
this.highlight =
|
778
|
-
this.Highlight = function (shape)
|
779
|
-
{
|
780
|
-
if (prop['chart.tooltips.highlight']) {
|
781
|
-
|
782
|
-
if (typeof prop['chart.highlight.style'] === 'function') {
|
783
|
-
(prop['chart.highlight.style'])(shape);
|
784
|
-
return;
|
785
|
-
}
|
786
|
-
|
787
|
-
pa2(co, 'b r % % % % a % % % % % false s % f %',
|
788
|
-
shape['x'],
|
789
|
-
shape['y'],
|
790
|
-
shape['width'],
|
791
|
-
shape['height'] + this.bulbBottomRadius,
|
792
|
-
this.bulbBottomCenterX,
|
793
|
-
this.bulbBottomCenterY,
|
794
|
-
this.bulbBottomRadius - 1,
|
795
|
-
0,
|
796
|
-
RG.TWOPI,
|
797
|
-
prop['chart.highlight.stroke'],
|
798
|
-
prop['chart.highlight.fill']
|
799
|
-
);
|
800
|
-
}
|
801
|
-
};
|
802
|
-
|
803
|
-
|
804
|
-
|
805
|
-
|
806
|
-
/**
|
807
|
-
* The getObjectByXY() worker method. Don't call this - call:
|
808
|
-
*
|
809
|
-
* RGraph.ObjectRegistry.getObjectByXY(e)
|
810
|
-
*
|
811
|
-
* @param object e The event object
|
812
|
-
*/
|
813
|
-
this.getObjectByXY = function (e)
|
814
|
-
{
|
815
|
-
var mouseXY = RGraph.getMouseXY(e);
|
816
|
-
|
817
|
-
if (
|
818
|
-
mouseXY[0] > this.gutterLeft
|
819
|
-
&& mouseXY[0] < (ca.width - this.gutterRight)
|
820
|
-
&& mouseXY[1] >= this.gutterTop
|
821
|
-
&& mouseXY[1] <= (ca.height - this.gutterBottom)
|
822
|
-
) {
|
823
|
-
|
824
|
-
return this;
|
825
|
-
}
|
826
|
-
};
|
827
|
-
|
828
|
-
|
829
|
-
|
830
|
-
|
831
|
-
/**
|
832
|
-
* This method handles the adjusting calculation for when the mouse is moved
|
833
|
-
*
|
834
|
-
* @param object e The event object
|
835
|
-
*/
|
836
|
-
this.adjusting_mousemove =
|
837
|
-
this.Adjusting_mousemove = function (e)
|
838
|
-
{
|
839
|
-
/**
|
840
|
-
* Handle adjusting for the Thermometer
|
841
|
-
*/
|
842
|
-
if (prop['chart.adjustable'] && RG.Registry.Get('chart.adjusting') && RG.Registry.Get('chart.adjusting').uid == this.uid) {
|
843
|
-
|
844
|
-
var mouseXY = RGraph.getMouseXY(e);
|
845
|
-
var value = this.getValue(e);
|
846
|
-
|
847
|
-
if (typeof(value) == 'number') {
|
848
|
-
|
849
|
-
// Fire the onadjust event
|
850
|
-
RG.FireCustomEvent(this, 'onadjust');
|
851
|
-
|
852
|
-
this.value = Number(value.toFixed(prop['chart.scale.decimals']));
|
853
|
-
|
854
|
-
RG.redrawCanvas(ca);
|
855
|
-
}
|
856
|
-
}
|
857
|
-
};
|
858
|
-
|
859
|
-
|
860
|
-
|
861
|
-
|
862
|
-
/**
|
863
|
-
* This function positions a tooltip when it is displayed
|
864
|
-
*
|
865
|
-
* @param obj object The chart object
|
866
|
-
* @param int x The X coordinate specified for the tooltip
|
867
|
-
* @param int y The Y coordinate specified for the tooltip
|
868
|
-
* @param objec tooltip The tooltips DIV element
|
869
|
-
*/
|
870
|
-
this.positionTooltip = function (obj, x, y, tooltip, idx)
|
871
|
-
{
|
872
|
-
var coordX = obj.coords[tooltip.__index__][0];
|
873
|
-
var coordY = obj.coords[tooltip.__index__][1];
|
874
|
-
var coordW = obj.coords[tooltip.__index__][2];
|
875
|
-
var coordH = obj.coords[tooltip.__index__][3];
|
876
|
-
var canvasXY = RGraph.getCanvasXY(ca);
|
877
|
-
var mouseXY = RG.getMouseXY(window.event);
|
878
|
-
var gutterLeft = obj.gutterLeft;
|
879
|
-
var gutterTop = obj.gutterTop;
|
880
|
-
var width = tooltip.offsetWidth;
|
881
|
-
var height = tooltip.offsetHeight;
|
882
|
-
|
883
|
-
// Set the top position
|
884
|
-
tooltip.style.left = 0;
|
885
|
-
tooltip.style.top = window.event.pageY - height - 5 + 'px';
|
886
|
-
|
887
|
-
// By default any overflow is hidden
|
888
|
-
tooltip.style.overflow = '';
|
889
|
-
|
890
|
-
// Reposition the tooltip if at the edges:
|
891
|
-
|
892
|
-
// LEFT edge
|
893
|
-
if (canvasXY[0] + mouseXY[0] - (width / 2) < 0) {
|
894
|
-
tooltip.style.left = canvasXY[0] + mouseXY[0] - (width * 0.1) + 'px';
|
895
|
-
|
896
|
-
// RIGHT edge
|
897
|
-
} else if (canvasXY[0] + mouseXY[0] + (width / 2) > doc.body.offsetWidth) {
|
898
|
-
tooltip.style.left = canvasXY[0] + mouseXY[0] - (width * 0.9) + 'px';
|
899
|
-
|
900
|
-
// Default positioning - CENTERED
|
901
|
-
} else {
|
902
|
-
tooltip.style.left = canvasXY[0] + mouseXY[0] - (width / 2) + 'px';
|
903
|
-
}
|
904
|
-
};
|
905
|
-
|
906
|
-
|
907
|
-
|
908
|
-
|
909
|
-
/**
|
910
|
-
* Returns the appropriate Y coord for a value
|
911
|
-
*
|
912
|
-
* @param number value The value to return the coord for
|
913
|
-
*/
|
914
|
-
this.getYCoord = function (value)
|
915
|
-
{
|
916
|
-
if (value > this.max || value < this.min) {
|
917
|
-
return null;
|
918
|
-
}
|
919
|
-
|
920
|
-
var y = (this.graphArea[1] + this.graphArea[3]) - (((value - this.min) / (this.max - this.min)) * this.graphArea[3]);
|
921
|
-
|
922
|
-
return y;
|
923
|
-
};
|
924
|
-
|
925
|
-
|
926
|
-
|
927
|
-
|
928
|
-
/**
|
929
|
-
* This returns true/false as to whether the cursor is over the chart area.
|
930
|
-
* The cursor does not necessarily have to be over the bar itself.
|
931
|
-
*/
|
932
|
-
this.overChartArea = function (e)
|
933
|
-
{
|
934
|
-
var mouseXY = RG.getMouseXY(e);
|
935
|
-
var mouseX = mouseXY[0];
|
936
|
-
var mouseY = mouseXY[1];
|
937
|
-
|
938
|
-
// Is the mouse in the "graphArea"?
|
939
|
-
// ( with a little extra height added)
|
940
|
-
if ( mouseX >= this.graphArea[0]
|
941
|
-
&& mouseX <= (this.graphArea[0] + this.graphArea[2])
|
942
|
-
&& mouseY >= this.graphArea[1]
|
943
|
-
&& mouseY <= (this.graphArea[1] + this.graphArea[3] + this.bulbRadius)
|
944
|
-
) {
|
945
|
-
|
946
|
-
return true;
|
947
|
-
}
|
948
|
-
|
949
|
-
// Is the mouse over the bottom bulb?
|
950
|
-
if (RG.getHypLength(this.bulbBottomCenterX, this.bulbBottomCenterY, mouseX, mouseY) <= this.bulbRadius) {
|
951
|
-
return true;
|
952
|
-
}
|
953
|
-
|
954
|
-
// Is the mouse over the semi-circle at the top?
|
955
|
-
if (RG.getHypLength(this.bulbTopCenterX, this.bulbTopCenterY, mouseX, mouseY) <= this.bulbTopRadius) {
|
956
|
-
return true;
|
957
|
-
}
|
958
|
-
|
959
|
-
return false;
|
960
|
-
};
|
961
|
-
|
962
|
-
|
963
|
-
|
964
|
-
|
965
|
-
/**
|
966
|
-
* This allows for easy specification of gradients
|
967
|
-
*/
|
968
|
-
this.parseColors = function ()
|
969
|
-
{
|
970
|
-
// Save the original colors so that they can be restored when the canvas is reset
|
971
|
-
if (this.original_colors.length === 0) {
|
972
|
-
this.original_colors['chart.colors'] = RG.array_clone(prop['chart.colors']);
|
973
|
-
}
|
974
|
-
|
975
|
-
|
976
|
-
|
977
|
-
|
978
|
-
|
979
|
-
var colors = prop['chart.colors'];
|
980
|
-
|
981
|
-
for (var i=0; i<colors.length; ++i) {
|
982
|
-
colors[i] = this.parseSingleColorForGradient(colors[i]);
|
983
|
-
}
|
984
|
-
};
|
985
|
-
|
986
|
-
|
987
|
-
|
988
|
-
|
989
|
-
/**
|
990
|
-
* Use this function to reset the object to the post-constructor state. Eg reset colors if
|
991
|
-
* need be etc
|
992
|
-
*/
|
993
|
-
this.reset = function ()
|
994
|
-
{
|
995
|
-
};
|
996
|
-
|
997
|
-
|
998
|
-
|
999
|
-
|
1000
|
-
/**
|
1001
|
-
* This parses a single color value
|
1002
|
-
*/
|
1003
|
-
this.parseSingleColorForGradient = function (color)
|
1004
|
-
{
|
1005
|
-
if (!color) {
|
1006
|
-
return color;
|
1007
|
-
}
|
1008
|
-
|
1009
|
-
if (typeof color === 'string' && color.match(/^gradient\((.*)\)$/i)) {
|
1010
|
-
|
1011
|
-
var parts = RegExp.$1.split(':');
|
1012
|
-
|
1013
|
-
// Create the gradient
|
1014
|
-
var grad = co.createLinearGradient(prop['chart.gutter.left'], 0, ca.width - prop['chart.gutter.right'],0);
|
1015
|
-
|
1016
|
-
var diff = 1 / (parts.length - 1);
|
1017
|
-
|
1018
|
-
grad.addColorStop(0, RG.trim(parts[0]));
|
1019
|
-
|
1020
|
-
for (var j=1; j<parts.length; ++j) {
|
1021
|
-
grad.addColorStop(j * diff, RG.trim(parts[j]));
|
1022
|
-
}
|
1023
|
-
}
|
1024
|
-
|
1025
|
-
return grad ? grad : color;
|
1026
|
-
};
|
1027
|
-
|
1028
|
-
|
1029
|
-
|
1030
|
-
|
1031
|
-
/**
|
1032
|
-
* Using a function to add events makes it easier to facilitate method chaining
|
1033
|
-
*
|
1034
|
-
* @param string type The type of even to add
|
1035
|
-
* @param function func
|
1036
|
-
*/
|
1037
|
-
this.on = function (type, func)
|
1038
|
-
{
|
1039
|
-
if (type.substr(0,2) !== 'on') {
|
1040
|
-
type = 'on' + type;
|
1041
|
-
}
|
1042
|
-
|
1043
|
-
this[type] = func;
|
1044
|
-
|
1045
|
-
return this;
|
1046
|
-
};
|
1047
|
-
|
1048
|
-
|
1049
|
-
|
1050
|
-
|
1051
|
-
/**
|
1052
|
-
* This function runs once only
|
1053
|
-
* (put at the end of the file (before any effects))
|
1054
|
-
*/
|
1055
|
-
this.firstDrawFunc = function ()
|
1056
|
-
{
|
1057
|
-
};
|
1058
|
-
|
1059
|
-
|
1060
|
-
|
1061
|
-
|
1062
|
-
/**
|
1063
|
-
* Gauge Grow
|
1064
|
-
*
|
1065
|
-
* This effect gradually increases the represented value
|
1066
|
-
*
|
1067
|
-
* @param object obj The chart object
|
1068
|
-
* @param Not used - pass null
|
1069
|
-
* @param function An optional callback function
|
1070
|
-
*/
|
1071
|
-
this.grow = function ()
|
1072
|
-
{
|
1073
|
-
var obj = this;
|
1074
|
-
var callback = arguments[1] || function () {};
|
1075
|
-
var opt = arguments[0] || {};
|
1076
|
-
var frames = opt.frames ? opt.frames : 30;
|
1077
|
-
var origValue = Number(obj.currentValue);
|
1078
|
-
var newValue = obj.value;
|
1079
|
-
newValue = ma.min(newValue, this.max);
|
1080
|
-
newValue = ma.max(newValue, this.min);
|
1081
|
-
var diff = newValue - origValue;
|
1082
|
-
var step = (diff / frames);
|
1083
|
-
var frame = 0;
|
1084
|
-
|
1085
|
-
|
1086
|
-
function iterate ()
|
1087
|
-
{
|
1088
|
-
// Set the new value
|
1089
|
-
obj.value = (step * frame) + origValue;
|
1090
|
-
|
1091
|
-
RGraph.clear(obj.canvas);
|
1092
|
-
RGraph.redrawCanvas(obj.canvas);
|
1093
|
-
|
1094
|
-
if (frame < frames) {
|
1095
|
-
frame++;
|
1096
|
-
RGraph.Effects.updateCanvas(iterate);
|
1097
|
-
} else {
|
1098
|
-
callback(obj);
|
1099
|
-
}
|
1100
|
-
}
|
1101
|
-
|
1102
|
-
iterate();
|
1103
|
-
|
1104
|
-
return this;
|
1105
|
-
};
|
1106
|
-
|
1107
|
-
|
1108
|
-
|
1109
|
-
RG.att(ca);
|
1110
|
-
|
1111
|
-
|
1112
|
-
|
1113
|
-
|
1114
|
-
/**
|
1115
|
-
* Now, because canvases can support multiple charts, canvases must always be registered
|
1116
|
-
*/
|
1117
|
-
RG.Register(this);
|
1118
|
-
|
1119
|
-
|
1120
|
-
|
1121
|
-
|
1122
|
-
/**
|
1123
|
-
* This is the 'end' of the constructor so if the first argument
|
1124
|
-
* contains configuration data - handle that.
|
1125
|
-
*/
|
1126
|
-
if (parseConfObjectForOptions) {
|
1127
|
-
RG.parseObjectStyleConfig(this, conf.options);
|
1128
|
-
}
|
1129
|
-
};
|