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.
Files changed (67) hide show
  1. checksums.yaml +8 -8
  2. data/.travis.yml +0 -1
  3. data/README.md +3 -3
  4. data/lib/rgraph-rails/version.rb +1 -1
  5. data/vendor/assets/javascripts/RGraph.bar.js +239 -3764
  6. data/vendor/assets/javascripts/RGraph.bipolar.js +115 -1986
  7. data/vendor/assets/javascripts/RGraph.common.annotate.js +35 -399
  8. data/vendor/assets/javascripts/RGraph.common.context.js +30 -600
  9. data/vendor/assets/javascripts/RGraph.common.core.js +403 -5187
  10. data/vendor/assets/javascripts/RGraph.common.csv.js +19 -275
  11. data/vendor/assets/javascripts/RGraph.common.deprecated.js +35 -454
  12. data/vendor/assets/javascripts/RGraph.common.dynamic.js +84 -1189
  13. data/vendor/assets/javascripts/RGraph.common.effects.js +90 -1548
  14. data/vendor/assets/javascripts/RGraph.common.key.js +54 -755
  15. data/vendor/assets/javascripts/RGraph.common.resizing.js +37 -567
  16. data/vendor/assets/javascripts/RGraph.common.sheets.js +29 -356
  17. data/vendor/assets/javascripts/RGraph.common.tooltips.js +32 -614
  18. data/vendor/assets/javascripts/RGraph.common.zoom.js +14 -223
  19. data/vendor/assets/javascripts/RGraph.cornergauge.js +71 -0
  20. data/vendor/assets/javascripts/RGraph.drawing.background.js +35 -620
  21. data/vendor/assets/javascripts/RGraph.drawing.circle.js +35 -576
  22. data/vendor/assets/javascripts/RGraph.drawing.image.js +52 -807
  23. data/vendor/assets/javascripts/RGraph.drawing.marker1.js +41 -717
  24. data/vendor/assets/javascripts/RGraph.drawing.marker2.js +37 -668
  25. data/vendor/assets/javascripts/RGraph.drawing.marker3.js +36 -563
  26. data/vendor/assets/javascripts/RGraph.drawing.poly.js +40 -608
  27. data/vendor/assets/javascripts/RGraph.drawing.rect.js +35 -597
  28. data/vendor/assets/javascripts/RGraph.drawing.text.js +34 -642
  29. data/vendor/assets/javascripts/RGraph.drawing.xaxis.js +50 -809
  30. data/vendor/assets/javascripts/RGraph.drawing.yaxis.js +51 -856
  31. data/vendor/assets/javascripts/RGraph.fuel.js +58 -964
  32. data/vendor/assets/javascripts/RGraph.funnel.js +55 -984
  33. data/vendor/assets/javascripts/RGraph.gantt.js +75 -1241
  34. data/vendor/assets/javascripts/RGraph.gauge.js +87 -1397
  35. data/vendor/assets/javascripts/RGraph.hbar.js +143 -2376
  36. data/vendor/assets/javascripts/RGraph.hprogress.js +80 -1397
  37. data/vendor/assets/javascripts/RGraph.line.js +241 -4162
  38. data/vendor/assets/javascripts/RGraph.meter.js +74 -1278
  39. metadata +3 -30
  40. data/vendor/assets/images/bg.png +0 -0
  41. data/vendor/assets/images/bullet.png +0 -0
  42. data/vendor/assets/images/facebook-large.png +0 -0
  43. data/vendor/assets/images/google-plus-large.png +0 -0
  44. data/vendor/assets/images/logo.png +0 -0
  45. data/vendor/assets/images/meter-image-sd-needle.png +0 -0
  46. data/vendor/assets/images/meter-image-sd.png +0 -0
  47. data/vendor/assets/images/meter-sketch-needle.png +0 -0
  48. data/vendor/assets/images/meter-sketch.png +0 -0
  49. data/vendor/assets/images/odometer-background.png +0 -0
  50. data/vendor/assets/images/rgraph.jpg +0 -0
  51. data/vendor/assets/images/title.png +0 -0
  52. data/vendor/assets/images/twitter-large.png +0 -0
  53. data/vendor/assets/javascripts/RGraph.modaldialog.js +0 -301
  54. data/vendor/assets/javascripts/RGraph.odo.js +0 -1265
  55. data/vendor/assets/javascripts/RGraph.pie.js +0 -2272
  56. data/vendor/assets/javascripts/RGraph.radar.js +0 -1847
  57. data/vendor/assets/javascripts/RGraph.rose.js +0 -1877
  58. data/vendor/assets/javascripts/RGraph.rscatter.js +0 -1425
  59. data/vendor/assets/javascripts/RGraph.scatter.js +0 -2970
  60. data/vendor/assets/javascripts/RGraph.semicircularprogress.js +0 -1015
  61. data/vendor/assets/javascripts/RGraph.thermometer.js +0 -1129
  62. data/vendor/assets/javascripts/RGraph.vprogress.js +0 -1452
  63. data/vendor/assets/javascripts/RGraph.waterfall.js +0 -1252
  64. data/vendor/assets/javascripts/financial-data.js +0 -1067
  65. data/vendor/assets/stylesheets/ModalDialog.css +0 -90
  66. data/vendor/assets/stylesheets/animations.css +0 -3347
  67. data/vendor/assets/stylesheets/website.css +0 -446
