rgraph-rails 4.62 → 4.64

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 +5 -5
  2. data/README.md +3 -4
  3. data/lib/rgraph-rails/version.rb +1 -1
  4. data/vendor/assets/javascripts/RGraph.bar.js +240 -3742
  5. data/vendor/assets/javascripts/RGraph.bipolar.js +165 -2005
  6. data/vendor/assets/javascripts/RGraph.common.annotate.js +35 -395
  7. data/vendor/assets/javascripts/RGraph.common.context.js +30 -595
  8. data/vendor/assets/javascripts/RGraph.common.core.js +418 -5359
  9. data/vendor/assets/javascripts/RGraph.common.csv.js +20 -276
  10. data/vendor/assets/javascripts/RGraph.common.deprecated.js +35 -450
  11. data/vendor/assets/javascripts/RGraph.common.dynamic.js +88 -1395
  12. data/vendor/assets/javascripts/RGraph.common.effects.js +90 -1545
  13. data/vendor/assets/javascripts/RGraph.common.key.js +52 -753
  14. data/vendor/assets/javascripts/RGraph.common.resizing.js +37 -563
  15. data/vendor/assets/javascripts/RGraph.common.sheets.js +29 -352
  16. data/vendor/assets/javascripts/RGraph.common.tooltips.js +32 -450
  17. data/vendor/assets/javascripts/RGraph.common.zoom.js +14 -219
  18. data/vendor/assets/javascripts/RGraph.cornergauge.js +71 -0
  19. data/vendor/assets/javascripts/RGraph.drawing.background.js +34 -570
  20. data/vendor/assets/javascripts/RGraph.drawing.circle.js +33 -544
  21. data/vendor/assets/javascripts/RGraph.drawing.image.js +51 -755
  22. data/vendor/assets/javascripts/RGraph.drawing.marker1.js +37 -645
  23. data/vendor/assets/javascripts/RGraph.drawing.marker2.js +36 -633
  24. data/vendor/assets/javascripts/RGraph.drawing.marker3.js +35 -514
  25. data/vendor/assets/javascripts/RGraph.drawing.poly.js +37 -559
  26. data/vendor/assets/javascripts/RGraph.drawing.rect.js +33 -548
  27. data/vendor/assets/javascripts/RGraph.drawing.text.js +36 -664
  28. data/vendor/assets/javascripts/RGraph.drawing.xaxis.js +50 -812
  29. data/vendor/assets/javascripts/RGraph.drawing.yaxis.js +51 -856
  30. data/vendor/assets/javascripts/RGraph.fuel.js +58 -964
  31. data/vendor/assets/javascripts/RGraph.funnel.js +55 -984
  32. data/vendor/assets/javascripts/RGraph.gantt.js +77 -1354
  33. data/vendor/assets/javascripts/RGraph.gauge.js +85 -1421
  34. data/vendor/assets/javascripts/RGraph.hbar.js +162 -2788
  35. data/vendor/assets/javascripts/RGraph.hprogress.js +80 -1401
  36. data/vendor/assets/javascripts/RGraph.line.js +249 -4248
  37. data/vendor/assets/javascripts/RGraph.meter.js +74 -1280
  38. data/vendor/assets/javascripts/RGraph.modaldialog.js +19 -301
  39. data/vendor/assets/javascripts/RGraph.odo.js +71 -1264
  40. data/vendor/assets/javascripts/RGraph.pie.js +137 -2288
  41. data/vendor/assets/javascripts/RGraph.radar.js +110 -1847
  42. data/vendor/assets/javascripts/RGraph.rose.js +108 -1977
  43. data/vendor/assets/javascripts/RGraph.rscatter.js +80 -1432
  44. data/vendor/assets/javascripts/RGraph.scatter.js +172 -3163
  45. data/vendor/assets/javascripts/RGraph.semicircularprogress.js +60 -1120
  46. data/vendor/assets/javascripts/RGraph.svg.bar.js +66 -1735
  47. data/vendor/assets/javascripts/RGraph.svg.common.ajax.js +21 -246
  48. data/vendor/assets/javascripts/RGraph.svg.common.core.js +255 -3937
  49. data/vendor/assets/javascripts/RGraph.svg.common.csv.js +20 -276
  50. data/vendor/assets/javascripts/RGraph.svg.common.fx.js +68 -1303
  51. data/vendor/assets/javascripts/RGraph.svg.common.key.js +19 -205
  52. data/vendor/assets/javascripts/RGraph.svg.common.sheets.js +29 -352
  53. data/vendor/assets/javascripts/RGraph.svg.common.tooltips.js +22 -273
  54. data/vendor/assets/javascripts/RGraph.svg.funnel.js +32 -0
  55. data/vendor/assets/javascripts/RGraph.svg.hbar.js +59 -1400
  56. data/vendor/assets/javascripts/RGraph.svg.line.js +70 -1580
  57. data/vendor/assets/javascripts/RGraph.svg.pie.js +55 -1131
  58. data/vendor/assets/javascripts/RGraph.svg.radar.js +57 -1502
  59. data/vendor/assets/javascripts/RGraph.svg.rose.js +66 -1817
  60. data/vendor/assets/javascripts/RGraph.svg.scatter.js +58 -1261
  61. data/vendor/assets/javascripts/RGraph.svg.semicircularprogress.js +28 -865
  62. data/vendor/assets/javascripts/RGraph.svg.waterfall.js +45 -1252
  63. data/vendor/assets/javascripts/RGraph.thermometer.js +63 -1136
  64. data/vendor/assets/javascripts/RGraph.vprogress.js +83 -1470
  65. data/vendor/assets/javascripts/RGraph.waterfall.js +83 -1347
  66. metadata +5 -4
  67. data/vendor/assets/javascripts/financial-data.js +0 -1067
