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,621 +1,36 @@
|
|
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 starts at just 99 GBP and |
|
11
|
-
* | you can read about it here: |
|
12
|
-
* | |
|
13
|
-
* | http://www.rgraph.net/license |
|
14
|
-
* o--------------------------------------------------------------------------------o
|
15
|
-
*/
|
16
|
-
|
17
|
-
/**
|
18
|
-
* Having this here means that the RGraph libraries can be included in any order, instead of you having
|
19
|
-
* to include the common core library first.
|
20
|
-
*/
|
21
1
|
|
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
|
-
this.canvas.__object__ = this;
|
58
|
-
this.original_colors = [];
|
59
|
-
this.firstDraw = true; // After the first draw this will be false
|
60
|
-
|
61
|
-
|
62
|
-
/**
|
63
|
-
* This defines the type of this shape
|
64
|
-
*/
|
65
|
-
this.type = 'drawing.background';
|
66
|
-
|
67
|
-
|
68
|
-
/**
|
69
|
-
* This facilitates easy object identification, and should always be true
|
70
|
-
*/
|
71
|
-
this.isRGraph = true;
|
72
|
-
|
73
|
-
|
74
|
-
/**
|
75
|
-
* This adds a uid to the object that you can use for identification purposes
|
76
|
-
*/
|
77
|
-
this.uid = RGraph.CreateUID();
|
78
|
-
|
79
|
-
|
80
|
-
/**
|
81
|
-
* This adds a UID to the canvas for identification purposes
|
82
|
-
*/
|
83
|
-
this.canvas.uid = this.canvas.uid ? this.canvas.uid : RGraph.createUID();
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
/**
|
89
|
-
* Some example background properties
|
90
|
-
*/
|
91
|
-
this.properties =
|
92
|
-
{
|
93
|
-
'chart.background.barcolor1': 'rgba(0,0,0,0)',
|
94
|
-
'chart.background.barcolor2': 'rgba(0,0,0,0)',
|
95
|
-
'chart.background.grid': true,
|
96
|
-
'chart.background.grid.color': '#ddd',
|
97
|
-
'chart.background.grid.width': 1,
|
98
|
-
'chart.background.grid.vlines': true,
|
99
|
-
'chart.background.grid.hlines': true,
|
100
|
-
'chart.background.grid.border': true,
|
101
|
-
'chart.background.grid.autofit':true,
|
102
|
-
'chart.background.grid.autofit.numhlines': 5,
|
103
|
-
'chart.background.grid.autofit.numvlines': 20,
|
104
|
-
'chart.background.grid.dashed': false,
|
105
|
-
'chart.background.grid.dotted': false,
|
106
|
-
|
107
|
-
'chart.background.image': null,
|
108
|
-
'chart.background.image.stretch': true,
|
109
|
-
'chart.background.image.x': null,
|
110
|
-
'chart.background.image.y': null,
|
111
|
-
'chart.background.image.w': null,
|
112
|
-
'chart.background.image.h': null,
|
113
|
-
'chart.background.image.align': null,
|
114
|
-
'chart.background.color': null,
|
115
|
-
|
116
|
-
'chart.gutter.left': 25,
|
117
|
-
'chart.gutter.right': 25,
|
118
|
-
'chart.gutter.top': 25,
|
119
|
-
'chart.gutter.bottom': 25,
|
120
|
-
|
121
|
-
'chart.text.color': 'black', // Gradients aren't supported for this color
|
122
|
-
'chart.text.size': 12,
|
123
|
-
'chart.text.font': 'Segoe UI, Arial, Verdana, sans-serif',
|
124
|
-
'chart.text.accessible': true,
|
125
|
-
'chart.text.accessible.overflow': 'visible',
|
126
|
-
'chart.text.accessible.pointerevents': false,
|
127
|
-
'chart.events.click': null,
|
128
|
-
'chart.events.mousemove': null,
|
129
|
-
|
130
|
-
'chart.tooltips': null,
|
131
|
-
'chart.tooltips.highlight': true,
|
132
|
-
'chart.tooltips.event': 'onclick',
|
133
|
-
|
134
|
-
'chart.highlight.stroke': 'rgba(0,0,0,0)',
|
135
|
-
'chart.highlight.fill': 'rgba(255,255,255,0.7)',
|
136
|
-
|
137
|
-
'chart.linewidth': 1,
|
138
|
-
|
139
|
-
'chart.title': '',
|
140
|
-
'chart.title.size': null,
|
141
|
-
'chart.title.font': null,
|
142
|
-
'chart.title.background': null, // Gradients aren't supported for this color
|
143
|
-
'chart.title.hpos': null,
|
144
|
-
'chart.title.vpos': null,
|
145
|
-
'chart.title.bold': true,
|
146
|
-
'chart.title.color': 'black',
|
147
|
-
'chart.title.x': null,
|
148
|
-
'chart.title.y': null,
|
149
|
-
'chart.title.halign': null,
|
150
|
-
'chart.title.valign': null,
|
151
|
-
|
152
|
-
'chart.title.xaxis': '',
|
153
|
-
'chart.title.xaxis.bold': true,
|
154
|
-
'chart.title.xaxis.size': null,
|
155
|
-
'chart.title.xaxis.font': null,
|
156
|
-
'chart.title.xaxis.x': null,
|
157
|
-
'chart.title.xaxis.y': null,
|
158
|
-
'chart.title.xaxis.pos': null,
|
159
|
-
|
160
|
-
'chart.title.yaxis': '',
|
161
|
-
'chart.title.yaxis.bold': true,
|
162
|
-
'chart.title.yaxis.size': null,
|
163
|
-
'chart.title.yaxis.font': null,
|
164
|
-
'chart.title.yaxis.color': 'black', // Gradients aren't supported for this color
|
165
|
-
'chart.title.yaxis.x': null,
|
166
|
-
'chart.title.yaxis.y': null,
|
167
|
-
'chart.title.yaxis.pos': null,
|
168
|
-
'chart.clearto': 'rgba(0,0,0,0)'
|
169
|
-
}
|
170
|
-
|
171
|
-
/**
|
172
|
-
* A simple check that the browser has canvas support
|
173
|
-
*/
|
174
|
-
if (!this.canvas) {
|
175
|
-
alert('[DRAWING.BACKGROUND] No canvas support');
|
176
|
-
return;
|
177
|
-
}
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
/**
|
182
|
-
* Create the dollar object so that functions can be added to them
|
183
|
-
*/
|
184
|
-
this.$0 = {};
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
/**
|
189
|
-
* Translate half a pixel for antialiasing purposes - but only if it hasn't beeen
|
190
|
-
* done already
|
191
|
-
*/
|
192
|
-
if (!this.canvas.__rgraph_aa_translated__) {
|
193
|
-
this.context.translate(0.5,0.5);
|
194
|
-
|
195
|
-
this.canvas.__rgraph_aa_translated__ = true;
|
196
|
-
}
|
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
|
-
pa = RG.Path,
|
207
|
-
pa2 = RG.path2,
|
208
|
-
win = window,
|
209
|
-
doc = document,
|
210
|
-
ma = Math
|
211
|
-
|
212
|
-
|
213
|
-
|
214
|
-
/**
|
215
|
-
* "Decorate" the object with the generic effects if the effects library has been included
|
216
|
-
*/
|
217
|
-
if (RG.Effects && typeof RG.Effects.decorate === 'function') {
|
218
|
-
RG.Effects.decorate(this);
|
219
|
-
}
|
220
|
-
|
221
|
-
|
222
|
-
|
223
|
-
|
224
|
-
/**
|
225
|
-
* A setter method for setting graph properties. It can be used like this: obj.Set('chart.strokestyle', '#666');
|
226
|
-
*
|
227
|
-
* @param name string The name of the property to set OR it can be a map
|
228
|
-
* of name/value settings like what you set in the constructor
|
229
|
-
*/
|
230
|
-
this.set =
|
231
|
-
this.Set = function (name)
|
232
|
-
{
|
233
|
-
var value = typeof arguments[1] === 'undefined' ? null : arguments[1];
|
234
|
-
|
235
|
-
/**
|
236
|
-
* the number of arguments is only one and it's an
|
237
|
-
* object - parse it for configuration data and return.
|
238
|
-
*/
|
239
|
-
if (arguments.length === 1 && typeof name === 'object') {
|
240
|
-
RG.parseObjectStyleConfig(this, name);
|
241
|
-
return this;
|
242
|
-
}
|
243
|
-
|
244
|
-
|
245
|
-
|
246
|
-
|
247
|
-
|
248
|
-
/**
|
249
|
-
* This should be done first - prepend the property name with "chart." if necessary
|
250
|
-
*/
|
251
|
-
if (name.substr(0,6) != 'chart.') {
|
252
|
-
name = 'chart.' + name;
|
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
|
-
prop[name] = value;
|
264
|
-
|
265
|
-
return this;
|
266
|
-
};
|
267
|
-
|
268
|
-
|
269
|
-
|
270
|
-
|
271
|
-
/**
|
272
|
-
* A getter method for retrieving graph properties. It can be used like this: obj.Get('chart.strokestyle');
|
273
|
-
*
|
274
|
-
* @param name string The name of the property to get
|
275
|
-
*/
|
276
|
-
this.get =
|
277
|
-
this.Get = function (name)
|
278
|
-
{
|
279
|
-
/**
|
280
|
-
* This should be done first - prepend the property name with "chart." if necessary
|
281
|
-
*/
|
282
|
-
if (name.substr(0,6) != 'chart.') {
|
283
|
-
name = 'chart.' + name;
|
284
|
-
}
|
285
|
-
|
286
|
-
// Convert uppercase letters to dot+lower case letter
|
287
|
-
name = name.replace(/([A-Z])/g, function (str)
|
288
|
-
{
|
289
|
-
return '.' + String(RegExp.$1).toLowerCase()
|
290
|
-
});
|
291
|
-
|
292
|
-
return prop[name.toLowerCase()];
|
293
|
-
};
|
294
|
-
|
295
|
-
|
296
|
-
|
297
|
-
|
298
|
-
/**
|
299
|
-
* Draws the circle
|
300
|
-
*/
|
301
|
-
this.draw =
|
302
|
-
this.Draw = function ()
|
303
|
-
{
|
304
|
-
/**
|
305
|
-
* Fire the onbeforedraw event
|
306
|
-
*/
|
307
|
-
RG.FireCustomEvent(this, 'onbeforedraw');
|
308
|
-
|
309
|
-
|
310
|
-
/**
|
311
|
-
* Parse the colors. This allows for simple gradient syntax
|
312
|
-
*/
|
313
|
-
if (!this.colorsParsed) {
|
314
|
-
|
315
|
-
this.parseColors();
|
316
|
-
|
317
|
-
// Don't want to do this again
|
318
|
-
this.colorsParsed = true;
|
319
|
-
}
|
320
|
-
|
321
|
-
|
322
|
-
/***********************
|
323
|
-
* DRAW BACKGROUND HERE *
|
324
|
-
***********************/
|
325
|
-
this.gutterLeft = prop['chart.gutter.left'];
|
326
|
-
this.gutterRight = prop['chart.gutter.right'];
|
327
|
-
this.gutterTop = prop['chart.gutter.top'];
|
328
|
-
this.gutterBottom = prop['chart.gutter.bottom'];
|
329
|
-
|
330
|
-
/**
|
331
|
-
* Set the shadow
|
332
|
-
*/
|
333
|
-
RG.drawBackgroundImage(this);
|
334
|
-
RG.Background.draw(this);
|
335
|
-
|
336
|
-
/**
|
337
|
-
* This installs the event listeners
|
338
|
-
*/
|
339
|
-
RG.InstallEventListeners(this);
|
340
|
-
|
341
|
-
|
342
|
-
/**
|
343
|
-
* Fire the onfirstdraw event
|
344
|
-
*/
|
345
|
-
if (this.firstDraw) {
|
346
|
-
RG.fireCustomEvent(this, 'onfirstdraw');
|
347
|
-
this.firstDraw = false;
|
348
|
-
this.firstDrawFunc();
|
349
|
-
}
|
350
|
-
|
351
|
-
|
352
|
-
|
353
|
-
/**
|
354
|
-
* Fire the ondraw event
|
355
|
-
*/
|
356
|
-
RG.FireCustomEvent(this, 'ondraw');
|
357
|
-
|
358
|
-
return this;
|
359
|
-
};
|
360
|
-
|
361
|
-
|
362
|
-
|
363
|
-
/**
|
364
|
-
* Used in chaining. Runs a function there and then - not waiting for
|
365
|
-
* the events to fire (eg the onbeforedraw event)
|
366
|
-
*
|
367
|
-
* @param function func The function to execute
|
368
|
-
*/
|
369
|
-
this.exec = function (func)
|
370
|
-
{
|
371
|
-
func(this);
|
372
|
-
|
373
|
-
return this;
|
374
|
-
};
|
375
|
-
|
376
|
-
|
377
|
-
|
378
|
-
|
379
|
-
/**
|
380
|
-
* The getObjectByXY() worker method
|
381
|
-
*/
|
382
|
-
this.getObjectByXY = function (e)
|
383
|
-
{
|
384
|
-
if (this.getShape(e)) {
|
385
|
-
return this;
|
386
|
-
}
|
387
|
-
};
|
388
|
-
|
389
|
-
|
390
|
-
|
391
|
-
|
392
|
-
/**
|
393
|
-
* Not used by the class during creating the shape, but is used by event handlers
|
394
|
-
* to get the coordinates (if any) of the selected bar
|
395
|
-
*
|
396
|
-
* @param object e The event object
|
397
|
-
* @param object OPTIONAL You can pass in the bar object instead of the
|
398
|
-
* function using "this"
|
399
|
-
*/
|
400
|
-
this.getShape = function (e)
|
401
|
-
{
|
402
|
-
var mouseXY = RGraph.getMouseXY(e);
|
403
|
-
var mouseX = mouseXY[0];
|
404
|
-
var mouseY = mouseXY[1];
|
405
|
-
|
406
|
-
if (
|
407
|
-
mouseX >= this.gutterLeft
|
408
|
-
&& mouseX <= (ca.width - this.gutterRight)
|
409
|
-
&& mouseY >= this.gutterTop
|
410
|
-
&& mouseY <= (ca.height - this.gutterBottom)
|
411
|
-
) {
|
412
|
-
|
413
|
-
var tooltip = prop['chart.tooltips'] ? prop['chart.tooltips'][0] : null
|
414
|
-
|
415
|
-
return {
|
416
|
-
0: this, 1: 0 /* the index */, 2: tooltip,
|
417
|
-
'object': this,'index': 0, 'tooltip': tooltip
|
418
|
-
};
|
419
|
-
}
|
420
|
-
|
421
|
-
return null;
|
422
|
-
};
|
423
|
-
|
424
|
-
|
425
|
-
|
426
|
-
|
427
|
-
/**
|
428
|
-
* This function positions a tooltip when it is displayed
|
429
|
-
*
|
430
|
-
* @param obj object The chart object
|
431
|
-
* @param int x The X coordinate specified for the tooltip
|
432
|
-
* @param int y The Y coordinate specified for the tooltip
|
433
|
-
* @param objec tooltip The tooltips DIV element
|
434
|
-
*/
|
435
|
-
this.positionTooltip = function (obj, x, y, tooltip, idx)
|
436
|
-
{
|
437
|
-
var canvasXY = RG.getCanvasXY(obj.canvas);
|
438
|
-
var width = tooltip.offsetWidth;
|
439
|
-
var height = tooltip.offsetHeight;
|
440
|
-
var tooltipX = RG.getCanvasXY(obj.canvas)[0] + ((obj.canvas.width - this.gutterLeft - this.gutterRight) / 2) + this.gutterLeft;
|
441
|
-
var tooltipY = RG.getCanvasXY(obj.canvas)[1] + ((obj.canvas.height - this.gutterTop - this.gutterBottom) / 2) + this.gutterTop;
|
442
|
-
var mouseXY = RG.getMouseXY(window.event);
|
443
|
-
|
444
|
-
// Set the top position
|
445
|
-
tooltip.style.left = 0;
|
446
|
-
tooltip.style.top = window.event.pageY - height - 5 + 'px';
|
447
|
-
|
448
|
-
// By default any overflow is hidden
|
449
|
-
tooltip.style.overflow = '';
|
450
|
-
|
451
|
-
// Reposition the tooltip if at the edges:
|
452
|
-
|
453
|
-
// LEFT edge
|
454
|
-
if (canvasXY[0] + mouseXY[0] - (width / 2) < 0) {
|
455
|
-
tooltip.style.left = canvasXY[0] + mouseXY[0] - (width * 0.1) + 'px';
|
456
|
-
|
457
|
-
// RIGHT edge
|
458
|
-
} else if (canvasXY[0] + mouseXY[0] + (width / 2) > doc.body.offsetWidth) {
|
459
|
-
tooltip.style.left = canvasXY[0] + mouseXY[0] - (width * 0.9) + 'px';
|
460
|
-
|
461
|
-
// Default positioning - CENTERED
|
462
|
-
} else {
|
463
|
-
tooltip.style.left = canvasXY[0] + mouseXY[0] - (width / 2) + 'px';
|
464
|
-
}
|
465
|
-
};
|
466
|
-
|
467
|
-
|
468
|
-
|
469
|
-
|
470
|
-
/**
|
471
|
-
* Each object type has its own Highlight() function which highlights the appropriate shape
|
472
|
-
*
|
473
|
-
* @param object shape The shape to highlight
|
474
|
-
*/
|
475
|
-
this.highlight =
|
476
|
-
this.Highlight = function (shape)
|
477
|
-
{
|
478
|
-
if (prop['chart.tooltips.highlight']) {
|
479
|
-
if (typeof prop['chart.highlight.style'] === 'function') {
|
480
|
-
(prop['chart.highlight.style'])(shape);
|
481
|
-
} else {
|
482
|
-
pa2(co, [
|
483
|
-
'b',
|
484
|
-
'r', prop['chart.gutter.left'], prop['chart.gutter.top'], ca.width - prop['chart.gutter.left'] - prop['chart.gutter.right'],ca.height - prop['chart.gutter.top'] - prop['chart.gutter.bottom'],
|
485
|
-
'f',prop['chart.highlight.fill'],
|
486
|
-
's',prop['chart.highlight.stroke']
|
487
|
-
]);
|
488
|
-
|
489
|
-
}
|
490
|
-
}
|
491
|
-
};
|
492
|
-
|
493
|
-
|
494
|
-
|
495
|
-
|
496
|
-
/**
|
497
|
-
* This allows for easy specification of gradients
|
498
|
-
*/
|
499
|
-
this.parseColors = function ()
|
500
|
-
{
|
501
|
-
|
502
|
-
// Save the original colors so that they can be restored when the canvas is reset
|
503
|
-
if (this.original_colors.length === 0) {
|
504
|
-
this.original_colors['chart.strokestyle'] = RG.arrayClone(prop['chart.strokestyle']);
|
505
|
-
this.original_colors['chart.highlight.stroke'] = RG.arrayClone(prop['chart.highlight.stroke']);
|
506
|
-
this.original_colors['chart.highlight.fill'] = RG.arrayClone(prop['chart.highlight.fill']);
|
507
|
-
}
|
508
|
-
|
509
|
-
|
510
|
-
|
511
|
-
|
512
|
-
|
513
|
-
/**
|
514
|
-
* Parse various properties for colors
|
515
|
-
*/
|
516
|
-
prop['chart.strokestyle'] = this.parseSingleColorForGradient(prop['chart.strokestyle']);
|
517
|
-
prop['chart.highlight.stroke'] = this.parseSingleColorForGradient(prop['chart.highlight.stroke']);
|
518
|
-
prop['chart.highlight.fill'] = this.parseSingleColorForGradient(prop['chart.highlight.fill']);
|
519
|
-
};
|
520
|
-
|
521
|
-
|
522
|
-
|
523
|
-
|
524
|
-
/**
|
525
|
-
* Use this function to reset the object to the post-constructor state. Eg reset colors if
|
526
|
-
* need be etc
|
527
|
-
*/
|
528
|
-
this.reset = function ()
|
529
|
-
{
|
530
|
-
};
|
531
|
-
|
532
|
-
|
533
|
-
|
534
|
-
|
535
|
-
/**
|
536
|
-
* This parses a single color value
|
537
|
-
*/
|
538
|
-
this.parseSingleColorForGradient = function (color)
|
539
|
-
{
|
540
|
-
if (!color) {
|
541
|
-
return color;
|
542
|
-
}
|
543
|
-
|
544
|
-
if (typeof color === 'string' && color.match(/^gradient\((.*)\)$/i)) {
|
545
|
-
|
546
|
-
var parts = RegExp.$1.split(':');
|
547
|
-
|
548
|
-
// Create the gradient
|
549
|
-
var grad = co.createLinearGradient(this.gutterLeft, this.gutterTop, ca.width - this.gutterRight, ca.height - this.gutterRight);
|
550
|
-
|
551
|
-
var diff = 1 / (parts.length - 1);
|
552
|
-
|
553
|
-
//grad.addColorStop(0, RG.trim(parts[0]));
|
554
|
-
|
555
|
-
for (var j=0; j<parts.length; j+=1) {
|
556
|
-
grad.addColorStop(j * diff, RG.trim(parts[j]));
|
557
|
-
}
|
558
|
-
}
|
559
|
-
|
560
|
-
return grad ? grad : color;
|
561
|
-
};
|
562
|
-
|
563
|
-
|
564
|
-
|
565
|
-
|
566
|
-
/**
|
567
|
-
* Using a function to add events makes it easier to facilitate method chaining
|
568
|
-
*
|
569
|
-
* @param string type The type of even to add
|
570
|
-
* @param function func
|
571
|
-
*/
|
572
|
-
this.on = function (type, func)
|
573
|
-
{
|
574
|
-
if (type.substr(0,2) !== 'on') {
|
575
|
-
type = 'on' + type;
|
576
|
-
}
|
577
|
-
|
578
|
-
this[type] = func;
|
579
|
-
|
580
|
-
return this;
|
581
|
-
};
|
582
|
-
|
583
|
-
|
584
|
-
|
585
|
-
|
586
|
-
/**
|
587
|
-
* This function runs once only
|
588
|
-
* (put at the end of the file (before any effects))
|
589
|
-
*/
|
590
|
-
this.firstDrawFunc = function ()
|
591
|
-
{
|
592
|
-
};
|
593
|
-
|
594
|
-
|
595
|
-
|
596
|
-
|
597
|
-
|
598
|
-
|
599
|
-
RG.att(ca);
|
600
|
-
|
601
|
-
|
602
|
-
|
603
|
-
|
604
|
-
|
605
|
-
|
606
|
-
/**
|
607
|
-
* Objects are now always registered so that the chart is redrawn if need be.
|
608
|
-
*/
|
609
|
-
RG.Register(this);
|
610
|
-
|
611
|
-
|
612
|
-
|
613
|
-
|
614
|
-
/**
|
615
|
-
* This is the 'end' of the constructor so if the first argument
|
616
|
-
* contains configuration data - handle that.
|
617
|
-
*/
|
618
|
-
if (parseConfObjectForOptions) {
|
619
|
-
RG.parseObjectStyleConfig(this, conf.options);
|
620
|
-
}
|
621
|
-
};
|
2
|
+
RGraph=window.RGraph||{isRGraph:true};RGraph.Drawing=RGraph.Drawing||{};RGraph.Drawing.Background=function(conf)
|
3
|
+
{if(typeof conf==='object'&&typeof conf.id==='string'){var id=conf.id
|
4
|
+
var canvas=document.getElementById(id);var parseConfObjectForOptions=true;}else{var id=conf;var canvas=document.getElementById(id);}
|
5
|
+
this.id=id;this.canvas=document.getElementById(this.id);this.context=this.canvas.getContext('2d');this.canvas.__object__=this;this.original_colors=[];this.firstDraw=true;this.type='drawing.background';this.isRGraph=true;this.uid=RGraph.CreateUID();this.canvas.uid=this.canvas.uid?this.canvas.uid:RGraph.createUID();this.properties={'chart.background.barcolor1':'rgba(0,0,0,0)','chart.background.barcolor2':'rgba(0,0,0,0)','chart.background.grid':true,'chart.background.grid.color':'#ddd','chart.background.grid.width':1,'chart.background.grid.vlines':true,'chart.background.grid.hlines':true,'chart.background.grid.border':true,'chart.background.grid.autofit':true,'chart.background.grid.autofit.numhlines':5,'chart.background.grid.autofit.numvlines':20,'chart.background.grid.dashed':false,'chart.background.grid.dotted':false,'chart.background.image':null,'chart.background.image.stretch':true,'chart.background.image.x':null,'chart.background.image.y':null,'chart.background.image.w':null,'chart.background.image.h':null,'chart.background.image.align':null,'chart.background.color':null,'chart.gutter.left':25,'chart.gutter.right':25,'chart.gutter.top':25,'chart.gutter.bottom':25,'chart.text.color':'black','chart.text.size':12,'chart.text.font':'Segoe UI, Arial, Verdana, sans-serif','chart.text.accessible':true,'chart.text.accessible.overflow':'visible','chart.text.accessible.pointerevents':true,'chart.events.click':null,'chart.events.mousemove':null,'chart.tooltips':null,'chart.tooltips.highlight':true,'chart.tooltips.event':'onclick','chart.highlight.stroke':'rgba(0,0,0,0)','chart.highlight.fill':'rgba(255,255,255,0.7)','chart.linewidth':1,'chart.title':'','chart.title.size':null,'chart.title.font':null,'chart.title.background':null,'chart.title.hpos':null,'chart.title.vpos':null,'chart.title.bold':true,'chart.title.color':'black','chart.title.x':null,'chart.title.y':null,'chart.title.halign':null,'chart.title.valign':null,'chart.title.xaxis':'','chart.title.xaxis.bold':true,'chart.title.xaxis.size':null,'chart.title.xaxis.font':null,'chart.title.xaxis.x':null,'chart.title.xaxis.y':null,'chart.title.xaxis.pos':null,'chart.title.yaxis':'','chart.title.yaxis.bold':true,'chart.title.yaxis.size':null,'chart.title.yaxis.font':null,'chart.title.yaxis.color':'black','chart.title.yaxis.x':null,'chart.title.yaxis.y':null,'chart.title.yaxis.pos':null,'chart.clearto':'rgba(0,0,0,0)'}
|
6
|
+
if(!this.canvas){alert('[DRAWING.BACKGROUND] No canvas support');return;}
|
7
|
+
this.$0={};if(!this.canvas.__rgraph_aa_translated__){this.context.translate(0.5,0.5);this.canvas.__rgraph_aa_translated__=true;}
|
8
|
+
var RG=RGraph,ca=this.canvas,co=ca.getContext('2d'),prop=this.properties,pa=RG.Path,pa2=RG.path2,win=window,doc=document,ma=Math
|
9
|
+
if(RG.Effects&&typeof RG.Effects.decorate==='function'){RG.Effects.decorate(this);}
|
10
|
+
this.set=this.Set=function(name)
|
11
|
+
{var value=typeof arguments[1]==='undefined'?null:arguments[1];if(arguments.length===1&&typeof name==='object'){RG.parseObjectStyleConfig(this,name);return this;}
|
12
|
+
if(name.substr(0,6)!='chart.'){name='chart.'+name;}
|
13
|
+
while(name.match(/([A-Z])/)){name=name.replace(/([A-Z])/,'.'+RegExp.$1.toLowerCase());}
|
14
|
+
prop[name]=value;return this;};this.get=this.Get=function(name)
|
15
|
+
{if(name.substr(0,6)!='chart.'){name='chart.'+name;}
|
16
|
+
while(name.match(/([A-Z])/)){name=name.replace(/([A-Z])/,'.'+RegExp.$1.toLowerCase());}
|
17
|
+
return prop[name.toLowerCase()];};this.draw=this.Draw=function()
|
18
|
+
{RG.FireCustomEvent(this,'onbeforedraw');if(!this.colorsParsed){this.parseColors();this.colorsParsed=true;}
|
19
|
+
this.gutterLeft=prop['chart.gutter.left'];this.gutterRight=prop['chart.gutter.right'];this.gutterTop=prop['chart.gutter.top'];this.gutterBottom=prop['chart.gutter.bottom'];RG.drawBackgroundImage(this);RG.Background.draw(this);RG.InstallEventListeners(this);if(this.firstDraw){RG.fireCustomEvent(this,'onfirstdraw');this.firstDraw=false;this.firstDrawFunc();}
|
20
|
+
RG.FireCustomEvent(this,'ondraw');return this;};this.exec=function(func)
|
21
|
+
{func(this);return this;};this.getObjectByXY=function(e)
|
22
|
+
{if(this.getShape(e)){return this;}};this.getShape=function(e)
|
23
|
+
{var mouseXY=RGraph.getMouseXY(e);var mouseX=mouseXY[0];var mouseY=mouseXY[1];if(mouseX>=this.gutterLeft&&mouseX<=(ca.width-this.gutterRight)&&mouseY>=this.gutterTop&&mouseY<=(ca.height-this.gutterBottom)){var tooltip=prop['chart.tooltips']?prop['chart.tooltips'][0]:null
|
24
|
+
return{0:this,1:0,2:tooltip,'object':this,'index':0,'tooltip':tooltip};}
|
25
|
+
return null;};this.highlight=this.Highlight=function(shape)
|
26
|
+
{if(prop['chart.tooltips.highlight']){if(typeof prop['chart.highlight.style']==='function'){(prop['chart.highlight.style'])(shape);}else{pa2(co,['b','r',prop['chart.gutter.left'],prop['chart.gutter.top'],ca.width-prop['chart.gutter.left']-prop['chart.gutter.right'],ca.height-prop['chart.gutter.top']-prop['chart.gutter.bottom'],'f',prop['chart.highlight.fill'],'s',prop['chart.highlight.stroke']]);}}};this.parseColors=function()
|
27
|
+
{if(this.original_colors.length===0){this.original_colors['chart.strokestyle']=RG.arrayClone(prop['chart.strokestyle']);this.original_colors['chart.highlight.stroke']=RG.arrayClone(prop['chart.highlight.stroke']);this.original_colors['chart.highlight.fill']=RG.arrayClone(prop['chart.highlight.fill']);}
|
28
|
+
prop['chart.strokestyle']=this.parseSingleColorForGradient(prop['chart.strokestyle']);prop['chart.highlight.stroke']=this.parseSingleColorForGradient(prop['chart.highlight.stroke']);prop['chart.highlight.fill']=this.parseSingleColorForGradient(prop['chart.highlight.fill']);};this.reset=function()
|
29
|
+
{};this.parseSingleColorForGradient=function(color)
|
30
|
+
{if(!color){return color;}
|
31
|
+
if(typeof color==='string'&&color.match(/^gradient\((.*)\)$/i)){var parts=RegExp.$1.split(':');var grad=co.createLinearGradient(this.gutterLeft,this.gutterTop,ca.width-this.gutterRight,ca.height-this.gutterRight);var diff=1/(parts.length-1);for(var j=0;j<parts.length;j+=1){grad.addColorStop(j*diff,RG.trim(parts[j]));}}
|
32
|
+
return grad?grad:color;};this.on=function(type,func)
|
33
|
+
{if(type.substr(0,2)!=='on'){type='on'+type;}
|
34
|
+
if(typeof this[type]!=='function'){this[type]=func;}else{RG.addCustomEventListener(this,type,func);}
|
35
|
+
return this;};this.firstDrawFunc=function()
|
36
|
+
{};RG.att(ca);RG.Register(this);if(parseConfObjectForOptions){RG.parseObjectStyleConfig(this,conf.options);}};
|