@@ -1,808 +1,53 @@
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
- // Define the RGraph global variable
23
- RGraph = window.RGraph || {isRGraph: true};
24
- RGraph.Drawing = RGraph.Drawing || {};
25
-
26
- /**
27
- * The constructor. This function sets up the object. It takes the ID (the HTML attribute) of the canvas as the
28
- * first argument and the data as the second. If you need to change this, you can.
29
- *
30
- * @param string id The canvas tag ID
31
- * @param number x The X position of the label
32
- * @param number y The Y position of the label
33
- * @param number text The text used
34
- */
35
- RGraph.Drawing.Image = function (conf)
36
- {
37
- /**
38
- * Allow for object config style
39
- */
40
- if ( typeof conf === 'object'
41
- && typeof conf.x === 'number'
42
- && typeof conf.y === 'number'
43
- && typeof conf.src === 'string'
44
- && typeof conf.id === 'string') {
45
-
46
- var id = conf.id
47
- var canvas = document.getElementById(id);
48
- var x = conf.x;
49
- var y = conf.y;
50
- var src = conf.src;
51
-
52
- var parseConfObjectForOptions = true; // Set this so the config is parsed (at the end of the constructor)
53
-
54
- } else {
55
-
56
- var id = conf;
57
- var canvas = document.getElementById(id);
58
- var x = arguments[1];
59
- var y = arguments[2];
60
- var src = arguments[3];
61
- }
62
-
63
-
64
-
65
-
66
- // id, x, y
67
- this.id = id;
68
- this.canvas = document.getElementById(this.id);
69
- this.context = this.canvas.getContext('2d');
70
- this.colorsParsed = false;
71
- this.canvas.__object__ = this;
72
- this.alignmentProcessed = false;
73
- this.original_colors = [];
74
- this.firstDraw = true; // After the first draw this will be false
75
-
76
-
77
- /**
78
- * Store the properties
79
- */
80
- this.x = x;
81
- this.y = y;
82
- this.src = src;
83
- this.img = new Image();
84
- this.img.src = this.src;
85
-
86
-
87
- /**
88
- * This defines the type of this shape
89
- */
90
- this.type = 'drawing.image';
91
-
92
-
93
- /**
94
- * This facilitates easy object identification, and should always be true
95
- */
96
- this.isRGraph = true;
97
-
98
-
99
- /**
100
- * This adds a uid to the object that you can use for identification purposes
101
- */
102
- this.uid = RGraph.CreateUID();
103
-
104
-
105
- /**
106
- * This adds a UID to the canvas for identification purposes
107
- */
108
- this.canvas.uid = this.canvas.uid ? this.canvas.uid : RGraph.CreateUID();
109
-
110
-
111
-
112
-
113
- /**
114
- * Some example background properties
115
- */
116
- this.properties =
117
- {
118
- 'chart.src': null,
119
- 'chart.width': null,
120
- 'chart.height': null,
121
- 'chart.halign': 'left',
122
- 'chart.valign': 'top',
123
- 'chart.events.mousemove': null,
124
- 'chart.events.click': null,
125
- 'chart.shadow': false,
126
- 'chart.shadow.color': 'gray',
127
- 'chart.shadow.offsetx': 3,
128
- 'chart.shadow.offsety': 3,
129
- 'chart.shadow.blur': 5,
130
- 'chart.tooltips': null,
131
- 'chart.tooltips.highlight': true,
132
- 'chart.tooltips.css.class': 'RGraph_tooltip',
133
- 'chart.tooltips.event': 'onclick',
134
- 'chart.highlight.stroke': 'rgba(0,0,0,0)',
135
- 'chart.highlight.fill': 'rgba(255,255,255,0.7)',
136
- 'chart.alpha': 1,
137
- 'chart.border': false,
138
- 'chart.border.color': 'black',
139
- 'chart.border.linewidth': 1,
140
- 'chart.border.radius': 0,
141
- 'chart.background.color': 'rgba(0,0,0,0)',
142
- 'chart.clearto': 'rgba(0,0,0,0)'
143
- }
144
-
145
- /**
146
- * A simple check that the browser has canvas support
147
- */
148
- if (!this.canvas) {
149
- alert('[DRAWING.IMAGE] No canvas support');
150
- return;
151
- }
152
-
153
- /**
154
- * This can be used to store the coordinates of shapes on the graph
155
- */
156
- this.coords = [];
157
-
158
-
159
- /**
160
- * Create the dollar object so that functions can be added to them
161
- */
162
- this.$0 = {};
163
-
164
-
165
- /*
166
- * Translate half a pixel for antialiasing purposes - but only if it hasn't beeen
167
- * done already
168
- */
169
- if (!this.canvas.__rgraph_aa_translated__) {
170
- this.context.translate(0.5,0.5);
171
-
172
- this.canvas.__rgraph_aa_translated__ = true;
173
- }
174
-
175
-
176
-
177
-
178
- // Short variable names
179
- var RG = RGraph,
180
- ca = this.canvas,
181
- co = ca.getContext('2d'),
182
- prop = this.properties,
183
- pa2 = RG.path2,
184
- win = window,
185
- doc = document,
186
- ma = Math
187
-
188
-
189
-
190
- /**
191
- * "Decorate" the object with the generic effects if the effects library has been included
192
- */
193
- if (RG.Effects && typeof RG.Effects.decorate === 'function') {
194
- RG.Effects.decorate(this);
195
- }
196
-
197
-
198
-
199
-
200
- /**
201
- * A setter method for setting graph properties. It can be used like this: obj.Set('chart.strokestyle', '#666');
202
- *
203
- * @param name string The name of the property to set OR it can be a map
204
- * of name/value settings like what you set in the constructor
205
- */
206
- this.set =
207
- this.Set = function (name)
208
- {
209
- var value = typeof arguments[1] === 'undefined' ? null : arguments[1];
210
-
211
- /**
212
- * the number of arguments is only one and it's an
213
- * object - parse it for configuration data and return.
214
- */
215
- if (arguments.length === 1 && typeof name === 'object') {
216
- RG.parseObjectStyleConfig(this, name);
217
- return this;
218
- }
219
-
220
-
221
-
222
-
223
-
224
- /**
225
- * This should be done first - prepend the propertyy name with "chart." if necessary
226
- */
227
- if (name.substr(0,6) != 'chart.') {
228
- name = 'chart.' + name;
229
- }
230
-
231
-
232
-
233
-
234
- // Convert uppercase letters to dot+lower case letter
235
- while(name.match(/([A-Z])/)) {
236
- name = name.replace(/([A-Z])/, '.' + RegExp.$1.toLowerCase());
237
- }
238
-
239
-
240
-
241
-
242
-
243
-
244
- prop[name] = value;
245
-
246
- return this;
247
- };
248
-
249
-
250
-
251
-
252
- /**
253
- * A getter method for retrieving graph properties. It can be used like this: obj.Get('chart.strokestyle');
254
- *
255
- * @param name string The name of the property to get
256
- */
257
- this.get =
258
- this.Get = function (name)
259
- {
260
- /**
261
- * This should be done first - prepend the property name with "chart." if necessary
262
- */
263
- if (name.substr(0,6) != 'chart.') {
264
- name = 'chart.' + name;
265
- }
266
-
267
- // Convert uppercase letters to dot+lower case letter
268
- name = name.replace(/([A-Z])/g, function (str)
269
- {
270
- return '.' + String(RegExp.$1).toLowerCase()
271
- });
272
-
273
- return prop[name.toLowerCase()];
274
- };
275
-
276
-
277
-
278
-
279
- /**
280
- * Draws the circle
281
- */
282
- this.draw =
283
- this.Draw = function ()
284
- {
285
- /**
286
- * Fire the onbeforedraw event
287
- */
288
- RG.FireCustomEvent(this, 'onbeforedraw');
289
-
290
-
291
- /**
292
- * Parse the colors. This allows for simple gradient syntax
293
- */
294
- var obj = this;
295
- this.img.onload = function ()
296
- {
297
- if (!obj.colorsParsed) {
298
-
299
- obj.parseColors();
300
-
301
- // Don't want to do this again
302
- obj.colorsParsed = true;
303
- }
304
-
305
- obj.width = this.width;
306
- obj.height = this.height;
307
-
308
-
309
-
310
-
311
-
312
-
313
-
314
- if (!this.alignmentProcessed) {
315
-
316
- var customWidthHeight = (typeof obj.properties['chart.width'] == 'number' && typeof obj.properties['chart.width'] == 'number');
317
-
318
- // Horizontal alignment
319
- if (obj.properties['chart.halign'] == 'center') {
320
- obj.x -= customWidthHeight ? (obj.properties['chart.width'] / 2) : (this.width / 2);
321
- } else if (obj.properties['chart.halign'] == 'right') {
322
- obj.x -= customWidthHeight ? obj.properties['chart.width'] : this.width;
323
- }
324
-
325
- // Vertical alignment
326
- if (obj.properties['chart.valign'] == 'center') {
327
- obj.y -= customWidthHeight ? (obj.properties['chart.height'] / 2) : (this.height / 2);
328
- } else if (obj.properties['chart.valign'] == 'bottom') {
329
- obj.y -= customWidthHeight ? obj.properties['chart.height'] : this.height;
330
- }
331
-
332
- // Don't do this again
333
- this.alignmentProcessed = true;
334
- }
335
- }
336
-
337
-
338
-
339
-
340
-
341
-
342
-
343
-
344
- // The onload event doesn't always fire - so call it manually as well
345
- if (this.img.complete || this.img.readyState === 4) {
346
- this.img.onload();
347
- }
348
-
349
-
350
- /**
351
- * Draw the image here
352
- */
353
-
354
- if (prop['chart.shadow']) {
355
- RG.setShadow(this, prop['chart.shadow.color'], prop['chart.shadow.offsetx'], prop['chart.shadow.offsety'], prop['chart.shadow.blur']);
356
- }
357
-
358
- var oldAlpha = co.globalAlpha;
359
- co.globalAlpha = prop['chart.alpha'];
360
-
361
-
362
-
363
-
364
-
365
- /**
366
- * Draw a border around the image
367
- */
368
- if (prop['chart.border']) {
369
-
370
- co.strokeStyle = prop['chart.border.color'];
371
- co.lineWidth = prop['chart.border.linewidth'];
372
-
373
- var borderRadius = 0;
374
-
375
- // Work out the borderRadius only if the image has been loaded
376
- if (this.width || this.height) {
377
- borderRadius = ma.min(this.width / 2, this.height / 2)
378
- }
379
-
380
- if ((prop['chart.width'] / 2) > borderRadius && (prop['chart.height'] / 2) > borderRadius) {
381
- borderRadius = ma.min((prop['chart.width'] / 2), (prop['chart.height'] / 2))
382
- }
383
-
384
- if (prop['chart.border.radius'] < borderRadius) {
385
- borderRadius = prop['chart.border.radius'];
386
- }
387
-
388
-
389
-
390
-
391
- co.beginPath();
392
- this.roundedRect(
393
- ma.round(this.x) - ma.round(co.lineWidth / 2),
394
- ma.round(this.y) - ma.round(co.lineWidth / 2),
395
- (prop['chart.width'] || this.img.width) + co.lineWidth,
396
- (prop['chart.height'] || this.img.height) + co.lineWidth,
397
- borderRadius
398
- );
399
- }
400
-
401
-
402
-
403
- if (borderRadius) {
404
- co.save();
405
-
406
- // Draw the rect that casts the shadow
407
-
408
- // Draw the background color
409
- this.drawBackgroundColor(borderRadius);
410
-
411
-
412
-
413
- // Clip the canvas
414
- co.beginPath();
415
- this.roundedRect(
416
- ma.round(this.x) - ma.round(co.lineWidth / 2),
417
- ma.round(this.y) - ma.round(co.lineWidth / 2),
418
- (prop['chart.width'] || this.img.width) + co.lineWidth,
419
- (prop['chart.height'] || this.img.height) + co.lineWidth,
420
- borderRadius
421
- );
422
- co.clip();
423
-
424
- } else {
425
-
426
- // Draw the background color
427
- this.drawBackgroundColor(0);
428
- }
429
-
430
- RG.noShadow(this);
431
-
432
-
433
- if (typeof prop['chart.height'] === 'number' || typeof prop['chart.width'] === 'number') {
434
- co.drawImage(
435
- this.img,
436
- ma.round(this.x),
437
- ma.round(this.y),
438
- prop['chart.width'] || this.width,
439
- prop['chart.height'] || this.height
440
- );
441
- } else {
442
- co.drawImage(
443
- this.img,
444
- ma.round(this.x),
445
- ma.round(this.y)
446
- );
447
- }
448
-
449
-
450
-
451
-
452
- // If borderRadius is enabled restore the canvas to it's pre-clipped state
453
- if (borderRadius) {
454
- co.restore();
455
- }
456
-
457
-
458
-
459
- // If the border is enabled need a stroke so that the border is drawn
460
- if (prop['chart.border']) {
461
- RG.noShadow(this);
462
- co.stroke();
463
- }
464
-
465
-
466
-
467
-
468
-
469
- co.globalAlpha = oldAlpha;
470
-
471
- //var obj = this;
472
-
473
- this.img.onload = function ()
474
- {
475
- RG.redrawCanvas(ca);
476
-
477
- obj.coords[0] = [Math.round(obj.x), Math.round(obj.y), typeof(prop['chart.width']) == 'number' ? prop['chart.width'] : this.width, typeof prop['chart.height'] == 'number' ? prop['chart.height'] : this.height];
478
-
479
- }
480
-
481
- RG.NoShadow(this);
482
-
483
-
484
- /**
485
- * This installs the event listeners
486
- */
487
- RG.InstallEventListeners(this);
488
-
489
-
490
- /**
491
- * Fire the onfirstdraw event
492
- */
493
- if (this.firstDraw) {
494
- RG.fireCustomEvent(this, 'onfirstdraw');
495
- this.firstDraw = false;
496
- this.firstDrawFunc();
497
- }
498
-
499
-
500
-
501
-
502
- /**
503
- * Fire the ondraw event
504
- */
505
- RG.FireCustomEvent(this, 'ondraw');
506
-
507
- return this;
508
- };
509
-
510
-
511
-
512
- /**
513
- * Used in chaining. Runs a function there and then - not waiting for
514
- * the events to fire (eg the onbeforedraw event)
515
- *
516
- * @param function func The function to execute
517
- */
518
- this.exec = function (func)
519
- {
520
- func(this);
521
-
522
- return this;
523
- };
524
-
525
-
526
-
527
-
528
- /**
529
- * The getObjectByXY() worker method
530
- */
531
- this.getObjectByXY = function (e)
532
- {
533
- var mouseXY = RG.getMouseXY(e);
534
-
535
- if (this.getShape(e)) {
536
- return this;
537
- }
538
- };
539
-
540
-
541
-
542
-
543
- /**
544
- * Not used by the class during creating the shape, but is used by event handlers
545
- * to get the coordinates (if any) of the selected bar
546
- *
547
- * @param object e The event object
548
- * @param object OPTIONAL You can pass in the bar object instead of the
549
- * function using "this"
550
- */
551
- this.getShape = function (e)
552
- {
553
- var mouseXY = RG.getMouseXY(e);
554
- var mouseX = mouseXY[0];
555
- var mouseY = mouseXY[1];
556
-
557
- if ( this.coords
558
- && this.coords[0]
559
- && mouseXY[0] >= this.coords[0][0]
560
- && mouseXY[0] <= (this.coords[0][0] + this.coords[0][2])
561
- && mouseXY[1] >= this.coords[0][1]
562
- && mouseXY[1] <= (this.coords[0][1] + this.coords[0][3])) {
563
-
564
- return {
565
- 0: this, 1: this.coords[0][0], 2: this.coords[0][1], 3: this.coords[0][2], 4: this.coords[0][3], 5: 0,
566
- 'object': this, 'x': this.coords[0][0], 'y': this.coords[0][1], 'width': this.coords[0][2], 'height': this.coords[0][3], 'index': 0, 'tooltip': prop['chart.tooltips'] ? prop['chart.tooltips'][0] : null
567
- };
568
- }
569
-
570
- return null;
571
- };
572
-
573
-
574
-
575
-
576
- /**
577
- * This function positions a tooltip when it is displayed
578
- *
579
- * @param obj object The chart object
580
- * @param int x The X coordinate specified for the tooltip
581
- * @param int y The Y coordinate specified for the tooltip
582
- * @param object tooltip The tooltips DIV element
583
- * @param number idx The index of the tooltip
584
- */
585
- this.positionTooltip = function (obj, x, y, tooltip, idx)
586
- {
587
- var canvasXY = RG.getCanvasXY(obj.canvas);
588
- var width = tooltip.offsetWidth;
589
- var height = tooltip.offsetHeight;
590
- var mouseXY = RG.getMouseXY(window.event);
591
-
592
- // Set the top position
593
- tooltip.style.left = 0;
594
- tooltip.style.top = canvasXY[1] + this.coords[0][1] - (height / 2) - this.radius + 'px';
595
-
596
- // Set the top position
597
- tooltip.style.left = 0;
598
- tooltip.style.top = window.event.pageY - height - 5 + 'px';
599
-
600
- // By default any overflow is hidden
601
- tooltip.style.overflow = '';
602
-
603
- // Reposition the tooltip if at the edges:
604
-
605
- // LEFT edge
606
- if (canvasXY[0] + mouseXY[0] - (width / 2) < 0) {
607
- tooltip.style.left = canvasXY[0] + mouseXY[0] - (width * 0.1) + 'px';
608
-
609
- // RIGHT edge
610
- } else if (canvasXY[0] + mouseXY[0] + (width / 2) > doc.body.offsetWidth) {
611
- tooltip.style.left = canvasXY[0] + mouseXY[0] - (width * 0.9) + 'px';
612
-
613
- // Default positioning - CENTERED
614
- } else {
615
- tooltip.style.left = canvasXY[0] + mouseXY[0] - (width / 2) + 'px';
616
- }
617
- };
618
-
619
-
620
-
621
-
622
- /**
623
- * Each object type has its own Highlight() function which highlights the appropriate shape
624
- *
625
- * @param object shape The shape to highlight
626
- */
627
- this.highlight =
628
- this.Highlight = function (shape)
629
- {
630
- if (prop['chart.tooltips.highlight']) {
631
- if (typeof prop['chart.highlight.style'] === 'function') {
632
- (prop['chart.highlight.style'])(shape);
633
- } else {
634
- pa2(co, ['b','r',this.coords[0][0],this.coords[0][1],this.coords[0][2],this.coords[0][3], 'f',prop['chart.highlight.fill'], 's', prop['chart.highlight.stroke']]);
635
- }
636
- }
637
- };
638
-
639
-
640
-
641
-
642
- /**
643
- * This allows for easy specification of gradients
644
- */
645
- this.parseColors = function ()
646
- {
647
-
648
- // Save the original colors so that they can be restored when the canvas is reset
649
- if (this.original_colors.length === 0) {
650
- this.original_colors['chart.highlight.stroke'] = RG.array_clone(prop['chart.highlight.stroke']);
651
- this.original_colors['chart.highlight.fill'] = RG.array_clone(prop['chart.highlight.fill']);
652
- }
653
-
654
-
655
-
656
-
657
- /**
658
- * Parse various properties for colors
659
- */
660
- prop['chart.highlight.stroke'] = this.parseSingleColorForGradient(prop['chart.highlight.stroke']);
661
- prop['chart.highlight.fill'] = this.parseSingleColorForGradient(prop['chart.highlight.fill']);
662
- };
663
-
664
-
665
-
666
-
667
- /**
668
- * Use this function to reset the object to the post-constructor state. Eg reset colors if
669
- * need be etc
670
- */
671
- this.reset = function ()
672
- {
673
- };
674
-
675
-
676
-
677
-
678
- /**
679
- * This parses a single color value
680
- */
681
- this.parseSingleColorForGradient = function (color)
682
- {
683
- if (!color) {
684
- return color;
685
- }
686
-
687
-
688
- if (typeof color === 'string' && color.match(/^gradient\((.*)\)$/i)) {
689
-
690
- var parts = RegExp.$1.split(':');
691
-
692
- // Create the gradient
693
- var grad = co.createLinearGradient(this.x, this.y, this.x + this.img.width, this.y);
694
-
695
- var diff = 1 / (parts.length - 1);
696
-
697
- grad.addColorStop(0, RG.trim(parts[0]));
698
-
699
- for (var j=1; j<parts.length; ++j) {
700
- grad.addColorStop(j * diff, RG.trim(parts[j]));
701
- }
702
- }
703
-
704
- return grad ? grad : color;
705
- };
706
-
707
-
708
-
709
-
710
- /**
711
- * Using a function to add events makes it easier to facilitate method chaining
712
- *
713
- * @param string type The type of even to add
714
- * @param function func
715
- */
716
- this.on = function (type, func)
717
- {
718
- if (type.substr(0,2) !== 'on') {
719
- type = 'on' + type;
720
- }
721
-
722
- this[type] = func;
723
-
724
- return this;
725
- };
726
-
727
-
728
-
729
-
730
- /**
731
- * This function runs once only
732
- * (put at the end of the file (before any effects))
733
- */
734
- this.firstDrawFunc = function ()
735
- {
736
- };
737
-
738
-
739
-
740
-
741
- /**
742
- * This draws a rectangle for the border of the image with optional rounded corners
743
- */
744
- this.roundedRect = function (x, y, width, height, radius)
745
- {
746
- // Save the existing state of the canvas so that it can be restored later
747
- co.save();
748
-
749
- // Translate to the given X/Y coordinates
750
- co.translate(x, y);
751
-
752
- // Move to the center of the top horizontal line
753
- co.moveTo(width / 2,0);
754
-
755
- // Draw the rounded corners. The connecting lines in between them are drawn automatically
756
- co.arcTo(width,0,width,height, ma.min(height / 2, radius));
757
- co.arcTo(width, height, 0, height, ma.min(width / 2, radius));
758
- co.arcTo(0, height, 0, 0, ma.min(height / 2, radius));
759
- co.arcTo(0, 0, radius, 0, ma.min(width / 2, radius));
760
-
761
- // Draw a line back to the start coordinates
762
- co.lineTo(width / 2,0);
763
-
764
- // Restore the state of the canvas to as it was before the save()
765
- co.restore();
766
- };
767
-
768
-
769
-
770
-
771
- /**
772
- *
773
- */
774
- this.drawBackgroundColor = function (borderRadius)
775
- {
776
- co.beginPath();
777
- co.fillStyle = prop['chart.background.color'];
778
- this.roundedRect(
779
- ma.round(this.x) - ma.round(co.lineWidth / 2),
780
- ma.round(this.y) - ma.round(co.lineWidth / 2),
781
- (prop['chart.width'] || this.img.width) + co.lineWidth,
782
- (prop['chart.height'] || this.img.height) + co.lineWidth,
783
- borderRadius
784
- );
785
- co.fill();
786
- };
787
-
788
-
789
-
790
- RG.att(ca);
791
-
792
-
793
- /**
794
- * Objects are now always registered so that the chart is redrawn if need be.
795
- */
796
- RG.Register(this);
797
-
798
-
799
-
800
-
801
- /**
802
- * This is the 'end' of the constructor so if the first argument
803
- * contains configuration data - handle that.
804
- */
805
- if (parseConfObjectForOptions) {
806
- RG.parseObjectStyleConfig(this, conf.options);
807
- }
808
- };
2
+ RGraph=window.RGraph||{isRGraph:true};RGraph.Drawing=RGraph.Drawing||{};RGraph.Drawing.Image=function(conf)
3
+ {if(typeof conf==='object'&&typeof conf.x==='number'&&typeof conf.y==='number'&&typeof conf.src==='string'&&typeof conf.id==='string'){var id=conf.id
4
+ var canvas=document.getElementById(id);var x=conf.x;var y=conf.y;var src=conf.src;var parseConfObjectForOptions=true;}else{var id=conf;var canvas=document.getElementById(id);var x=arguments[1];var y=arguments[2];var src=arguments[3];}
5
+ this.id=id;this.canvas=document.getElementById(this.id);this.context=this.canvas.getContext('2d');this.colorsParsed=false;this.canvas.__object__=this;this.alignmentProcessed=false;this.original_colors=[];this.firstDraw=true;this.x=x;this.y=y;this.src=src;this.img=new Image();this.img.src=this.src;this.type='drawing.image';this.isRGraph=true;this.uid=RGraph.CreateUID();this.canvas.uid=this.canvas.uid?this.canvas.uid:RGraph.CreateUID();this.properties={'chart.src':null,'chart.width':null,'chart.height':null,'chart.halign':'left','chart.valign':'top','chart.events.mousemove':null,'chart.events.click':null,'chart.shadow':false,'chart.shadow.color':'gray','chart.shadow.offsetx':3,'chart.shadow.offsety':3,'chart.shadow.blur':5,'chart.tooltips':null,'chart.tooltips.highlight':true,'chart.tooltips.css.class':'RGraph_tooltip','chart.tooltips.event':'onclick','chart.highlight.stroke':'rgba(0,0,0,0)','chart.highlight.fill':'rgba(255,255,255,0.7)','chart.alpha':1,'chart.border':false,'chart.border.color':'black','chart.border.linewidth':1,'chart.border.radius':0,'chart.background.color':'rgba(0,0,0,0)','chart.clearto':'rgba(0,0,0,0)'}
6
+ if(!this.canvas){alert('[DRAWING.IMAGE] No canvas support');return;}
7
+ this.coords=[];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,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');var obj=this;this.img.onload=function()
19
+ {if(!obj.colorsParsed){obj.parseColors();obj.colorsParsed=true;}
20
+ obj.width=this.width;obj.height=this.height;if(!this.alignmentProcessed){var customWidthHeight=(typeof obj.properties['chart.width']=='number'&&typeof obj.properties['chart.width']=='number');if(obj.properties['chart.halign']=='center'){obj.x-=customWidthHeight?(obj.properties['chart.width']/2):(this.width/2);}else if(obj.properties['chart.halign']=='right'){obj.x-=customWidthHeight?obj.properties['chart.width']:this.width;}
21
+ if(obj.properties['chart.valign']=='center'){obj.y-=customWidthHeight?(obj.properties['chart.height']/2):(this.height/2);}else if(obj.properties['chart.valign']=='bottom'){obj.y-=customWidthHeight?obj.properties['chart.height']:this.height;}
22
+ this.alignmentProcessed=true;}}
23
+ if(this.img.complete||this.img.readyState===4){this.img.onload();}
24
+ if(prop['chart.shadow']){RG.setShadow(this,prop['chart.shadow.color'],prop['chart.shadow.offsetx'],prop['chart.shadow.offsety'],prop['chart.shadow.blur']);}
25
+ var oldAlpha=co.globalAlpha;co.globalAlpha=prop['chart.alpha'];if(prop['chart.border']){co.strokeStyle=prop['chart.border.color'];co.lineWidth=prop['chart.border.linewidth'];var borderRadius=0;if(this.width||this.height){borderRadius=ma.min(this.width/2,this.height/2)}
26
+ if((prop['chart.width']/2)>borderRadius&&(prop['chart.height']/2)>borderRadius){borderRadius=ma.min((prop['chart.width']/2),(prop['chart.height']/2))}
27
+ if(prop['chart.border.radius']<borderRadius){borderRadius=prop['chart.border.radius'];}
28
+ co.beginPath();this.roundedRect(ma.round(this.x)-ma.round(co.lineWidth/2),ma.round(this.y)-ma.round(co.lineWidth/2),(prop['chart.width']||this.img.width)+co.lineWidth,(prop['chart.height']||this.img.height)+co.lineWidth,borderRadius);}
29
+ if(borderRadius){co.save();this.drawBackgroundColor(borderRadius);co.beginPath();this.roundedRect(ma.round(this.x)-ma.round(co.lineWidth/2),ma.round(this.y)-ma.round(co.lineWidth/2),(prop['chart.width']||this.img.width)+co.lineWidth,(prop['chart.height']||this.img.height)+co.lineWidth,borderRadius);co.clip();}else{this.drawBackgroundColor(0);}
30
+ RG.noShadow(this);if(typeof prop['chart.height']==='number'||typeof prop['chart.width']==='number'){co.drawImage(this.img,ma.round(this.x),ma.round(this.y),prop['chart.width']||this.width,prop['chart.height']||this.height);}else{co.drawImage(this.img,ma.round(this.x),ma.round(this.y));}
31
+ if(borderRadius){co.restore();}
32
+ if(prop['chart.border']){RG.noShadow(this);co.stroke();}
33
+ co.globalAlpha=oldAlpha;this.img.onload=function()
34
+ {RG.redrawCanvas(ca);obj.coords[0]=[Math.round(obj.x),Math.round(obj.y),typeof(prop['chart.width'])=='number'?prop['chart.width']:this.width,typeof prop['chart.height']=='number'?prop['chart.height']:this.height];}
35
+ RG.NoShadow(this);RG.InstallEventListeners(this);if(this.firstDraw){RG.fireCustomEvent(this,'onfirstdraw');this.firstDraw=false;this.firstDrawFunc();}
36
+ RG.FireCustomEvent(this,'ondraw');return this;};this.exec=function(func)
37
+ {func(this);return this;};this.getObjectByXY=function(e)
38
+ {var mouseXY=RG.getMouseXY(e);if(this.getShape(e)){return this;}};this.getShape=function(e)
39
+ {var mouseXY=RG.getMouseXY(e);var mouseX=mouseXY[0];var mouseY=mouseXY[1];if(this.coords&&this.coords[0]&&mouseXY[0]>=this.coords[0][0]&&mouseXY[0]<=(this.coords[0][0]+this.coords[0][2])&&mouseXY[1]>=this.coords[0][1]&&mouseXY[1]<=(this.coords[0][1]+this.coords[0][3])){return{0:this,1:this.coords[0][0],2:this.coords[0][1],3:this.coords[0][2],4:this.coords[0][3],5:0,'object':this,'x':this.coords[0][0],'y':this.coords[0][1],'width':this.coords[0][2],'height':this.coords[0][3],'index':0,'tooltip':prop['chart.tooltips']?prop['chart.tooltips'][0]:null};}
40
+ return null;};this.highlight=this.Highlight=function(shape)
41
+ {if(prop['chart.tooltips.highlight']){if(typeof prop['chart.highlight.style']==='function'){(prop['chart.highlight.style'])(shape);}else{pa2(co,['b','r',this.coords[0][0],this.coords[0][1],this.coords[0][2],this.coords[0][3],'f',prop['chart.highlight.fill'],'s',prop['chart.highlight.stroke']]);}}};this.parseColors=function()
42
+ {if(this.original_colors.length===0){this.original_colors['chart.highlight.stroke']=RG.array_clone(prop['chart.highlight.stroke']);this.original_colors['chart.highlight.fill']=RG.array_clone(prop['chart.highlight.fill']);}
43
+ prop['chart.highlight.stroke']=this.parseSingleColorForGradient(prop['chart.highlight.stroke']);prop['chart.highlight.fill']=this.parseSingleColorForGradient(prop['chart.highlight.fill']);};this.reset=function()
44
+ {};this.parseSingleColorForGradient=function(color)
45
+ {if(!color){return color;}
46
+ if(typeof color==='string'&&color.match(/^gradient\((.*)\)$/i)){var parts=RegExp.$1.split(':');var grad=co.createLinearGradient(this.x,this.y,this.x+this.img.width,this.y);var diff=1/(parts.length-1);grad.addColorStop(0,RG.trim(parts[0]));for(var j=1;j<parts.length;++j){grad.addColorStop(j*diff,RG.trim(parts[j]));}}
47
+ return grad?grad:color;};this.on=function(type,func)
48
+ {if(type.substr(0,2)!=='on'){type='on'+type;}
49
+ if(typeof this[type]!=='function'){this[type]=func;}else{RG.addCustomEventListener(this,type,func);}
50
+ return this;};this.firstDrawFunc=function()
51
+ {};this.roundedRect=function(x,y,width,height,radius)
52
+ {co.save();co.translate(x,y);co.moveTo(width/2,0);co.arcTo(width,0,width,height,ma.min(height/2,radius));co.arcTo(width,height,0,height,ma.min(width/2,radius));co.arcTo(0,height,0,0,ma.min(height/2,radius));co.arcTo(0,0,radius,0,ma.min(width/2,radius));co.lineTo(width/2,0);co.restore();};this.drawBackgroundColor=function(borderRadius)
53
+ {co.beginPath();co.fillStyle=prop['chart.background.color'];this.roundedRect(ma.round(this.x)-ma.round(co.lineWidth/2),ma.round(this.y)-ma.round(co.lineWidth/2),(prop['chart.width']||this.img.width)+co.lineWidth,(prop['chart.height']||this.img.height)+co.lineWidth,borderRadius);co.fill();};RG.att(ca);RG.Register(this);if(parseConfObjectForOptions){RG.parseObjectStyleConfig(this,conf.options);}};