@@ -1,302 +1,20 @@
1
- // version: 2017-05-08
2
- /**
3
- * o--------------------------------------------------------------------------------o
4
- * | This file is part of the RGraph package - you can learn more at: |
5
- * | |
6
- * | http://www.rgraph.net |
7
- * | |
8
- * | RGraph is licensed under the Open Source MIT license. That means that it's |
9
- * | totally free to use! |
10
- * o--------------------------------------------------------------------------------o
11
- */
12
-
13
- ModalDialog =
14
- {
15
- dialog: null,
16
- background: null,
17
- offset: 50,
18
- events: [],
19
1
 
20
-
21
-
22
-
23
- /**
24
- * Shows the dialog with the supplied DIV acting as the contents
25
- *
26
- * @param string id The ID of the DIV to use as the dialogs contents
27
- * @param int width The width of the dialog
28
- */
29
- Show: function (id, width)
30
- {
31
- ModalDialog.id = id;
32
- ModalDialog.width = width;
33
-
34
- ModalDialog.ShowBackground();
35
- ModalDialog.ShowDialog();
36
-
37
- // Install the event handlers
38
- window.onresize = ModalDialog.Resize;
39
-
40
- // Add an event listener so that the
41
- // ESC key hides the dialog
42
- document.body.addEventListener('keydown', function (e)
43
- {
44
- if (e.keyCode === 27) {
45
- ModalDialog.hide();
46
- }
47
- }, false);
48
-
49
-
50
- // Call them initially
51
- ModalDialog.Resize();
52
-
53
- if (typeof(ModalDialog.onmodaldialog) == 'function') {
54
- ModalDialog.onmodaldialog();
55
- }
56
- ModalDialog.FireCustomEvent('onmodaldialog');
57
- },
58
-
59
-
60
-
61
-
62
- /**
63
- * Shows the background semi-transparent darkened DIV
64
- */
65
- ShowBackground: function ()
66
- {
67
- // Create the background if neccessary
68
- ModalDialog.background = document.createElement('DIV');
69
- ModalDialog.background.className = 'ModalDialog_background';
70
- ModalDialog.background.style.position = 'fixed';
71
- ModalDialog.background.style.top = 0;
72
- ModalDialog.background.style.left = 0;
73
- ModalDialog.background.style.width = (screen.width + 100) + 'px';
74
- ModalDialog.background.style.height = (screen.height + 100) + 'px';
75
- ModalDialog.background.style.backgroundColor = 'rgb(204,204,204)';
76
- ModalDialog.background.style.opacity = 0;
77
- ModalDialog.background.style.zIndex = 3276;
78
- ModalDialog.background.style.filter = "Alpha(opacity=50)";
79
-
80
- document.body.appendChild(ModalDialog.background);
81
-
82
- ModalDialog.background.style.visibility = 'visible';
83
- },
84
-
85
-
86
-
87
-
88
- /**
89
- * Shows the dialog itself
90
- */
91
- ShowDialog: function ()
92
- {
93
- // Create the DIV if necessary
94
- // Jan 2012- Changed so that the dialog is ALWAYS (re)created
95
- if (!ModalDialog.dialog || true) {
96
- ModalDialog.dialog = document.createElement('DIV');
97
-
98
- ModalDialog.dialog.id = 'ModalDialog_dialog';
99
- ModalDialog.dialog.className = 'ModalDialog_dialog';
100
-
101
- var borderRadius = '15px';
102
-
103
- ModalDialog.dialog.style.borderRadius = borderRadius;
104
- ModalDialog.dialog.style.MozBorderRadius = borderRadius;
105
- ModalDialog.dialog.style.WebkitBorderRadius = borderRadius;
106
-
107
- ModalDialog.dialog.style.boxShadow = '3px 3px 3px rgba(96,96,96,0.5)';
108
- ModalDialog.dialog.style.MozBoxShadow = '3px 3px 3px rgba(96,96,96,0.5)';
109
- ModalDialog.dialog.style.WebkitBoxShadow = 'rgba(96,96,96,0.5) 3px 3px 3px';
110
-
111
- ModalDialog.dialog.style.position = 'fixed';
112
- ModalDialog.dialog.style.backgroundColor = 'white';
113
- ModalDialog.dialog.style.width = parseInt(ModalDialog.width) + 'px';
114
- ModalDialog.dialog.style.border = '2px solid #999';
115
- ModalDialog.dialog.style.zIndex = 32767;
116
- ModalDialog.dialog.style.padding = '5px';
117
- ModalDialog.dialog.style.paddingTop = '25px';
118
- ModalDialog.dialog.style.opacity = 0;
119
-
120
- if (document.all) {
121
- ModalDialog.dialog.style.zIndex = 32767;
122
- }
123
-
124
-
125
-
126
- // Accomodate various browsers
127
- if (navigator.userAgent.indexOf('Opera') != -1) {
128
- ModalDialog.dialog.style.paddingTop = '25px';
129
-
130
- } else if (navigator.userAgent.indexOf('MSIE') != -1) {
131
- ModalDialog.dialog.style.paddingTop = '25px';
132
-
133
- } else if (navigator.userAgent.indexOf('Safari') != -1) {
134
- ModalDialog.dialog.style.paddingTop = '25px';
135
- }
136
-
137
- document.body.appendChild(ModalDialog.dialog);
138
-
139
-
140
- // Now create the grey bar at the top of the dialog
141
- var bar = document.createElement('DIV');
142
- bar.className = 'ModalDialog_topbar';
143
- bar.style.top = 0;
144
- bar.style.left = 0;
145
- bar.style.width = '100%';//(ModalDialog.dialog.offsetWidth - 4) + 'px';
146
- bar.style.height = '20px';
147
- bar.style.backgroundColor = '#bbb';
148
- bar.style.borderBottom = '2px solid #999';
149
- //bar.style.zIndex = 50000;
150
- bar.style.position = 'absolute';
151
- var borderRadius = '11px';
152
- bar.style.WebkitBorderTopLeftRadius = borderRadius;
153
- bar.style.WebkitBorderTopRightRadius = borderRadius;
154
- bar.style.MozBorderRadiusTopleft = borderRadius;
155
- bar.style.MozBorderRadiusTopright = borderRadius;
156
- bar.style.borderTopRightRadius = borderRadius;
157
- bar.style.borderTopLeftRadius = borderRadius;
158
- ModalDialog.dialog.appendChild(bar);
159
-
160
- // Add the content div
161
- var content = document.createElement('DIV');
162
- //content.style.paddingTop = '20px';
163
- content.style.width = '100%';
164
- content.style.height = '100%';
165
- ModalDialog.dialog.appendChild(content);
166
-
167
- if (ModalDialog.id.toLowerCase().substring(0, 7) == 'string:') {
168
- content.innerHTML = ModalDialog.id.substring(7);
169
- } else {
170
- content.innerHTML = document.getElementById(ModalDialog.id).innerHTML;
171
- }
172
-
173
- // Now reposition the dialog in the center
174
- ModalDialog.dialog.style.left = (document.body.offsetWidth / 2) - (ModalDialog.dialog.offsetWidth / 2) + 'px';
175
- ModalDialog.dialog.style.top = '30%';
176
- }
177
-
178
- // Show the dialog
179
- ModalDialog.dialog.style.visibility = 'visible';
180
-
181
- // A simple fade-in effect
182
- setTimeout('ModalDialog.dialog.style.opacity = 0.2', 50);
183
- setTimeout('ModalDialog.dialog.style.opacity = 0.4', 100);
184
- setTimeout('ModalDialog.dialog.style.opacity = 0.6', 150);
185
- setTimeout('ModalDialog.dialog.style.opacity = 0.8', 200);
186
- setTimeout('ModalDialog.dialog.style.opacity = 1', 250);
187
-
188
- setTimeout('ModalDialog.background.style.opacity = 0.1', 50);
189
- setTimeout('ModalDialog.background.style.opacity = 0.2', 100);
190
- setTimeout('ModalDialog.background.style.opacity = 0.3', 150);
191
- setTimeout('ModalDialog.background.style.opacity = 0.4', 200);
192
- setTimeout('ModalDialog.background.style.opacity = 0.5', 250);
193
- },
194
-
195
-
196
-
197
-
198
- /**
199
- * Hides everything
200
- */
201
- Close: function ()
202
- {
203
- if (ModalDialog.dialog) {
204
- // February 2012 - now remove the dialog node from the DOM
205
- if (document.getElementById(ModalDialog.dialog.id)) {
206
- document.body.removeChild(ModalDialog.dialog);
207
- }
208
-
209
- ModalDialog.dialog.style.visibility = 'hidden';
210
- ModalDialog.dialog.style.opacity = 0;
211
- }
212
-
213
- if (ModalDialog.background) {
214
- ModalDialog.background.style.visibility = 'hidden';
215
- ModalDialog.background.style.opacity = 0;
216
-
217
- // February 2012 - now remove the dialog node from the DOM
218
- if (document.getElementById(ModalDialog.background.id)) {
219
- document.body.removeChild(ModalDialog.background);
220
- }
221
- }
222
- },
223
-
224
-
225
-
226
-
227
- /**
228
- * Accommodate the window being resized
229
- */
230
- Resize: function ()
231
- {
232
- if (ModalDialog.dialog) {
233
- ModalDialog.dialog.style.left = (document.body.offsetWidth / 2) - (ModalDialog.dialog.offsetWidth / 2) + 'px';
234
- }
235
-
236
- ModalDialog.background.style.width = '2500px';
237
- ModalDialog.background.style.height = '2500px';
238
- },
239
-
240
-
241
-
242
-
243
- /**
244
- * Returns the page height
245
- *
246
- * @return int The page height
247
- */
248
- AddCustomEventListener: function (name, func)
249
- {
250
- if (typeof(ModalDialog.events) == 'undefined') {
251
- ModalDialog.events = [];
252
- }
253
-
254
- ModalDialog.events.push([name, func]);
255
- },
256
-
257
-
258
-
259
-
260
- /**
261
- * Used to fire the ModalDialog custom event
262
- *
263
- * @param object obj The graph object that fires the event
264
- * @param string event The name of the event to fire
265
- */
266
- FireCustomEvent: function (name)
267
- {
268
- for (var i=0; i<ModalDialog.events.length; ++i) {
269
- if (typeof(ModalDialog.events[i][0]) == 'string' && ModalDialog.events[i][0] == name && typeof(ModalDialog.events[i][1]) == 'function') {
270
- ModalDialog.events[i][1]();
271
- }
272
- }
273
- },
274
-
275
-
276
-
277
-
278
- /**
279
- * Returns true if the browser is IE8
280
- */
281
- isIE8: function ()
282
- {
283
- return document.all && (navigator.userAgent.indexOf('MSIE 8') > 0);
284
- }
285
- };
286
-
287
-
288
-
289
-
290
- // Aliases
291
- ModalDialog.show = ModalDialog.Show;
292
- ModalDialog.draw = ModalDialog.Show;
293
- ModalDialog.Hide = ModalDialog.Close;
294
- ModalDialog.hide = ModalDialog.Close;
295
- ModalDialog.close = ModalDialog.Close;
296
-
297
- // Lowercase all of the function names
298
- for (i in ModalDialog) {
299
- if (typeof ModalDialog[i] === 'function') {
300
- ModalDialog[i.toLowerCase()] = ModalDialog[i]
301
- }
302
- }
2
+ ModalDialog={dialog:null,background:null,offset:50,events:[],Show:function(id,width)
3
+ {ModalDialog.id=id;ModalDialog.width=width;ModalDialog.ShowBackground();ModalDialog.ShowDialog();window.onresize=ModalDialog.Resize;document.body.addEventListener('keydown',function(e)
4
+ {if(e.keyCode===27){ModalDialog.hide();}},false);ModalDialog.Resize();if(typeof(ModalDialog.onmodaldialog)=='function'){ModalDialog.onmodaldialog();}
5
+ ModalDialog.FireCustomEvent('onmodaldialog');},ShowBackground:function()
6
+ {ModalDialog.background=document.createElement('DIV');ModalDialog.background.className='ModalDialog_background';ModalDialog.background.style.position='fixed';ModalDialog.background.style.top=0;ModalDialog.background.style.left=0;ModalDialog.background.style.width=(screen.width+100)+'px';ModalDialog.background.style.height=(screen.height+100)+'px';ModalDialog.background.style.backgroundColor='rgb(204,204,204)';ModalDialog.background.style.opacity=0;ModalDialog.background.style.zIndex=3276;ModalDialog.background.style.filter="Alpha(opacity=50)";document.body.appendChild(ModalDialog.background);ModalDialog.background.style.visibility='visible';},ShowDialog:function()
7
+ {if(!ModalDialog.dialog||true){ModalDialog.dialog=document.createElement('DIV');ModalDialog.dialog.id='ModalDialog_dialog';ModalDialog.dialog.className='ModalDialog_dialog';var borderRadius='15px';ModalDialog.dialog.style.borderRadius=borderRadius;ModalDialog.dialog.style.MozBorderRadius=borderRadius;ModalDialog.dialog.style.WebkitBorderRadius=borderRadius;ModalDialog.dialog.style.boxShadow='3px 3px 3px rgba(96,96,96,0.5)';ModalDialog.dialog.style.MozBoxShadow='3px 3px 3px rgba(96,96,96,0.5)';ModalDialog.dialog.style.WebkitBoxShadow='rgba(96,96,96,0.5) 3px 3px 3px';ModalDialog.dialog.style.position='fixed';ModalDialog.dialog.style.backgroundColor='white';ModalDialog.dialog.style.width=parseInt(ModalDialog.width)+'px';ModalDialog.dialog.style.border='2px solid #999';ModalDialog.dialog.style.zIndex=32767;ModalDialog.dialog.style.padding='5px';ModalDialog.dialog.style.paddingTop='25px';ModalDialog.dialog.style.opacity=0;if(document.all){ModalDialog.dialog.style.zIndex=32767;}
8
+ if(navigator.userAgent.indexOf('Opera')!=-1){ModalDialog.dialog.style.paddingTop='25px';}else if(navigator.userAgent.indexOf('MSIE')!=-1){ModalDialog.dialog.style.paddingTop='25px';}else if(navigator.userAgent.indexOf('Safari')!=-1){ModalDialog.dialog.style.paddingTop='25px';}
9
+ document.body.appendChild(ModalDialog.dialog);var bar=document.createElement('DIV');bar.className='ModalDialog_topbar';bar.style.top=0;bar.style.left=0;bar.style.width='100%';bar.style.height='20px';bar.style.backgroundColor='#bbb';bar.style.borderBottom='2px solid #999';bar.style.position='absolute';var borderRadius='11px';bar.style.WebkitBorderTopLeftRadius=borderRadius;bar.style.WebkitBorderTopRightRadius=borderRadius;bar.style.MozBorderRadiusTopleft=borderRadius;bar.style.MozBorderRadiusTopright=borderRadius;bar.style.borderTopRightRadius=borderRadius;bar.style.borderTopLeftRadius=borderRadius;ModalDialog.dialog.appendChild(bar);var content=document.createElement('DIV');content.style.width='100%';content.style.height='100%';ModalDialog.dialog.appendChild(content);if(ModalDialog.id.toLowerCase().substring(0,7)=='string:'){content.innerHTML=ModalDialog.id.substring(7);}else{content.innerHTML=document.getElementById(ModalDialog.id).innerHTML;}
10
+ ModalDialog.dialog.style.left=(document.body.offsetWidth/2)-(ModalDialog.dialog.offsetWidth/2)+'px';ModalDialog.dialog.style.top='30%';}
11
+ ModalDialog.dialog.style.visibility='visible';setTimeout('ModalDialog.dialog.style.opacity = 0.2',50);setTimeout('ModalDialog.dialog.style.opacity = 0.4',100);setTimeout('ModalDialog.dialog.style.opacity = 0.6',150);setTimeout('ModalDialog.dialog.style.opacity = 0.8',200);setTimeout('ModalDialog.dialog.style.opacity = 1',250);setTimeout('ModalDialog.background.style.opacity = 0.1',50);setTimeout('ModalDialog.background.style.opacity = 0.2',100);setTimeout('ModalDialog.background.style.opacity = 0.3',150);setTimeout('ModalDialog.background.style.opacity = 0.4',200);setTimeout('ModalDialog.background.style.opacity = 0.5',250);},Close:function()
12
+ {if(ModalDialog.dialog){if(document.getElementById(ModalDialog.dialog.id)){document.body.removeChild(ModalDialog.dialog);}
13
+ ModalDialog.dialog.style.visibility='hidden';ModalDialog.dialog.style.opacity=0;}
14
+ if(ModalDialog.background){ModalDialog.background.style.visibility='hidden';ModalDialog.background.style.opacity=0;if(document.getElementById(ModalDialog.background.id)){document.body.removeChild(ModalDialog.background);}}},Resize:function()
15
+ {if(ModalDialog.dialog){ModalDialog.dialog.style.left=(document.body.offsetWidth/2)-(ModalDialog.dialog.offsetWidth/2)+'px';}
16
+ ModalDialog.background.style.width='2500px';ModalDialog.background.style.height='2500px';},AddCustomEventListener:function(name,func)
17
+ {if(typeof(ModalDialog.events)=='undefined'){ModalDialog.events=[];}
18
+ ModalDialog.events.push([name,func]);},FireCustomEvent:function(name)
19
+ {for(var i=0;i<ModalDialog.events.length;++i){if(typeof(ModalDialog.events[i][0])=='string'&&ModalDialog.events[i][0]==name&&typeof(ModalDialog.events[i][1])=='function'){ModalDialog.events[i][1]();}}},isIE8:function()
20
+ {return document.all&&(navigator.userAgent.indexOf('MSIE 8')>0);}};ModalDialog.show=ModalDialog.Show;ModalDialog.draw=ModalDialog.Show;ModalDialog.Hide=ModalDialog.Close;ModalDialog.hide=ModalDialog.Close;ModalDialog.close=ModalDialog.Close;for(i in ModalDialog){if(typeof ModalDialog[i]==='function'){ModalDialog[i.toLowerCase()]=ModalDialog[i]}}
@@ -1,1265 +1,72 @@
1
- // version: 2017-05-08
2
- /**
3
- * o--------------------------------------------------------------------------------o
4
- * | This file is part of the RGraph package - you can learn more at: |
5
- * | |
6
- * | http://www.rgraph.net |
7
- * | |
8
- * | RGraph is licensed under the Open Source MIT license. That means that it's |
9
- * | totally free to use! |
10
- * o--------------------------------------------------------------------------------o
11
- */
12
1
 
13
- RGraph = window.RGraph || {isRGraph: true};
14
-
15
- /**
16
- * The odometer constructor. Pass it the ID of the canvas tag, the start value of the odo,
17
- * the end value, and the value that the pointer should point to.
18
- *
19
- * @param string id The ID of the canvas tag
20
- * @param int start The start value of the Odo
21
- * @param int end The end value of the odo
22
- * @param int value The indicated value (what the needle points to)
23
- */
24
- RGraph.Odometer = function (conf)
25
- {
26
- /**
27
- * Allow for object config style
28
- */
29
- if ( typeof conf === 'object'
30
- && typeof conf.value !== 'undefined'
31
- && typeof conf.id === 'string') {
32
-
33
- var id = conf.id
34
- var canvas = document.getElementById(id);
35
- var min = conf.min;
36
- var max = conf.max;
37
- var value = conf.value;
38
- var parseConfObjectForOptions = true; // Set this so the config is parsed (at the end of the constructor)
39
-
40
- } else {
41
-
42
- var id = conf;
43
- var canvas = document.getElementById(id);
44
- var min = arguments[1];
45
- var max = arguments[2];
46
- var value = arguments[3];
47
- }
48
-
49
-
50
-
51
-
52
- this.id = id;
53
- this.canvas = canvas;
54
- this.context = this.canvas.getContext ? this.canvas.getContext("2d", {alpha: (typeof id === 'object' && id.alpha === false) ? false : true}) : null;
55
- this.canvas.__object__ = this;
56
- this.type = 'odo';
57
- this.isRGraph = true;
58
- this.min = RGraph.stringsToNumbers(min);
59
- this.max = RGraph.stringsToNumbers(max);
60
- this.value = RGraph.stringsToNumbers(value);
61
- this.currentValue = null;
62
- this.uid = RGraph.CreateUID();
63
- this.canvas.uid = this.canvas.uid ? this.canvas.uid : RGraph.CreateUID();
64
- this.colorsParsed = false;
65
- this.coordsText = [];
66
- this.original_colors = [];
67
- this.firstDraw = true; // After the first draw this will be false
68
-
69
-
70
- /**
71
- * Compatibility with older browsers
72
- */
73
- //RGraph.OldBrowserCompat(this.context);
74
-
75
-
76
- this.properties =
77
- {
78
- 'chart.background.border': 'black',
79
- 'chart.background.color': '#eee',
80
- 'chart.background.lines.color': '#ddd',
81
- 'chart.centerx': null,
82
- 'chart.centery': null,
83
- 'chart.radius': null,
84
- 'chart.value.text': false,
85
- 'chart.value.text.decimals': 0,
86
- 'chart.needle.color': 'black',
87
- 'chart.needle.width': 2,
88
- 'chart.needle.head': true,
89
- 'chart.needle.tail': true,
90
- 'chart.needle.type': 'pointer',
91
- 'chart.needle.extra': [],
92
- 'chart.needle.triangle.border': '#aaa',
93
- 'chart.text.size': 12,
94
- 'chart.text.color': 'black',
95
- 'chart.text.font': 'Segoe UI, Arial, Verdana, sans-serif',
96
- 'chart.text.accessible': false,
97
- 'chart.text.accessible.overflow': 'visible',
98
- 'chart.text.accessible.pointerevents': true,
99
- 'chart.green.max': max * 0.75,
100
- 'chart.red.min': max * 0.9,
101
- 'chart.green.color': 'Gradient(white:#0c0)',
102
- 'chart.yellow.color': 'Gradient(white:#ff0)',
103
- 'chart.red.color': 'Gradient(white:#f00)',
104
- 'chart.label.area': 35,
105
- 'chart.gutter.left': 25,
106
- 'chart.gutter.right': 25,
107
- 'chart.gutter.top': 25,
108
- 'chart.gutter.bottom': 25,
109
- 'chart.title': '',
110
- 'chart.title.background': null,
111
- 'chart.title.hpos': null,
112
- 'chart.title.vpos': null,
113
- 'chart.title.font': null,
114
- 'chart.title.bold': true,
115
- 'chart.title.x': null,
116
- 'chart.title.y': null,
117
- 'chart.title.halign': null,
118
- 'chart.title.valign': null,
119
- 'chart.contextmenu': null,
120
- 'chart.linewidth': 1,
121
- 'chart.shadow.inner': false,
122
- 'chart.shadow.inner.color': 'black',
123
- 'chart.shadow.inner.offsetx': 3,
124
- 'chart.shadow.inner.offsety': 3,
125
- 'chart.shadow.inner.blur': 6,
126
- 'chart.shadow.outer': false,
127
- 'chart.shadow.outer.color': 'black',
128
- 'chart.shadow.outer.offsetx': 3,
129
- 'chart.shadow.outer.offsety': 3,
130
- 'chart.shadow.outer.blur': 6,
131
- 'chart.annotatable': false,
132
- 'chart.annotate.color': 'black',
133
- 'chart.scale.decimals': 0,
134
- 'chart.scale.point': '.',
135
- 'chart.scale.thousand': ',',
136
- 'chart.zoom.factor': 1.5,
137
- 'chart.zoom.fade.in': true,
138
- 'chart.zoom.fade.out': true,
139
- 'chart.zoom.hdir': 'right',
140
- 'chart.zoom.vdir': 'down',
141
- 'chart.zoom.frames': 25,
142
- 'chart.zoom.delay': 16.666,
143
- 'chart.zoom.shadow': true,
144
- 'chart.zoom.background': true,
145
- 'chart.zoom.action': 'zoom',
146
- 'chart.resizable': false,
147
- 'chart.resize.handle.adjust': [0,0],
148
- 'chart.resize.handle.background': null,
149
- 'chart.units.pre': '',
150
- 'chart.units.post': '',
151
- 'chart.border': false,
152
- 'chart.border.color1': '#BEBCB0',
153
- 'chart.border.color2': '#F0EFEA',
154
- 'chart.border.color3': '#BEBCB0',
155
- 'chart.tickmarks': true,
156
- 'chart.tickmarks.highlighted': false,
157
- 'chart.tickmarks.big.color': '#999',
158
- 'chart.zerostart': false,
159
- 'chart.labels': null,
160
- 'chart.units.pre': '',
161
- 'chart.units.post': '',
162
- 'chart.value.units.pre': '',
163
- 'chart.value.units.post': '',
164
- 'chart.key': null,
165
- 'chart.key.background': 'white',
166
- 'chart.key.position': 'graph',
167
- 'chart.key.shadow': false,
168
- 'chart.key.shadow.color': '#666',
169
- 'chart.key.shadow.blur': 3,
170
- 'chart.key.shadow.offsetx': 2,
171
- 'chart.key.shadow.offsety': 2,
172
- 'chart.key.position.gutter.boxed':false,
173
- 'chart.key.position.x': null,
174
- 'chart.key.position.y': null,
175
- 'chart.key.halign': 'right',
176
- 'chart.key.color.shape': 'square',
177
- 'chart.key.rounded': true,
178
- 'chart.key.text.size': 10,
179
- 'chart.key.colors': null,
180
- 'chart.key.text.color': 'black',
181
- 'chart.adjustable': false,
182
- 'chart.clearto': 'rgba(0,0,0,0)'
183
- }
184
-
185
-
186
-
187
- /*
188
- * Translate half a pixel for antialiasing purposes - but only if it hasn't beeen
189
- * done already
190
- */
191
- if (!this.canvas.__rgraph_aa_translated__) {
192
- this.context.translate(0.5,0.5);
193
-
194
- this.canvas.__rgraph_aa_translated__ = true;
195
- }
196
-
197
-
198
-
199
- // Short variable names
200
- var RG = RGraph,
201
- ca = this.canvas,
202
- co = ca.getContext('2d'),
203
- prop = this.properties,
204
- pa2 = RG.path2,
205
- win = window,
206
- doc = document,
207
- ma = Math
208
-
209
-
210
-
211
- /**
212
- * "Decorate" the object with the generic effects if the effects library has been included
213
- */
214
- if (RG.Effects && typeof RG.Effects.decorate === 'function') {
215
- RG.Effects.decorate(this);
216
- }
217
-
218
-
219
-
220
-
221
- /**
222
- * A peudo setter
223
- *
224
- * @param name string The name of the property to set
225
- * @param value mixed The value of the property
226
- */
227
- this.set =
228
- this.Set = function (name, value)
229
- {
230
- var value = arguments[1] || null;
231
-
232
- /**
233
- * the number of arguments is only one and it's an
234
- * object - parse it for configuration data and return.
235
- */
236
- if (arguments.length === 1 && typeof name === 'object') {
237
- RG.parseObjectStyleConfig(this, name);
238
- return this;
239
- }
240
-
241
-
242
-
243
-
244
-
245
- /**
246
- * This should be done first - prepend the property name with "chart." if necessary
247
- */
248
- if (name.substr(0,6) != 'chart.') {
249
- name = 'chart.' + name;
250
- }
251
-
252
-
253
-
254
-
255
- // Convert uppercase letters to dot+lower case letter
256
- while(name.match(/([A-Z])/)) {
257
- name = name.replace(/([A-Z])/, '.' + RegExp.$1.toLowerCase());
258
- }
259
-
260
- if (name == 'chart.needle.style') {
261
- alert('[RGRAPH] The RGraph property chart.needle.style has changed to chart.needle.color');
262
- }
263
-
264
- if (name == 'chart.needle.thickness') {
265
- name = 'chart.needle.width';
266
- }
267
-
268
- if (name == 'chart.value') {
269
- this.value = value;
270
- return;
271
- }
272
-
273
-
274
-
275
-
276
-
277
-
278
- prop[name] = value;
279
-
280
- return this;
281
- };
282
-
283
-
284
-
285
-
286
- /**
287
- * A getter
288
- *
289
- * @param name string The name of the property to get
290
- */
291
- this.get =
292
- this.Get = function (name)
293
- {
294
- /**
295
- * This should be done first - prepend the property name with "chart." if necessary
296
- */
297
- if (name.substr(0,6) != 'chart.') {
298
- name = 'chart.' + name;
299
- }
300
-
301
- // Convert uppercase letters to dot+lower case letter
302
- while(name.match(/([A-Z])/)) {
303
- name = name.replace(/([A-Z])/, '.' + RegExp.$1.toLowerCase());
304
- }
305
-
306
- if (name == 'chart.value') {
307
- return this.value;
308
- }
309
-
310
- return prop[name.toLowerCase()];
311
- };
312
-
313
-
314
-
315
-
316
- /**
317
- * Draws the odometer
318
- */
319
- this.draw =
320
- this.Draw = function ()
321
- {
322
- /**
323
- * Fire the onbeforedraw event
324
- */
325
- RG.FireCustomEvent(this, 'onbeforedraw');
326
-
327
-
328
- /**
329
- * Set the current value
330
- */
331
- this.currentValue = this.value;
332
-
333
- /**
334
- * No longer allow values outside the range of the Odo
335
- */
336
- if (this.value > this.max) {
337
- this.value = this.max;
338
- }
339
-
340
- if (this.value < this.min) {
341
- this.value = this.min;
342
- }
343
-
344
- /**
345
- * This is new in May 2011 and facilitates indiviual gutter settings,
346
- * eg chart.gutter.left
347
- */
348
- this.gutterLeft = prop['chart.gutter.left'];
349
- this.gutterRight = prop['chart.gutter.right'];
350
- this.gutterTop = prop['chart.gutter.top'];
351
- this.gutterBottom = prop['chart.gutter.bottom'];
352
-
353
- // Work out a few things
354
- this.radius = Math.min(
355
- (ca.width - this.gutterLeft - this.gutterRight) / 2,
356
- (ca.height - this.gutterTop - this.gutterBottom) / 2
357
- )
358
- - (prop['chart.border'] ? 25 : 0);
359
- this.diameter = 2 * this.radius;
360
- this.centerx = ((ca.width - this.gutterLeft- this.gutterRight) / 2) + this.gutterLeft;
361
- this.centery = ((ca.height - this.gutterTop - this.gutterBottom) / 2) + this.gutterTop;
362
- this.range = this.max - this.min;
363
- this.coordsText = [];
364
-
365
- /**
366
- * Move the centerx if the key is defined
367
- */
368
- if (prop['chart.key'] && prop['chart.key'].length > 0 && ca.width > ca.height) this.centerx = 5 + this.radius;
369
- if (typeof(prop['chart.centerx']) == 'number') this.centerx = prop['chart.centerx'];
370
- if (typeof(prop['chart.centery']) == 'number') this.centery = prop['chart.centery'];
371
-
372
-
373
- /**
374
- * Allow custom setting of the radius
375
- */
376
- if (typeof(prop['chart.radius']) == 'number') {
377
- this.radius = prop['chart.radius'];
378
-
379
- if (prop['chart.border']) {
380
- this.radius -= 25;
381
- }
382
- }
383
-
384
-
385
- /**
386
- * Parse the colors for gradients. Its down here so that the center X/Y can be used
387
- */
388
- if (!this.colorsParsed) {
389
-
390
- this.parseColors();
391
-
392
- // Don't want to do this again
393
- this.colorsParsed = true;
394
- }
395
-
396
-
397
-
398
- co.lineWidth = prop['chart.linewidth'];
399
-
400
- // Draw the background
401
- this.DrawBackground();
402
-
403
- // And lastly, draw the labels
404
- this.DrawLabels();
405
-
406
- // Draw the needle
407
- this.DrawNeedle(this.value, prop['chart.needle.color']);
408
-
409
- /**
410
- * Draw any extra needles
411
- */
412
- if (prop['chart.needle.extra'].length > 0) {
413
- for (var i=0; i<prop['chart.needle.extra'].length; ++i) {
414
- var needle = prop['chart.needle.extra'][i];
415
- this.DrawNeedle(needle[0], needle[1], needle[2]);
416
- }
417
- }
418
-
419
- /**
420
- * Draw the key if requested
421
- */
422
- if (prop['chart.key'] && prop['chart.key'].length > 0) {
423
- // Build a colors array out of the needle colors
424
- var colors = [prop['chart.needle.color']];
425
-
426
- if (prop['chart.needle.extra'].length > 0) {
427
- for (var i=0; i<prop['chart.needle.extra'].length; ++i) {
428
- var needle = prop['chart.needle.extra'][i];
429
- colors.push(needle[1]);
430
- }
431
- }
432
-
433
- RG.DrawKey(this, prop['chart.key'], colors);
434
- }
435
-
436
-
437
- /**
438
- * Setup the context menu if required
439
- */
440
- if (prop['chart.contextmenu']) {
441
- RG.ShowContext(this);
442
- }
443
-
444
-
445
- /**
446
- * This function enables resizing
447
- */
448
- if (prop['chart.resizable']) {
449
- RG.AllowResizing(this);
450
- }
451
-
452
-
453
- /**
454
- * This installs the event listeners
455
- */
456
- RG.InstallEventListeners(this);
457
-
458
-
459
-
460
- /**
461
- * Fire the onfirstdraw event
462
- */
463
- if (this.firstDraw) {
464
- RG.fireCustomEvent(this, 'onfirstdraw');
465
- this.firstDraw = false;
466
- this.firstDrawFunc();
467
- }
468
-
469
-
470
-
471
-
472
- /**
473
- * Fire the RGraph ondraw event
474
- */
475
- RG.FireCustomEvent(this, 'ondraw');
476
-
477
- return this;
478
- };
479
-
480
-
481
-
482
- /**
483
- * Used in chaining. Runs a function there and then - not waiting for
484
- * the events to fire (eg the onbeforedraw event)
485
- *
486
- * @param function func The function to execute
487
- */
488
- this.exec = function (func)
489
- {
490
- func(this);
491
-
492
- return this;
493
- };
494
-
495
-
496
-
497
-
498
- /**
499
- * Draws the background
500
- */
501
- this.drawBackground =
502
- this.DrawBackground = function ()
503
- {
504
- co.beginPath();
505
-
506
- /**
507
- * Turn on the shadow if need be
508
- */
509
- if (prop['chart.shadow.outer']) {
510
- RG.setShadow(this, prop['chart.shadow.outer.color'], prop['chart.shadow.outer.offsetx'], prop['chart.shadow.outer.offsety'], prop['chart.shadow.outer.blur']);
511
- }
512
-
513
- var backgroundColor = prop['chart.background.color'];
514
-
515
- // Draw the grey border
516
- co.fillStyle = backgroundColor;
517
- co.arc(this.centerx, this.centery, this.radius, 0.0001, RG.TWOPI, false);
518
- co.fill();
519
-
520
- /**
521
- * Turn off the shadow
522
- */
523
- RG.noShadow(this);
524
-
525
-
526
- // Draw a circle
527
- co.strokeStyle = '#666';
528
- co.arc(this.centerx, this.centery, this.radius, 0, RG.TWOPI, false);
529
-
530
- // Now draw a big white circle to make the lines appear as tick marks
531
- // This is solely for Chrome
532
- co.fillStyle = backgroundColor;
533
- co.arc(this.centerx, this.centery, this.radius, 0, RG.TWOPI, false);
534
- co.fill();
535
-
536
- /**
537
- * Draw more tickmarks
538
- */
539
- if (prop['chart.tickmarks']) {
540
- co.beginPath();
541
- co.strokeStyle = '#bbb';
542
-
543
- for (var i=0; i<=360; i+=3) {
544
- co.arc(this.centerx, this.centery, this.radius, 0, i / 57.3, false);
545
- co.lineTo(this.centerx, this.centery);
546
- }
547
- co.stroke();
548
- }
549
-
550
- co.beginPath();
551
- co.lineWidth = 1;
552
- co.strokeStyle = 'black';
553
-
554
- // Now draw a big white circle to make the lines appear as tick marks
555
- co.fillStyle = backgroundColor;
556
- co.strokeStyle = backgroundColor;
557
- co.arc(this.centerx, this.centery, this.radius - 5, 0, RG.TWOPI, false);
558
- co.fill();
559
- co.stroke();
560
-
561
- // Gray lines at 18 degree intervals
562
- co.beginPath();
563
- co.strokeStyle = prop['chart.background.lines.color'];
564
- for (var i=0; i<360; i+=18) {
565
- co.arc(this.centerx, this.centery, this.radius, 0, RG.degrees2Radians(i), false);
566
- co.lineTo(this.centerx, this.centery);
567
- }
568
- co.stroke();
569
-
570
- // Redraw the outer circle
571
- co.beginPath();
572
- co.strokeStyle = prop['chart.background.border'];
573
- co.arc(this.centerx, this.centery, this.radius, 0, RG.TWOPI, false);
574
- co.stroke();
575
-
576
- /**
577
- * Now draw the center bits shadow if need be
578
- */
579
- if (prop['chart.shadow.inner']) {
580
- co.beginPath();
581
- RG.SetShadow(this, prop['chart.shadow.inner.color'], prop['chart.shadow.inner.offsetx'], prop['chart.shadow.inner.offsety'], prop['chart.shadow.inner.blur']);
582
- co.arc(this.centerx, this.centery, this.radius - prop['chart.label.area'], 0, RG.TWOPI, 0);
583
- co.fill();
584
- co.stroke();
585
-
586
- /**
587
- * Turn off the shadow
588
- */
589
- RG.NoShadow(this);
590
- }
591
-
592
- /*******************************************************
593
- * Draw the green area
594
- *******************************************************/
595
- var greengrad = prop['chart.green.color'];
596
-
597
- // Draw the "tick highlight"
598
- if (prop['chart.tickmarks.highlighted']) {
599
- co.beginPath();
600
- co.lineWidth = 5;
601
- co.strokeStyle = greengrad;
602
- co.arc(this.centerx, this.centery, this.radius - 2.5,
603
-
604
- -1 * RG.HALFPI,
605
- (((prop['chart.green.max'] - this.min)/ (this.max - this.min)) * RG.TWOPI) - RG.HALFPI,
606
- 0);
607
-
608
- co.stroke();
609
-
610
- co.lineWidth = 1;
611
- }
612
-
613
- co.beginPath();
614
- co.fillStyle = greengrad;
615
- co.arc(
616
- this.centerx,
617
- this.centery,
618
- this.radius - prop['chart.label.area'],
619
- 0 - RG.HALFPI,
620
- (((prop['chart.green.max'] - this.min)/ (this.max - this.min)) * RG.TWOPI) - RG.HALFPI,
621
- false
622
- );
623
- co.lineTo(this.centerx, this.centery);
624
- co.closePath();
625
- co.fill();
626
-
627
-
628
- /*******************************************************
629
- * Draw the yellow area
630
- *******************************************************/
631
- var yellowgrad = prop['chart.yellow.color'];
632
-
633
- // Draw the "tick highlight"
634
- if (prop['chart.tickmarks.highlighted']) {
635
- co.beginPath();
636
- co.lineWidth = 5;
637
- co.strokeStyle = yellowgrad;
638
- co.arc(this.centerx, this.centery, this.radius - 2.5, (
639
-
640
- ((prop['chart.green.max'] - this.min) / (this.max - this.min)) * RG.TWOPI) - RG.HALFPI,
641
- (((prop['chart.red.min'] - this.min) / (this.max - this.min)) * RG.TWOPI) - RG.HALFPI,
642
- 0);
643
-
644
- co.stroke();
645
-
646
- co.lineWidth = 1;
647
- }
648
-
649
- co.beginPath();
650
- co.fillStyle = yellowgrad;
651
- co.arc(
652
- this.centerx,
653
- this.centery,
654
- this.radius - prop['chart.label.area'],
655
- ( ((prop['chart.green.max'] - this.min) / (this.max - this.min)) * RG.TWOPI) - RG.HALFPI,
656
- ( ((prop['chart.red.min'] - this.min) / (this.max - this.min)) * RG.TWOPI) - RG.HALFPI,
657
- false
658
- );
659
- co.lineTo(this.centerx, this.centery);
660
- co.closePath();
661
- co.fill();
662
-
663
- /*******************************************************
664
- * Draw the red area
665
- *******************************************************/
666
- var redgrad = prop['chart.red.color'];
667
-
668
- // Draw the "tick highlight"
669
- if (prop['chart.tickmarks.highlighted']) {
670
- co.beginPath();
671
- co.lineWidth = 5;
672
- co.strokeStyle = redgrad;
673
- co.arc(this.centerx, this.centery, this.radius - 2.5,(((prop['chart.red.min'] - this.min) / (this.max - this.min)) * RG.TWOPI) - RG.HALFPI,RG.TWOPI - RG.HALFPI,0);
674
- co.stroke();
675
-
676
- co.lineWidth = 1;
677
- }
678
-
679
- co.beginPath();
680
- co.fillStyle = redgrad;
681
- co.strokeStyle = redgrad;
682
- co.arc(
683
- this.centerx,
684
- this.centery,
685
- this.radius - prop['chart.label.area'],
686
- (((prop['chart.red.min'] - this.min) / (this.max - this.min)) * RG.TWOPI) - RG.HALFPI,
687
- RG.TWOPI - RG.HALFPI,
688
- false
689
- );
690
- co.lineTo(this.centerx, this.centery);
691
- co.closePath();
692
- co.fill();
693
-
694
-
695
- /**
696
- * Draw the thick border
697
- */
698
- if (prop['chart.border']) {
699
-
700
- var grad = co.createRadialGradient(this.centerx, this.centery, this.radius, this.centerx, this.centery, this.radius + 20);
701
- grad.addColorStop(0, prop['chart.border.color1']);
702
- grad.addColorStop(0.5, prop['chart.border.color2']);
703
- grad.addColorStop(1, prop['chart.border.color3']);
704
-
705
-
706
- co.beginPath();
707
- co.fillStyle = grad;
708
- co.strokeStyle = 'rgba(0,0,0,0)'
709
- co.lineWidth = 0.001;
710
- co.arc(this.centerx, this.centery, this.radius + 20, 0, RG.TWOPI, 0);
711
- co.arc(this.centerx, this.centery, this.radius - 2, RG.TWOPI, 0, 1);
712
- co.fill();
713
- }
714
-
715
- // Put the linewidth back to what it was
716
- co.lineWidth = prop['chart.linewidth'];
717
-
718
-
719
- /**
720
- * Draw the title if specified
721
- */
722
- if (prop['chart.title']) {
723
- RG.DrawTitle(this,
724
- prop['chart.title'],
725
- this.centery - this.radius,
726
- null,
727
- prop['chart.title.size'] ? prop['chart.title.size'] : prop['chart.text.size'] + 2);
728
- }
729
-
730
-
731
- // Draw the big tick marks
732
- if (!prop['chart.tickmarks.highlighted']) {
733
- for (var i=18; i<=360; i+=36) {
734
- co.beginPath();
735
- co.strokeStyle = prop['chart.tickmarks.big.color'];
736
- co.lineWidth = 2;
737
- co.arc(this.centerx, this.centery, this.radius - 1, RG.degrees2Radians(i), RG.degrees2Radians(i+0.01), false);
738
- co.arc(this.centerx, this.centery, this.radius - 7, RG.degrees2Radians(i), RG.degrees2Radians(i+0.01), false);
739
- co.stroke();
740
- }
741
- }
742
- };
743
-
744
-
745
-
746
-
747
- /**
748
- * Draws the needle of the odometer
749
- *
750
- * @param number value The value to represent
751
- * @param string color The color of the needle
752
- * @param number The OPTIONAL length of the needle
753
- */
754
- this.drawNeedle =
755
- this.DrawNeedle = function (value, color)
756
- {
757
- // The optional length of the needle
758
- var length = arguments[2] ? arguments[2] : this.radius - prop['chart.label.area'];
759
-
760
- // ===== First draw a grey background circle =====
761
-
762
- co.fillStyle = '#999';
763
-
764
- co.beginPath();
765
- co.moveTo(this.centerx, this.centery);
766
- co.arc(this.centerx, this.centery, 10, 0, RG.TWOPI, false);
767
- co.fill();
768
- co.closePath();
769
-
770
- co.fill();
771
-
772
- // ===============================================
773
-
774
- co.fillStyle = color
775
- co.strokeStyle = '#666';
776
-
777
- // Draw the centre bit
778
- co.beginPath();
779
- co.moveTo(this.centerx, this.centery);
780
- co.arc(this.centerx, this.centery, 8, 0, RG.TWOPI, false);
781
- co.fill();
782
- co.closePath();
783
-
784
- co.stroke();
785
- co.fill();
786
-
787
- if (prop['chart.needle.type'] == 'pointer') {
788
-
789
- co.strokeStyle = color;
790
- co.lineWidth = prop['chart.needle.width'];
791
- co.lineCap = 'round';
792
- co.lineJoin = 'round';
793
-
794
- // Draw the needle
795
- co.beginPath();
796
- // The trailing bit on the opposite side of the dial
797
- co.beginPath();
798
- co.moveTo(this.centerx, this.centery);
799
-
800
- if (prop['chart.needle.tail']) {
801
-
802
- co.arc(this.centerx,
803
- this.centery,
804
- 20,
805
- (((value / this.range) * 360) + 90) / (180 / RG.PI),
806
- (((value / this.range) * 360) + 90 + 0.01) / (180 / RG.PI), // The 0.01 avoids a bug in ExCanvas and Chrome 6
807
- false
808
- );
809
- }
810
-
811
- // Draw the long bit on the opposite side
812
- co.arc(this.centerx,
813
- this.centery,
814
- length - 10,
815
- (((value / this.range) * 360) - 90) / (180 / RG.PI),
816
- (((value / this.range) * 360) - 90 + 0.1 ) / (180 / RG.PI), // The 0.1 avoids a bug in ExCanvas and Chrome 6
817
- false
818
- );
819
- co.closePath();
820
-
821
- //co.stroke();
822
- //co.fill();
823
-
824
-
825
- } else if (prop['chart.needle.type'] == 'triangle') {
826
-
827
- co.lineWidth = 0.01;
828
- co.lineEnd = 'square';
829
- co.lineJoin = 'miter';
830
-
831
- /**
832
- * This draws the version of the pointer that becomes the border
833
- */
834
- co.beginPath();
835
- co.fillStyle = prop['chart.needle.triangle.border'];
836
- co.arc(this.centerx, this.centery, 11, (((value / this.range) * 360)) / 57.3, ((((value / this.range) * 360)) + 0.01) / 57.3, 0);
837
- co.arc(this.centerx, this.centery, 11, (((value / this.range) * 360) + 180) / 57.3, ((((value / this.range) * 360) + 180) + 0.01)/ 57.3, 0);
838
- co.arc(this.centerx, this.centery, length - 5, (((value / this.range) * 360) - 90) / 57.3, ((((value / this.range) * 360) - 90) / 57.3) + 0.01, 0);
839
- co.closePath();
840
- co.fill();
841
-
842
- co.beginPath();
843
- co.arc(this.centerx, this.centery, 15, 0, RG.TWOPI, 0);
844
- co.closePath();
845
- co.fill();
846
-
847
- // This draws the pointer
848
- co.beginPath();
849
- co.strokeStyle = 'black';
850
- co.fillStyle = color;
851
- co.arc(this.centerx, this.centery, 7, (((value / this.range) * 360)) / 57.3, ((((value / this.range) * 360)) + 0.01) / 57.3, 0);
852
- co.arc(this.centerx, this.centery, 7, (((value / this.range) * 360) + 180) / 57.3, ((((value / this.range) * 360) + 180) + 0.01)/ 57.3, 0);
853
- co.arc(this.centerx, this.centery, length - 13, (((value / this.range) * 360) - 90) / 57.3, ((((value / this.range) * 360) - 90) / 57.3) + 0.01, 0);
854
- co.closePath();
855
- co.stroke();
856
- co.fill();
857
-
858
-
859
- /**
860
- * This is here to accomodate the MSIE/ExCanvas combo
861
- */
862
- co.beginPath();
863
- co.arc(this.centerx, this.centery, 7, 0, RG.TWOPI, 0);
864
- co.closePath();
865
- co.fill();
866
- }
867
-
868
-
869
- co.stroke();
870
- co.fill();
871
-
872
- // Draw the mini center circle
873
- co.beginPath();
874
- co.fillStyle = color;
875
- co.arc(this.centerx, this.centery, prop['chart.needle.type'] == 'pointer' ? 7 : 12, 0.01, RG.TWOPI, false);
876
- co.fill();
877
-
878
- // This draws the arrow at the end of the line
879
- if (prop['chart.needle.head'] && prop['chart.needle.type'] == 'pointer') {
880
- co.lineWidth = 1;
881
- co.fillStyle = color;
882
-
883
- // round, bevel, miter
884
- co.lineJoin = 'miter';
885
- co.lineCap = 'butt';
886
-
887
- co.beginPath();
888
- co.arc(this.centerx, this.centery, length - 5, (((value / this.range) * 360) - 90) / 57.3, (((value / this.range) * 360) - 90 + 0.1) / 57.3, false);
889
-
890
- co.arc(this.centerx,
891
- this.centery,
892
- length - 20,
893
- RG.degrees2Radians( ((value / this.range) * 360) - (length < 60 ? 80 : 85) ),
894
- RG.degrees2Radians( ((value / this.range) * 360) - (length < 60 ? 100 : 95) ),
895
- 1);
896
- co.closePath();
897
-
898
- co.fill();
899
- //co.stroke();
900
- }
901
-
902
-
903
- /**
904
- * Draw a white circle at the centre
905
- */
906
- co.beginPath();
907
- co.fillStyle = 'gray';
908
- co.moveTo(this.centerx, this.centery);
909
- co.arc(this.centerx,this.centery,2,0,6.2795,false);
910
- co.closePath();
911
-
912
- co.fill();
913
- };
914
-
915
-
916
-
917
-
918
- /**
919
- * Draws the labels for the Odo
920
- */
921
- this.drawLabels =
922
- this.DrawLabels = function ()
923
- {
924
- var size = prop['chart.text.size'];
925
- var font = prop['chart.text.font'];
926
- var centerx = this.centerx;
927
- var centery = this.centery;
928
- var r = this.radius - (prop['chart.label.area'] / 2);
929
- var start = this.min;
930
- var end = this.max;
931
- var decimals = prop['chart.scale.decimals'];
932
- var labels = prop['chart.labels'];
933
- var units_pre = prop['chart.units.pre'];
934
- var units_post = prop['chart.units.post'];
935
-
936
- co.beginPath();
937
- co.fillStyle = prop['chart.text.color'];
938
-
939
- /**
940
- * If labels are specified, use those
941
- */
942
- if (labels) {
943
- for (var i=0; i<labels.length; ++i) {
944
-
945
- RG.Text2(this, {'font':font,
946
- 'size':size,
947
- 'x':centerx + (Math.cos(((i / labels.length) * RG.TWOPI) - RG.HALFPI) * (this.radius - (prop['chart.label.area'] / 2) ) ), // Sin A = Opp / Hyp
948
- 'y':centery + (Math.sin(((i / labels.length) * RG.TWOPI) - RG.HALFPI) * (this.radius - (prop['chart.label.area'] / 2) ) ), // Cos A = Adj / Hyp
949
- 'text': String(labels[i]),
950
- 'valign':'center',
951
- 'halign':'center',
952
- 'tag': 'labels'
953
- });
954
- }
955
-
956
- /**
957
- * If not, use the maximum value
958
- */
959
- } else {
960
- RG.Text2(this, {'font':font,'size':size,'x':centerx + (0.588 * r ),'y':centery - (0.809 * r ),'text':RG.number_format(this, (((end - start) * (1/10)) + start).toFixed(decimals), units_pre, units_post),'halign':'center','valign':'center','angle':36,'tag': 'scale'});
961
- RG.Text2(this, {'font':font,'size':size,'x':centerx + (0.951 * r ),'y':centery - (0.309 * r),'text':RG.number_format(this, (((end - start) * (2/10)) + start).toFixed(decimals), units_pre, units_post),'halign':'center','valign':'center','angle':72,'tag': 'scale'});
962
- RG.Text2(this, {'font':font,'size':size,'x':centerx + (0.949 * r),'y':centery + (0.31 * r),'text':RG.number_format(this, (((end - start) * (3/10)) + start).toFixed(decimals), units_pre, units_post),'halign':'center','valign':'center','angle':108,'tag': 'scale'});
963
- RG.Text2(this, {'font':font,'size':size,'x':centerx + (0.588 * r ),'y':centery + (0.809 * r ),'text':RG.number_format(this, (((end - start) * (4/10)) + start).toFixed(decimals), units_pre, units_post),'halign':'center','valign':'center','angle':144,'tag': 'scale'});
964
- RG.Text2(this, {'font':font,'size':size,'x':centerx,'y':centery + r,'text':RG.number_format(this, (((end - start) * (5/10)) + start).toFixed(decimals),units_pre, units_post),'halign':'center','valign':'center','angle':180,'tag': 'scale'});
965
-
966
- RG.Text2(this, {'font':font,'size':size,'x':centerx - (0.588 * r ),'y':centery + (0.809 * r ),'text':RG.number_format(this, (((end - start) * (6/10)) + start).toFixed(decimals), units_pre, units_post),'halign':'center','valign':'center','angle':216,'tag': 'scale'});
967
- RG.Text2(this, {'font':font,'size':size,'x':centerx - (0.949 * r),'y':centery + (0.300 * r),'text':RG.number_format(this, (((end - start) * (7/10)) + start).toFixed(decimals), units_pre, units_post),'halign':'center','valign':'center','angle':252,'tag': 'scale'});
968
- RG.Text2(this, {'font':font,'size':size,'x':centerx - (0.951 * r),'y':centery - (0.309 * r),'text':RG.number_format(this, (((end - start) * (8/10)) + start).toFixed(decimals), units_pre, units_post),'halign':'center','valign':'center','angle':288,'tag': 'scale'});
969
- RG.Text2(this, {'font':font,'size':size,'x':centerx - (0.588 * r ),'y':centery - (0.809 * r ),'text':RG.number_format(this, (((end - start) * (9/10)) + start).toFixed(decimals), units_pre, units_post),'halign':'center','valign':'center','angle':324,'tag': 'scale'});
970
- RG.Text2(this, {'font':font,'size':size,'x':centerx,'y':centery - r,'text': prop['chart.zerostart'] ? RG.number_format(this, this.min.toFixed(decimals), units_pre, units_post) : RG.number_format(this, (((end - start) * (10/10)) + start).toFixed(decimals), units_pre, units_post),'halign':'center','valign':'center','tag': 'scale'});
971
- }
972
-
973
- co.fill();
974
-
975
- /**
976
- * Draw the text label below the center point
977
- */
978
- if (prop['chart.value.text']) {
979
- co.strokeStyle = 'black';
980
- RG.Text2(this, {'font':font,
981
- 'size':size+2,
982
- 'x':centerx,
983
- 'y':centery + size + 15,
984
- 'text':String(prop['chart.value.units.pre'] + this.value.toFixed(prop['chart.value.text.decimals']) + prop['chart.value.units.post']),
985
- 'halign':'center',
986
- 'valign':'center',
987
- 'bounding':true,
988
- 'boundingFill':'white',
989
- 'tag': 'value.text'
990
- });
991
- }
992
- };
993
-
994
-
995
-
996
-
997
- /**
998
- * A placeholder function
999
- *
1000
- * @param object The event object
1001
- */
1002
- this.getShape = function (e) {};
1003
-
1004
-
1005
-
1006
-
1007
- /**
1008
- * This function returns the pertinent value at the point of click
1009
- *
1010
- * @param object The event object
1011
- */
1012
- this.getValue = function (e)
1013
- {
1014
- var mouseXY = RG.getMouseXY(e)
1015
- var angle = RG.getAngleByXY(this.centerx, this.centery, mouseXY[0], mouseXY[1]);
1016
- angle += RG.HALFPI;
1017
-
1018
- if (mouseXY[0] >= this.centerx && mouseXY[1] <= this.centery) {
1019
- angle -= RG.TWOPI;
1020
- }
1021
-
1022
- var value = ((angle / RG.TWOPI) * (this.max - this.min)) + this.min;
1023
-
1024
- return value;
1025
- };
1026
-
1027
-
1028
-
1029
-
1030
- /**
1031
- * The getObjectByXY() worker method. Don't call this call:
1032
- *
1033
- * RGraph.ObjectRegistry.getObjectByXY(e)
1034
- *
1035
- * @param object e The event object
1036
- */
1037
- this.getObjectByXY = function (e)
1038
- {
1039
- var mouseXY = RG.getMouseXY(e);
1040
- var radius = RG.getHypLength(this.centerx, this.centery, mouseXY[0], mouseXY[1]);
1041
-
1042
- if (
1043
- mouseXY[0] > (this.centerx - this.radius)
1044
- && mouseXY[0] < (this.centerx + this.radius)
1045
- && mouseXY[1] > (this.centery - this.radius)
1046
- && mouseXY[1] < (this.centery + this.radius)
1047
- && radius <= this.radius
1048
- ) {
1049
-
1050
- return this;
1051
- }
1052
- };
1053
-
1054
-
1055
-
1056
-
1057
- /**
1058
- * This method handles the adjusting calculation for when the mouse is moved
1059
- *
1060
- * @param object e The event object
1061
- */
1062
- this.adjusting_mousemove =
1063
- this.Adjusting_mousemove = function (e)
1064
- {
1065
- /**
1066
- * Handle adjusting for the Bar
1067
- */
1068
- if (prop['chart.adjustable'] && RG.Registry.Get('chart.adjusting') && RG.Registry.Get('chart.adjusting').uid == this.uid) {
1069
- this.value = this.getValue(e);
1070
- RG.clear(ca);
1071
- RG.redrawCanvas(ca);
1072
- RG.fireCustomEvent(this, 'onadjust');
1073
- }
1074
- };
1075
-
1076
-
1077
-
1078
-
1079
- /**
1080
- * This method returns the appropriate angle for a value
1081
- *
1082
- * @param number value The value
1083
- */
1084
- this.getAngle = function (value)
1085
- {
1086
- // Higher than max or lower than min
1087
- if (value > this.max || value < this.min) {
1088
- return null;
1089
- }
1090
-
1091
- var angle = (((value - this.min) / (this.max - this.min)) * RG.TWOPI);
1092
- angle -= RG.HALFPI;
1093
-
1094
- return angle;
1095
- };
1096
-
1097
-
1098
-
1099
-
1100
- /**
1101
- * This allows for easy specification of gradients
1102
- */
1103
- this.parseColors = function ()
1104
- {
1105
- // Save the original colors so that they can be restored when the canvas is reset
1106
- if (this.original_colors.length === 0) {
1107
- this.original_colors['chart.green.color'] = RG.array_clone(prop['chart.green.color']);
1108
- this.original_colors['chart.yellow.color'] = RG.array_clone(prop['chart.yellow.color']);
1109
- this.original_colors['chart.red.color'] = RG.array_clone(prop['chart.red.color']);
1110
- }
1111
-
1112
- // Parse the basic colors
1113
- prop['chart.green.color'] = this.parseSingleColorForGradient(prop['chart.green.color']);
1114
- prop['chart.yellow.color'] = this.parseSingleColorForGradient(prop['chart.yellow.color']);
1115
- prop['chart.red.color'] = this.parseSingleColorForGradient(prop['chart.red.color']);
1116
- };
1117
-
1118
-
1119
-
1120
-
1121
- /**
1122
- * Use this function to reset the object to the post-constructor state. Eg reset colors if
1123
- * need be etc
1124
- */
1125
- this.reset = function ()
1126
- {
1127
- };
1128
-
1129
-
1130
-
1131
-
1132
- /**
1133
- * This parses a single color value
1134
- */
1135
- this.parseSingleColorForGradient = function (color)
1136
- {
1137
- if (!color || typeof(color) != 'string') {
1138
- return color;
1139
- }
1140
-
1141
- if (color.match(/^gradient\((.*)\)$/i)) {
1142
-
1143
- var parts = RegExp.$1.split(':');
1144
-
1145
- // Create the gradient
1146
- var grad = co.createRadialGradient(this.centerx, this.centery, 0, this.centerx, this.centery, this.radius);
1147
-
1148
- var diff = 1 / (parts.length - 1);
1149
-
1150
- grad.addColorStop(0, RG.trim(parts[0]));
1151
-
1152
- for (var j=1; j<parts.length; ++j) {
1153
- grad.addColorStop(j * diff, RG.trim(parts[j]));
1154
- }
1155
- }
1156
-
1157
- return grad ? grad : color;
1158
- };
1159
-
1160
-
1161
-
1162
-
1163
- /**
1164
- * Using a function to add events makes it easier to facilitate method chaining
1165
- *
1166
- * @param string type The type of even to add
1167
- * @param function func
1168
- */
1169
- this.on = function (type, func)
1170
- {
1171
- if (type.substr(0,2) !== 'on') {
1172
- type = 'on' + type;
1173
- }
1174
-
1175
- if (typeof this[type] !== 'function') {
1176
- this[type] = func;
1177
- } else {
1178
- RG.addCustomEventListener(this, type, func);
1179
- }
1180
-
1181
- return this;
1182
- };
1183
-
1184
-
1185
-
1186
-
1187
- /**
1188
- * This function runs once only
1189
- * (put at the end of the file (before any effects))
1190
- */
1191
- this.firstDrawFunc = function ()
1192
- {
1193
- };
1194
-
1195
-
1196
-
1197
-
1198
- /**
1199
- * Odo Grow
1200
- *
1201
- * This effect gradually increases the represented value
1202
- *
1203
- * @param An object of effect properties - eg: {frames: 30}
1204
- * @param function An optional callback function
1205
- */
1206
- this.grow = function ()
1207
- {
1208
- var obj = this;
1209
- var opt = arguments[0] || {};
1210
- var frames = opt.frames || 30;
1211
- var frame = 0;
1212
- var current = obj.currentValue || 0;
1213
- var origValue = Number(obj.currentValue);
1214
- var newValue = obj.value;
1215
- var diff = newValue - origValue;
1216
- var step = (diff / frames);
1217
- var callback = arguments[1] || function () {};
1218
-
1219
-
1220
-
1221
- function iterator ()
1222
- {
1223
- obj.value = origValue + (frame * step);
1224
-
1225
- RG.clear(obj.canvas);
1226
- RG.redrawCanvas(obj.canvas);
1227
-
1228
- if (frame++ < frames) {
1229
- RG.Effects.updateCanvas(iterator);
1230
- } else {
1231
- callback(obj);
1232
- }
1233
- }
1234
-
1235
- iterator();
1236
-
1237
- return this;
1238
- };
1239
-
1240
-
1241
-
1242
-
1243
-
1244
-
1245
- RG.att(ca);
1246
-
1247
-
1248
-
1249
-
1250
- /**
1251
- * Register the object
1252
- */
1253
- RG.register(this);
1254
-
1255
-
1256
-
1257
-
1258
- /**
1259
- * This is the 'end' of the constructor so if the first argument
1260
- * contains configuration data - handle that.
1261
- */
1262
- if (parseConfObjectForOptions) {
1263
- RG.parseObjectStyleConfig(this, conf.options);
1264
- }
1265
- };
2
+ RGraph=window.RGraph||{isRGraph:true};RGraph.Odometer=function(conf)
3
+ {if(typeof conf==='object'&&typeof conf.value!=='undefined'&&typeof conf.id==='string'){var id=conf.id
4
+ var canvas=document.getElementById(id);var min=conf.min;var max=conf.max;var value=conf.value;var parseConfObjectForOptions=true;}else{var id=conf;var canvas=document.getElementById(id);var min=arguments[1];var max=arguments[2];var value=arguments[3];}
5
+ this.id=id;this.canvas=canvas;this.context=this.canvas.getContext?this.canvas.getContext("2d",{alpha:(typeof id==='object'&&id.alpha===false)?false:true}):null;this.canvas.__object__=this;this.type='odo';this.isRGraph=true;this.min=RGraph.stringsToNumbers(min);this.max=RGraph.stringsToNumbers(max);this.value=RGraph.stringsToNumbers(value);this.currentValue=null;this.uid=RGraph.CreateUID();this.canvas.uid=this.canvas.uid?this.canvas.uid:RGraph.CreateUID();this.colorsParsed=false;this.coordsText=[];this.original_colors=[];this.firstDraw=true;this.properties={'chart.background.border':'black','chart.background.color':'#eee','chart.background.lines.color':'#ddd','chart.centerx':null,'chart.centery':null,'chart.radius':null,'chart.value.text':false,'chart.value.text.decimals':0,'chart.needle.color':'black','chart.needle.width':2,'chart.needle.head':true,'chart.needle.tail':true,'chart.needle.type':'pointer','chart.needle.extra':[],'chart.needle.triangle.border':'#aaa','chart.text.size':12,'chart.text.color':'black','chart.text.font':'Segoe UI, Arial, Verdana, sans-serif','chart.text.accessible':false,'chart.text.accessible.overflow':'visible','chart.text.accessible.pointerevents':true,'chart.green.max':max*0.75,'chart.red.min':max*0.9,'chart.green.color':'Gradient(white:#0c0)','chart.yellow.color':'Gradient(white:#ff0)','chart.red.color':'Gradient(white:#f00)','chart.label.area':35,'chart.gutter.left':25,'chart.gutter.right':25,'chart.gutter.top':25,'chart.gutter.bottom':25,'chart.title':'','chart.title.background':null,'chart.title.hpos':null,'chart.title.vpos':null,'chart.title.font':null,'chart.title.bold':true,'chart.title.x':null,'chart.title.y':null,'chart.title.halign':null,'chart.title.valign':null,'chart.contextmenu':null,'chart.linewidth':1,'chart.shadow.inner':false,'chart.shadow.inner.color':'black','chart.shadow.inner.offsetx':3,'chart.shadow.inner.offsety':3,'chart.shadow.inner.blur':6,'chart.shadow.outer':false,'chart.shadow.outer.color':'black','chart.shadow.outer.offsetx':3,'chart.shadow.outer.offsety':3,'chart.shadow.outer.blur':6,'chart.annotatable':false,'chart.annotate.color':'black','chart.scale.decimals':0,'chart.scale.point':'.','chart.scale.thousand':',','chart.zoom.factor':1.5,'chart.zoom.fade.in':true,'chart.zoom.fade.out':true,'chart.zoom.hdir':'right','chart.zoom.vdir':'down','chart.zoom.frames':25,'chart.zoom.delay':16.666,'chart.zoom.shadow':true,'chart.zoom.background':true,'chart.zoom.action':'zoom','chart.resizable':false,'chart.resize.handle.adjust':[0,0],'chart.resize.handle.background':null,'chart.units.pre':'','chart.units.post':'','chart.border':false,'chart.border.color1':'#BEBCB0','chart.border.color2':'#F0EFEA','chart.border.color3':'#BEBCB0','chart.tickmarks':true,'chart.tickmarks.highlighted':false,'chart.tickmarks.big.color':'#999','chart.zerostart':false,'chart.labels':null,'chart.units.pre':'','chart.units.post':'','chart.value.units.pre':'','chart.value.units.post':'','chart.key':null,'chart.key.background':'white','chart.key.position':'graph','chart.key.shadow':false,'chart.key.shadow.color':'#666','chart.key.shadow.blur':3,'chart.key.shadow.offsetx':2,'chart.key.shadow.offsety':2,'chart.key.position.gutter.boxed':false,'chart.key.position.x':null,'chart.key.position.y':null,'chart.key.halign':'right','chart.key.color.shape':'square','chart.key.rounded':true,'chart.key.text.size':10,'chart.key.colors':null,'chart.key.text.color':'black','chart.adjustable':false,'chart.clearto':'rgba(0,0,0,0)'}
6
+ if(!this.canvas.__rgraph_aa_translated__){this.context.translate(0.5,0.5);this.canvas.__rgraph_aa_translated__=true;}
7
+ var RG=RGraph,ca=this.canvas,co=ca.getContext('2d'),prop=this.properties,pa2=RG.path2,win=window,doc=document,ma=Math
8
+ if(RG.Effects&&typeof RG.Effects.decorate==='function'){RG.Effects.decorate(this);}
9
+ this.set=this.Set=function(name,value)
10
+ {var value=arguments[1]||null;if(arguments.length===1&&typeof name==='object'){RG.parseObjectStyleConfig(this,name);return this;}
11
+ if(name.substr(0,6)!='chart.'){name='chart.'+name;}
12
+ while(name.match(/([A-Z])/)){name=name.replace(/([A-Z])/,'.'+RegExp.$1.toLowerCase());}
13
+ if(name=='chart.needle.style'){alert('[RGRAPH] The RGraph property chart.needle.style has changed to chart.needle.color');}
14
+ if(name=='chart.needle.thickness'){name='chart.needle.width';}
15
+ if(name=='chart.value'){this.value=value;return;}
16
+ prop[name]=value;return this;};this.get=this.Get=function(name)
17
+ {if(name.substr(0,6)!='chart.'){name='chart.'+name;}
18
+ while(name.match(/([A-Z])/)){name=name.replace(/([A-Z])/,'.'+RegExp.$1.toLowerCase());}
19
+ if(name=='chart.value'){return this.value;}
20
+ return prop[name.toLowerCase()];};this.draw=this.Draw=function()
21
+ {RG.FireCustomEvent(this,'onbeforedraw');this.currentValue=this.value;if(this.value>this.max){this.value=this.max;}
22
+ if(this.value<this.min){this.value=this.min;}
23
+ this.gutterLeft=prop['chart.gutter.left'];this.gutterRight=prop['chart.gutter.right'];this.gutterTop=prop['chart.gutter.top'];this.gutterBottom=prop['chart.gutter.bottom'];this.radius=Math.min((ca.width-this.gutterLeft-this.gutterRight)/2,(ca.height-this.gutterTop-this.gutterBottom)/2)
24
+ -(prop['chart.border']?25:0);this.diameter=2*this.radius;this.centerx=((ca.width-this.gutterLeft-this.gutterRight)/2)+this.gutterLeft;this.centery=((ca.height-this.gutterTop-this.gutterBottom)/2)+this.gutterTop;this.range=this.max-this.min;this.coordsText=[];if(prop['chart.key']&&prop['chart.key'].length>0&&ca.width>ca.height)this.centerx=5+this.radius;if(typeof(prop['chart.centerx'])=='number')this.centerx=prop['chart.centerx'];if(typeof(prop['chart.centery'])=='number')this.centery=prop['chart.centery'];if(typeof(prop['chart.radius'])=='number'){this.radius=prop['chart.radius'];if(prop['chart.border']){this.radius-=25;}}
25
+ if(!this.colorsParsed){this.parseColors();this.colorsParsed=true;}
26
+ co.lineWidth=prop['chart.linewidth'];this.DrawBackground();this.DrawLabels();this.DrawNeedle(this.value,prop['chart.needle.color']);if(prop['chart.needle.extra'].length>0){for(var i=0;i<prop['chart.needle.extra'].length;++i){var needle=prop['chart.needle.extra'][i];this.DrawNeedle(needle[0],needle[1],needle[2]);}}
27
+ if(prop['chart.key']&&prop['chart.key'].length>0){var colors=[prop['chart.needle.color']];if(prop['chart.needle.extra'].length>0){for(var i=0;i<prop['chart.needle.extra'].length;++i){var needle=prop['chart.needle.extra'][i];colors.push(needle[1]);}}
28
+ RG.DrawKey(this,prop['chart.key'],colors);}
29
+ if(prop['chart.contextmenu']){RG.ShowContext(this);}
30
+ if(prop['chart.resizable']){RG.AllowResizing(this);}
31
+ RG.InstallEventListeners(this);if(this.firstDraw){this.firstDraw=false;RG.fireCustomEvent(this,'onfirstdraw');this.firstDrawFunc();}
32
+ RG.FireCustomEvent(this,'ondraw');return this;};this.exec=function(func)
33
+ {func(this);return this;};this.drawBackground=this.DrawBackground=function()
34
+ {co.beginPath();if(prop['chart.shadow.outer']){RG.setShadow(this,prop['chart.shadow.outer.color'],prop['chart.shadow.outer.offsetx'],prop['chart.shadow.outer.offsety'],prop['chart.shadow.outer.blur']);}
35
+ var backgroundColor=prop['chart.background.color'];co.fillStyle=backgroundColor;co.arc(this.centerx,this.centery,this.radius,0.0001,RG.TWOPI,false);co.fill();RG.noShadow(this);co.strokeStyle='#666';co.arc(this.centerx,this.centery,this.radius,0,RG.TWOPI,false);co.fillStyle=backgroundColor;co.arc(this.centerx,this.centery,this.radius,0,RG.TWOPI,false);co.fill();if(prop['chart.tickmarks']){co.beginPath();co.strokeStyle='#bbb';for(var i=0;i<=360;i+=3){co.arc(this.centerx,this.centery,this.radius,0,i/57.3,false);co.lineTo(this.centerx,this.centery);}
36
+ co.stroke();}
37
+ co.beginPath();co.lineWidth=1;co.strokeStyle='black';co.fillStyle=backgroundColor;co.strokeStyle=backgroundColor;co.arc(this.centerx,this.centery,this.radius-5,0,RG.TWOPI,false);co.fill();co.stroke();co.beginPath();co.strokeStyle=prop['chart.background.lines.color'];for(var i=0;i<360;i+=18){co.arc(this.centerx,this.centery,this.radius,0,RG.degrees2Radians(i),false);co.lineTo(this.centerx,this.centery);}
38
+ co.stroke();co.beginPath();co.strokeStyle=prop['chart.background.border'];co.arc(this.centerx,this.centery,this.radius,0,RG.TWOPI,false);co.stroke();if(prop['chart.shadow.inner']){co.beginPath();RG.SetShadow(this,prop['chart.shadow.inner.color'],prop['chart.shadow.inner.offsetx'],prop['chart.shadow.inner.offsety'],prop['chart.shadow.inner.blur']);co.arc(this.centerx,this.centery,this.radius-prop['chart.label.area'],0,RG.TWOPI,0);co.fill();co.stroke();RG.NoShadow(this);}
39
+ var greengrad=prop['chart.green.color'];if(prop['chart.tickmarks.highlighted']){co.beginPath();co.lineWidth=5;co.strokeStyle=greengrad;co.arc(this.centerx,this.centery,this.radius-2.5,-1*RG.HALFPI,(((prop['chart.green.max']-this.min)/(this.max-this.min))*RG.TWOPI)-RG.HALFPI,0);co.stroke();co.lineWidth=1;}
40
+ co.beginPath();co.fillStyle=greengrad;co.arc(this.centerx,this.centery,this.radius-prop['chart.label.area'],0-RG.HALFPI,(((prop['chart.green.max']-this.min)/(this.max-this.min))*RG.TWOPI)-RG.HALFPI,false);co.lineTo(this.centerx,this.centery);co.closePath();co.fill();var yellowgrad=prop['chart.yellow.color'];if(prop['chart.tickmarks.highlighted']){co.beginPath();co.lineWidth=5;co.strokeStyle=yellowgrad;co.arc(this.centerx,this.centery,this.radius-2.5,(((prop['chart.green.max']-this.min)/(this.max-this.min))*RG.TWOPI)-RG.HALFPI,(((prop['chart.red.min']-this.min)/(this.max-this.min))*RG.TWOPI)-RG.HALFPI,0);co.stroke();co.lineWidth=1;}
41
+ co.beginPath();co.fillStyle=yellowgrad;co.arc(this.centerx,this.centery,this.radius-prop['chart.label.area'],(((prop['chart.green.max']-this.min)/(this.max-this.min))*RG.TWOPI)-RG.HALFPI,(((prop['chart.red.min']-this.min)/(this.max-this.min))*RG.TWOPI)-RG.HALFPI,false);co.lineTo(this.centerx,this.centery);co.closePath();co.fill();var redgrad=prop['chart.red.color'];if(prop['chart.tickmarks.highlighted']){co.beginPath();co.lineWidth=5;co.strokeStyle=redgrad;co.arc(this.centerx,this.centery,this.radius-2.5,(((prop['chart.red.min']-this.min)/(this.max-this.min))*RG.TWOPI)-RG.HALFPI,RG.TWOPI-RG.HALFPI,0);co.stroke();co.lineWidth=1;}
42
+ co.beginPath();co.fillStyle=redgrad;co.strokeStyle=redgrad;co.arc(this.centerx,this.centery,this.radius-prop['chart.label.area'],(((prop['chart.red.min']-this.min)/(this.max-this.min))*RG.TWOPI)-RG.HALFPI,RG.TWOPI-RG.HALFPI,false);co.lineTo(this.centerx,this.centery);co.closePath();co.fill();if(prop['chart.border']){var grad=co.createRadialGradient(this.centerx,this.centery,this.radius,this.centerx,this.centery,this.radius+20);grad.addColorStop(0,prop['chart.border.color1']);grad.addColorStop(0.5,prop['chart.border.color2']);grad.addColorStop(1,prop['chart.border.color3']);co.beginPath();co.fillStyle=grad;co.strokeStyle='rgba(0,0,0,0)'
43
+ co.lineWidth=0.001;co.arc(this.centerx,this.centery,this.radius+20,0,RG.TWOPI,0);co.arc(this.centerx,this.centery,this.radius-2,RG.TWOPI,0,1);co.fill();}
44
+ co.lineWidth=prop['chart.linewidth'];if(prop['chart.title']){RG.DrawTitle(this,prop['chart.title'],this.centery-this.radius,null,prop['chart.title.size']?prop['chart.title.size']:prop['chart.text.size']+2);}
45
+ if(!prop['chart.tickmarks.highlighted']){for(var i=18;i<=360;i+=36){co.beginPath();co.strokeStyle=prop['chart.tickmarks.big.color'];co.lineWidth=2;co.arc(this.centerx,this.centery,this.radius-1,RG.degrees2Radians(i),RG.degrees2Radians(i+0.01),false);co.arc(this.centerx,this.centery,this.radius-7,RG.degrees2Radians(i),RG.degrees2Radians(i+0.01),false);co.stroke();}}};this.drawNeedle=this.DrawNeedle=function(value,color)
46
+ {var length=arguments[2]?arguments[2]:this.radius-prop['chart.label.area'];co.fillStyle='#999';co.beginPath();co.moveTo(this.centerx,this.centery);co.arc(this.centerx,this.centery,10,0,RG.TWOPI,false);co.fill();co.closePath();co.fill();co.fillStyle=color
47
+ co.strokeStyle='#666';co.beginPath();co.moveTo(this.centerx,this.centery);co.arc(this.centerx,this.centery,8,0,RG.TWOPI,false);co.fill();co.closePath();co.stroke();co.fill();if(prop['chart.needle.type']=='pointer'){co.strokeStyle=color;co.lineWidth=prop['chart.needle.width'];co.lineCap='round';co.lineJoin='round';co.beginPath();co.beginPath();co.moveTo(this.centerx,this.centery);if(prop['chart.needle.tail']){co.arc(this.centerx,this.centery,20,(((value/this.range)*360)+90)/(180/RG.PI),(((value/this.range)*360)+90+0.01)/(180/RG.PI),false);}
48
+ co.arc(this.centerx,this.centery,length-10,(((value/this.range)*360)-90)/(180/RG.PI),(((value/this.range)*360)-90+0.1)/(180/RG.PI),false);co.closePath();}else if(prop['chart.needle.type']=='triangle'){co.lineWidth=0.01;co.lineEnd='square';co.lineJoin='miter';co.beginPath();co.fillStyle=prop['chart.needle.triangle.border'];co.arc(this.centerx,this.centery,11,(((value/this.range)*360))/57.3,((((value/this.range)*360))+0.01)/57.3,0);co.arc(this.centerx,this.centery,11,(((value/this.range)*360)+180)/57.3,((((value/this.range)*360)+180)+0.01)/57.3,0);co.arc(this.centerx,this.centery,length-5,(((value/this.range)*360)-90)/57.3,((((value/this.range)*360)-90)/57.3)+0.01,0);co.closePath();co.fill();co.beginPath();co.arc(this.centerx,this.centery,15,0,RG.TWOPI,0);co.closePath();co.fill();co.beginPath();co.strokeStyle='black';co.fillStyle=color;co.arc(this.centerx,this.centery,7,(((value/this.range)*360))/57.3,((((value/this.range)*360))+0.01)/57.3,0);co.arc(this.centerx,this.centery,7,(((value/this.range)*360)+180)/57.3,((((value/this.range)*360)+180)+0.01)/57.3,0);co.arc(this.centerx,this.centery,length-13,(((value/this.range)*360)-90)/57.3,((((value/this.range)*360)-90)/57.3)+0.01,0);co.closePath();co.stroke();co.fill();co.beginPath();co.arc(this.centerx,this.centery,7,0,RG.TWOPI,0);co.closePath();co.fill();}
49
+ co.stroke();co.fill();co.beginPath();co.fillStyle=color;co.arc(this.centerx,this.centery,prop['chart.needle.type']=='pointer'?7:12,0.01,RG.TWOPI,false);co.fill();if(prop['chart.needle.head']&&prop['chart.needle.type']=='pointer'){co.lineWidth=1;co.fillStyle=color;co.lineJoin='miter';co.lineCap='butt';co.beginPath();co.arc(this.centerx,this.centery,length-5,(((value/this.range)*360)-90)/57.3,(((value/this.range)*360)-90+0.1)/57.3,false);co.arc(this.centerx,this.centery,length-20,RG.degrees2Radians(((value/this.range)*360)-(length<60?80:85)),RG.degrees2Radians(((value/this.range)*360)-(length<60?100:95)),1);co.closePath();co.fill();}
50
+ co.beginPath();co.fillStyle='gray';co.moveTo(this.centerx,this.centery);co.arc(this.centerx,this.centery,2,0,6.2795,false);co.closePath();co.fill();};this.drawLabels=this.DrawLabels=function()
51
+ {var size=prop['chart.text.size'];var font=prop['chart.text.font'];var centerx=this.centerx;var centery=this.centery;var r=this.radius-(prop['chart.label.area']/2);var start=this.min;var end=this.max;var decimals=prop['chart.scale.decimals'];var labels=prop['chart.labels'];var units_pre=prop['chart.units.pre'];var units_post=prop['chart.units.post'];co.beginPath();co.fillStyle=prop['chart.text.color'];if(labels){for(var i=0;i<labels.length;++i){RG.Text2(this,{'font':font,'size':size,'x':centerx+(Math.cos(((i/labels.length)*RG.TWOPI)-RG.HALFPI)*(this.radius-(prop['chart.label.area']/2))),'y':centery+(Math.sin(((i/labels.length)*RG.TWOPI)-RG.HALFPI)*(this.radius-(prop['chart.label.area']/2))),'text':String(labels[i]),'valign':'center','halign':'center','tag':'labels'});}}else{RG.Text2(this,{'font':font,'size':size,'x':centerx+(0.588*r),'y':centery-(0.809*r),'text':RG.number_format(this,(((end-start)*(1/10))+start).toFixed(decimals),units_pre,units_post),'halign':'center','valign':'center','angle':36,'tag':'scale'});RG.Text2(this,{'font':font,'size':size,'x':centerx+(0.951*r),'y':centery-(0.309*r),'text':RG.number_format(this,(((end-start)*(2/10))+start).toFixed(decimals),units_pre,units_post),'halign':'center','valign':'center','angle':72,'tag':'scale'});RG.Text2(this,{'font':font,'size':size,'x':centerx+(0.949*r),'y':centery+(0.31*r),'text':RG.number_format(this,(((end-start)*(3/10))+start).toFixed(decimals),units_pre,units_post),'halign':'center','valign':'center','angle':108,'tag':'scale'});RG.Text2(this,{'font':font,'size':size,'x':centerx+(0.588*r),'y':centery+(0.809*r),'text':RG.number_format(this,(((end-start)*(4/10))+start).toFixed(decimals),units_pre,units_post),'halign':'center','valign':'center','angle':144,'tag':'scale'});RG.Text2(this,{'font':font,'size':size,'x':centerx,'y':centery+r,'text':RG.number_format(this,(((end-start)*(5/10))+start).toFixed(decimals),units_pre,units_post),'halign':'center','valign':'center','angle':180,'tag':'scale'});RG.Text2(this,{'font':font,'size':size,'x':centerx-(0.588*r),'y':centery+(0.809*r),'text':RG.number_format(this,(((end-start)*(6/10))+start).toFixed(decimals),units_pre,units_post),'halign':'center','valign':'center','angle':216,'tag':'scale'});RG.Text2(this,{'font':font,'size':size,'x':centerx-(0.949*r),'y':centery+(0.300*r),'text':RG.number_format(this,(((end-start)*(7/10))+start).toFixed(decimals),units_pre,units_post),'halign':'center','valign':'center','angle':252,'tag':'scale'});RG.Text2(this,{'font':font,'size':size,'x':centerx-(0.951*r),'y':centery-(0.309*r),'text':RG.number_format(this,(((end-start)*(8/10))+start).toFixed(decimals),units_pre,units_post),'halign':'center','valign':'center','angle':288,'tag':'scale'});RG.Text2(this,{'font':font,'size':size,'x':centerx-(0.588*r),'y':centery-(0.809*r),'text':RG.number_format(this,(((end-start)*(9/10))+start).toFixed(decimals),units_pre,units_post),'halign':'center','valign':'center','angle':324,'tag':'scale'});RG.Text2(this,{'font':font,'size':size,'x':centerx,'y':centery-r,'text':prop['chart.zerostart']?RG.number_format(this,this.min.toFixed(decimals),units_pre,units_post):RG.number_format(this,(((end-start)*(10/10))+start).toFixed(decimals),units_pre,units_post),'halign':'center','valign':'center','tag':'scale'});}
52
+ co.fill();if(prop['chart.value.text']){co.strokeStyle='black';RG.Text2(this,{'font':font,'size':size+2,'x':centerx,'y':centery+size+15,'text':String(prop['chart.value.units.pre']+this.value.toFixed(prop['chart.value.text.decimals'])+prop['chart.value.units.post']),'halign':'center','valign':'center','bounding':true,'boundingFill':'white','tag':'value.text'});}};this.getShape=function(e){};this.getValue=function(e)
53
+ {var mouseXY=RG.getMouseXY(e)
54
+ var angle=RG.getAngleByXY(this.centerx,this.centery,mouseXY[0],mouseXY[1]);angle+=RG.HALFPI;if(mouseXY[0]>=this.centerx&&mouseXY[1]<=this.centery){angle-=RG.TWOPI;}
55
+ var value=((angle/RG.TWOPI)*(this.max-this.min))+this.min;return value;};this.getObjectByXY=function(e)
56
+ {var mouseXY=RG.getMouseXY(e);var radius=RG.getHypLength(this.centerx,this.centery,mouseXY[0],mouseXY[1]);if(mouseXY[0]>(this.centerx-this.radius)&&mouseXY[0]<(this.centerx+this.radius)&&mouseXY[1]>(this.centery-this.radius)&&mouseXY[1]<(this.centery+this.radius)&&radius<=this.radius){return this;}};this.adjusting_mousemove=this.Adjusting_mousemove=function(e)
57
+ {if(prop['chart.adjustable']&&RG.Registry.Get('chart.adjusting')&&RG.Registry.Get('chart.adjusting').uid==this.uid){this.value=this.getValue(e);RG.clear(ca);RG.redrawCanvas(ca);RG.fireCustomEvent(this,'onadjust');}};this.getAngle=function(value)
58
+ {if(value>this.max||value<this.min){return null;}
59
+ var angle=(((value-this.min)/(this.max-this.min))*RG.TWOPI);angle-=RG.HALFPI;return angle;};this.parseColors=function()
60
+ {if(this.original_colors.length===0){this.original_colors['chart.green.color']=RG.array_clone(prop['chart.green.color']);this.original_colors['chart.yellow.color']=RG.array_clone(prop['chart.yellow.color']);this.original_colors['chart.red.color']=RG.array_clone(prop['chart.red.color']);}
61
+ prop['chart.green.color']=this.parseSingleColorForGradient(prop['chart.green.color']);prop['chart.yellow.color']=this.parseSingleColorForGradient(prop['chart.yellow.color']);prop['chart.red.color']=this.parseSingleColorForGradient(prop['chart.red.color']);};this.reset=function()
62
+ {};this.parseSingleColorForGradient=function(color)
63
+ {if(!color||typeof(color)!='string'){return color;}
64
+ if(color.match(/^gradient\((.*)\)$/i)){var parts=RegExp.$1.split(':');var grad=co.createRadialGradient(this.centerx,this.centery,0,this.centerx,this.centery,this.radius);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]));}}
65
+ return grad?grad:color;};this.on=function(type,func)
66
+ {if(type.substr(0,2)!=='on'){type='on'+type;}
67
+ if(typeof this[type]!=='function'){this[type]=func;}else{RG.addCustomEventListener(this,type,func);}
68
+ return this;};this.firstDrawFunc=function()
69
+ {};this.grow=function()
70
+ {var obj=this;var opt=arguments[0]||{};var frames=opt.frames||30;var frame=0;var current=obj.currentValue||0;var origValue=Number(obj.currentValue);var newValue=obj.value;var diff=newValue-origValue;var step=(diff/frames);var callback=arguments[1]||function(){};function iterator()
71
+ {obj.value=origValue+(frame*step);RG.clear(obj.canvas);RG.redrawCanvas(obj.canvas);if(frame++<frames){RG.Effects.updateCanvas(iterator);}else{callback(obj);}}
72
+ iterator();return this;};RG.att(ca);RG.register(this);if(parseConfObjectForOptions){RG.parseObjectStyleConfig(this,conf.options);}};