rgraph-rails 1.0.7 → 1.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +3 -3
- data/lib/rgraph-rails/version.rb +1 -1
- data/license.txt +4 -16
- data/vendor/assets/javascripts/RGraph.bar.js +3734 -241
- data/vendor/assets/javascripts/RGraph.bipolar.js +2005 -115
- data/vendor/assets/javascripts/RGraph.common.annotate.js +395 -35
- data/vendor/assets/javascripts/RGraph.common.context.js +595 -30
- data/vendor/assets/javascripts/RGraph.common.core.js +5282 -405
- data/vendor/assets/javascripts/RGraph.common.csv.js +276 -19
- data/vendor/assets/javascripts/RGraph.common.deprecated.js +450 -35
- data/vendor/assets/javascripts/RGraph.common.dynamic.js +1395 -86
- data/vendor/assets/javascripts/RGraph.common.effects.js +1545 -90
- data/vendor/assets/javascripts/RGraph.common.key.js +753 -54
- data/vendor/assets/javascripts/RGraph.common.resizing.js +563 -37
- data/vendor/assets/javascripts/RGraph.common.sheets.js +352 -29
- data/vendor/assets/javascripts/RGraph.common.tooltips.js +450 -32
- data/vendor/assets/javascripts/RGraph.common.zoom.js +219 -14
- data/vendor/assets/javascripts/RGraph.drawing.background.js +570 -35
- data/vendor/assets/javascripts/RGraph.drawing.circle.js +544 -35
- data/vendor/assets/javascripts/RGraph.drawing.image.js +755 -52
- data/vendor/assets/javascripts/RGraph.drawing.marker1.js +645 -41
- data/vendor/assets/javascripts/RGraph.drawing.marker2.js +633 -37
- data/vendor/assets/javascripts/RGraph.drawing.marker3.js +514 -36
- data/vendor/assets/javascripts/RGraph.drawing.poly.js +559 -39
- data/vendor/assets/javascripts/RGraph.drawing.rect.js +548 -35
- data/vendor/assets/javascripts/RGraph.drawing.text.js +664 -36
- data/vendor/assets/javascripts/RGraph.drawing.xaxis.js +812 -50
- data/vendor/assets/javascripts/RGraph.drawing.yaxis.js +856 -51
- data/vendor/assets/javascripts/RGraph.fuel.js +964 -58
- data/vendor/assets/javascripts/RGraph.funnel.js +984 -55
- data/vendor/assets/javascripts/RGraph.gantt.js +1354 -77
- data/vendor/assets/javascripts/RGraph.gauge.js +1421 -87
- data/vendor/assets/javascripts/RGraph.hbar.js +2562 -146
- data/vendor/assets/javascripts/RGraph.hprogress.js +1401 -80
- data/vendor/assets/javascripts/RGraph.line.js +4226 -244
- data/vendor/assets/javascripts/RGraph.meter.js +1280 -74
- data/vendor/assets/javascripts/RGraph.modaldialog.js +301 -19
- data/vendor/assets/javascripts/RGraph.odo.js +1264 -71
- data/vendor/assets/javascripts/RGraph.pie.js +2288 -137
- data/vendor/assets/javascripts/RGraph.radar.js +1847 -110
- data/vendor/assets/javascripts/RGraph.rose.js +1977 -108
- data/vendor/assets/javascripts/RGraph.rscatter.js +1432 -80
- data/vendor/assets/javascripts/RGraph.scatter.js +3036 -168
- data/vendor/assets/javascripts/RGraph.semicircularprogress.js +1120 -60
- data/vendor/assets/javascripts/RGraph.svg.bar.js +1067 -0
- data/vendor/assets/javascripts/RGraph.svg.common.ajax.js +247 -0
- data/vendor/assets/javascripts/RGraph.svg.common.core.js +3363 -0
- data/vendor/assets/javascripts/RGraph.svg.common.csv.js +277 -0
- data/vendor/assets/javascripts/RGraph.svg.common.fx.js +1304 -0
- data/vendor/assets/javascripts/RGraph.svg.common.sheets.js +353 -0
- data/vendor/assets/javascripts/RGraph.svg.common.tooltips.js +233 -0
- data/vendor/assets/javascripts/RGraph.svg.hbar.js +1141 -0
- data/vendor/assets/javascripts/RGraph.svg.line.js +1486 -0
- data/vendor/assets/javascripts/RGraph.svg.pie.js +781 -0
- data/vendor/assets/javascripts/RGraph.svg.radar.js +1326 -0
- data/vendor/assets/javascripts/RGraph.svg.semicircularprogress.js +817 -0
- data/vendor/assets/javascripts/RGraph.thermometer.js +1135 -62
- data/vendor/assets/javascripts/RGraph.vprogress.js +1470 -83
- data/vendor/assets/javascripts/RGraph.waterfall.js +1347 -80
- metadata +15 -3
@@ -1,15 +1,220 @@
|
|
1
|
+
// version: 2017-01-02
|
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
|
+
*/
|
1
12
|
|
2
|
-
RGraph=window.RGraph||{isRGraph:true};
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
{
|
8
|
-
var
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
13
|
+
RGraph = window.RGraph || {isRGraph: true};
|
14
|
+
|
15
|
+
|
16
|
+
// Module pattern
|
17
|
+
(function (win, doc, undefined)
|
18
|
+
{
|
19
|
+
var RG = RGraph,
|
20
|
+
ua = navigator.userAgent,
|
21
|
+
ma = Math;
|
22
|
+
|
23
|
+
|
24
|
+
|
25
|
+
|
26
|
+
/**
|
27
|
+
* A zoom in function
|
28
|
+
*
|
29
|
+
* @param e object The event object
|
30
|
+
*/
|
31
|
+
RG.zoom =
|
32
|
+
RG.Zoom = function (e)
|
33
|
+
{
|
34
|
+
e = RGraph.fixEventObject(e);
|
35
|
+
|
36
|
+
|
37
|
+
/**
|
38
|
+
* Triggered from a context menu
|
39
|
+
*/
|
40
|
+
if (e && e.target && e.target.__canvas__) {
|
41
|
+
var canvas = e.target.__canvas__;
|
42
|
+
|
43
|
+
/**
|
44
|
+
* This is here to facilitate zooming by just a single left click
|
45
|
+
*/
|
46
|
+
} else if (e && e.target && e.target.__object__) {
|
47
|
+
var canvas = e.target.__object__.canvas;
|
48
|
+
e.stopPropagation(); // Hmmmm
|
49
|
+
}
|
50
|
+
|
51
|
+
// Fallback for MSIE9
|
52
|
+
if (!canvas) {
|
53
|
+
var registry_canvas = RGraph.Registry.get('chart.contextmenu').__canvas__;
|
54
|
+
if (registry_canvas) {
|
55
|
+
var canvas = registry_canvas;
|
56
|
+
}
|
57
|
+
}
|
58
|
+
|
59
|
+
var obj = canvas.__object__;
|
60
|
+
var context = obj.context;
|
61
|
+
var dataurl = canvas.toDataURL();
|
62
|
+
var tmp = canvas;
|
63
|
+
var coords = RG.getCanvasXY(canvas);
|
64
|
+
var factor = obj.Get('chart.zoom.factor') - 1;
|
65
|
+
|
66
|
+
var x = coords[0];
|
67
|
+
var y = coords[1];
|
68
|
+
|
69
|
+
var img = document.createElement('img');
|
70
|
+
img.className = 'RGraph_zoomed_canvas';
|
71
|
+
img.style.border = '1px solid #ccc';
|
72
|
+
img.style.width = canvas.width + 'px';
|
73
|
+
img.style.height = canvas.height + 'px';
|
74
|
+
img.style.position = 'absolute';
|
75
|
+
img.style.left = x + 'px';
|
76
|
+
img.style.top = y + 'px';
|
77
|
+
img.style.backgroundColor = 'white';
|
78
|
+
img.style.opacity = obj.Get('chart.zoom.fade.in') ? 0 : 1;
|
79
|
+
img.style.zIndex = 99;
|
80
|
+
img.src = dataurl;
|
81
|
+
document.body.appendChild(img);
|
82
|
+
|
83
|
+
//RGraph.Registry.Set('chart.zoomedimage', img);
|
84
|
+
// Store the zoomed image in a global var - NOT the registry
|
85
|
+
RGraph.zoom_image = img;
|
86
|
+
RGraph.zoom_image.obj = obj;
|
87
|
+
|
88
|
+
// Image onclick should not hide the image
|
89
|
+
img.onclick = function (e)
|
90
|
+
{
|
91
|
+
e = RGraph.fixEventObject(e);
|
92
|
+
e.stopPropagation();
|
93
|
+
return false;
|
94
|
+
}
|
95
|
+
|
96
|
+
//setTimeout(function (){document.body.onclick = RGraph.HideZoomedCanvas;}, 1);
|
97
|
+
|
98
|
+
|
99
|
+
var width = parseInt(canvas.width);
|
100
|
+
var height = parseInt(canvas.height);
|
101
|
+
var frames = obj.Get('chart.zoom.frames');
|
102
|
+
var delay = obj.Get('chart.zoom.delay');
|
103
|
+
|
104
|
+
// Increase the width over 10 frames - center
|
105
|
+
if (obj.Get('chart.zoom.hdir') == 'center') {
|
106
|
+
|
107
|
+
for (var i=1; i<=frames; ++i) {
|
108
|
+
var newWidth = width * factor * (i/frames) + width;
|
109
|
+
var rightHandEdge = x + canvas.width;
|
110
|
+
var newLeft = (x + (canvas.width / 2)) - (newWidth / 2);
|
111
|
+
|
112
|
+
setTimeout("RGraph.zoom_image.style.width = '" + String(newWidth) + "px'; RGraph.zoom_image.style.left = '" + newLeft + "px'", i * delay);
|
113
|
+
}
|
114
|
+
|
115
|
+
// Left
|
116
|
+
} else if (obj.Get('chart.zoom.hdir') == 'left') {
|
117
|
+
for (var i=1; i<=frames; ++i) {
|
118
|
+
var newWidth = width * factor * (i/frames) + width;
|
119
|
+
var rightHandEdge = x + canvas.width;
|
120
|
+
var newLeft = rightHandEdge - newWidth;
|
121
|
+
|
122
|
+
setTimeout("RGraph.zoom_image.style.width = '" + String(newWidth) + "px'; RGraph.zoom_image.style.left = '" + newLeft + "px'", i * delay);
|
123
|
+
}
|
124
|
+
|
125
|
+
// Right (default)
|
126
|
+
} else {
|
127
|
+
for (var i=1; i<=frames; ++i) {
|
128
|
+
var newWidth = width * factor * (i/frames) + width;
|
129
|
+
setTimeout("RGraph.zoom_image.style.width = '" + String(newWidth) + "px'", i * delay);
|
130
|
+
}
|
131
|
+
}
|
132
|
+
|
133
|
+
// Increase the height over 10 frames - up
|
134
|
+
if (obj.Get('chart.zoom.vdir') == 'up') {
|
135
|
+
for (var i=1; i<=frames; ++i) {
|
136
|
+
var newHeight = (height * factor * (i/frames)) + height;
|
137
|
+
var bottomEdge = y + canvas.height;
|
138
|
+
var newTop = bottomEdge - newHeight;
|
139
|
+
|
140
|
+
setTimeout("RGraph.zoom_image.style.height = '" + String(newHeight) + "px'; RGraph.zoom_image.style.top = '" + newTop + "px'", i * delay);
|
141
|
+
}
|
142
|
+
|
143
|
+
// center
|
144
|
+
} else if (obj.Get('chart.zoom.vdir') == 'center') {
|
145
|
+
for (var i=1; i<=frames; ++i) {
|
146
|
+
var newHeight = (height * factor * (i/frames)) + height;
|
147
|
+
var bottomEdge = (y + (canvas.height / 2)) + (newHeight / 2);
|
148
|
+
var newTop = bottomEdge - newHeight;
|
149
|
+
|
150
|
+
setTimeout("RGraph.zoom_image.style.height = '" + String(newHeight) + "px'; RGraph.zoom_image.style.top = '" + newTop + "px'", i * delay);
|
151
|
+
}
|
152
|
+
|
153
|
+
// Down (default
|
154
|
+
} else {
|
155
|
+
for (var i=1; i<=frames; ++i) {
|
156
|
+
setTimeout("RGraph.zoom_image.style.height = '" + String(height * factor * (i/frames) + height) + "px'", i * delay);
|
157
|
+
}
|
158
|
+
}
|
159
|
+
|
160
|
+
// If enabled, increase the opactity over the requested number of frames
|
161
|
+
if (obj.Get('chart.zoom.fade.in')) {
|
162
|
+
for (var i=1; i<=frames; ++i) {
|
163
|
+
setTimeout("RGraph.zoom_image.style.opacity = " + Number(i / frames), i * (delay / 2));
|
164
|
+
}
|
165
|
+
}
|
166
|
+
|
167
|
+
// If stipulated, produce a shadow
|
168
|
+
if (obj.Get('chart.zoom.shadow')) {
|
169
|
+
for (var i=1; i<=frames; ++i) {
|
170
|
+
setTimeout("RGraph.zoom_image.style.boxShadow = 'rgba(128,128,128," + Number(i / frames) / 2 + ") 0 0 25px'", i * delay);
|
171
|
+
setTimeout("RGraph.zoom_image.style.MozBoxShadow = 'rgba(128,128,128," + Number(i / frames) / 2 + ") 0 0 25px'", i * delay);
|
172
|
+
setTimeout("RGraph.zoom_image.style.WebkitBoxShadow = 'rgba(128,128,128," + Number(i / frames) / 2 + ") 0 0 25px'", i * delay);
|
173
|
+
}
|
174
|
+
}
|
175
|
+
|
176
|
+
|
177
|
+
|
178
|
+
/**
|
179
|
+
* Create the background. As of March 2013 this is always done
|
180
|
+
*/
|
181
|
+
var div = document.createElement('DIV');
|
182
|
+
div.style.backgroundColor = 'white';
|
183
|
+
div.style.opacity = 0;
|
184
|
+
div.style.position = 'fixed';
|
185
|
+
div.style.top = 0;
|
186
|
+
div.style.left = 0;
|
187
|
+
div.style.width = (screen.width + 100) + 'px';
|
188
|
+
div.style.height = (screen.height + 100) + 'px';
|
189
|
+
div.style.zIndex = 98;
|
190
|
+
|
191
|
+
// Hides the zoomed caboodle
|
192
|
+
div.onclick =
|
193
|
+
div.oncontextmenu = function (e)
|
194
|
+
{
|
195
|
+
return RG.hideZoomedCanvas(e);
|
196
|
+
}
|
197
|
+
|
198
|
+
div.origHeight = div.style.height;
|
199
|
+
|
200
|
+
document.body.appendChild(div);
|
201
|
+
|
202
|
+
RG.zoom_background = div;
|
203
|
+
|
204
|
+
// If the window is resized, hide the zoom
|
205
|
+
//window.onresize = RGraph.HideZoomedCanvas;
|
206
|
+
|
207
|
+
for (var i=1; i<=frames; ++i) {
|
208
|
+
setTimeout("RGraph.zoom_background.style.opacity = " + (Number(i / frames) * 0.8), i * (delay / 2));
|
209
|
+
}
|
210
|
+
|
211
|
+
/**
|
212
|
+
* Fire the onzoom event
|
213
|
+
*/
|
214
|
+
RG.fireCustomEvent(obj, 'onzoom');
|
215
|
+
}
|
216
|
+
|
217
|
+
|
218
|
+
|
219
|
+
// End module pattern
|
220
|
+
})(window, document);
|
@@ -1,36 +1,571 @@
|
|
1
|
+
// version: 2017-01-02
|
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
|
+
/**
|
14
|
+
* Having this here means that the RGraph libraries can be included in any order, instead of you having
|
15
|
+
* to include the common core library first.
|
16
|
+
*/
|
1
17
|
|
2
|
-
RGraph
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
18
|
+
// Define the RGraph global variable
|
19
|
+
RGraph = window.RGraph || {isRGraph: true};
|
20
|
+
RGraph.Drawing = RGraph.Drawing || {};
|
21
|
+
|
22
|
+
/**
|
23
|
+
* The constructor. This function sets up the object. It only takes the ID (the HTML attribute) of the canvas as the
|
24
|
+
* first argument - the gutters are set as properties.
|
25
|
+
*
|
26
|
+
* @param string id The canvas tag ID
|
27
|
+
*/
|
28
|
+
RGraph.Drawing.Background = function (conf)
|
29
|
+
{
|
30
|
+
/**
|
31
|
+
* Allow for object config style
|
32
|
+
*/
|
33
|
+
if ( typeof conf === 'object'
|
34
|
+
&& typeof conf.id === 'string') {
|
35
|
+
|
36
|
+
var id = conf.id,
|
37
|
+
canvas = document.getElementById(id),
|
38
|
+
parseConfObjectForOptions = true; // Set this so the config is parsed (at the end of the constructor)
|
39
|
+
|
40
|
+
} else {
|
41
|
+
|
42
|
+
var id = conf,
|
43
|
+
canvas = document.getElementById(id);
|
44
|
+
}
|
45
|
+
|
46
|
+
|
47
|
+
|
48
|
+
|
49
|
+
this.id = id;
|
50
|
+
this.canvas = document.getElementById(this.id);
|
51
|
+
this.context = this.canvas.getContext('2d');
|
52
|
+
this.canvas.__object__ = this;
|
53
|
+
this.original_colors = [];
|
54
|
+
this.firstDraw = true; // After the first draw this will be false
|
55
|
+
|
56
|
+
|
57
|
+
/**
|
58
|
+
* This defines the type of this shape
|
59
|
+
*/
|
60
|
+
this.type = 'drawing.background';
|
61
|
+
|
62
|
+
|
63
|
+
/**
|
64
|
+
* This facilitates easy object identification, and should always be true
|
65
|
+
*/
|
66
|
+
this.isRGraph = true;
|
67
|
+
|
68
|
+
|
69
|
+
/**
|
70
|
+
* This adds a uid to the object that you can use for identification purposes
|
71
|
+
*/
|
72
|
+
this.uid = RGraph.CreateUID();
|
73
|
+
|
74
|
+
|
75
|
+
/**
|
76
|
+
* This adds a UID to the canvas for identification purposes
|
77
|
+
*/
|
78
|
+
this.canvas.uid = this.canvas.uid ? this.canvas.uid : RGraph.createUID();
|
79
|
+
|
80
|
+
|
81
|
+
|
82
|
+
|
83
|
+
/**
|
84
|
+
* Some example background properties
|
85
|
+
*/
|
86
|
+
this.properties =
|
87
|
+
{
|
88
|
+
'chart.background.barcolor1': 'rgba(0,0,0,0)',
|
89
|
+
'chart.background.barcolor2': 'rgba(0,0,0,0)',
|
90
|
+
'chart.background.grid': true,
|
91
|
+
'chart.background.grid.color': '#ddd',
|
92
|
+
'chart.background.grid.width': 1,
|
93
|
+
'chart.background.grid.vlines': true,
|
94
|
+
'chart.background.grid.hlines': true,
|
95
|
+
'chart.background.grid.border': true,
|
96
|
+
'chart.background.grid.autofit':true,
|
97
|
+
'chart.background.grid.autofit.numhlines': 5,
|
98
|
+
'chart.background.grid.autofit.numvlines': 20,
|
99
|
+
'chart.background.grid.dashed': false,
|
100
|
+
'chart.background.grid.dotted': false,
|
101
|
+
|
102
|
+
'chart.background.image': null,
|
103
|
+
'chart.background.image.stretch': true,
|
104
|
+
'chart.background.image.x': null,
|
105
|
+
'chart.background.image.y': null,
|
106
|
+
'chart.background.image.w': null,
|
107
|
+
'chart.background.image.h': null,
|
108
|
+
'chart.background.image.align': null,
|
109
|
+
'chart.background.color': null,
|
110
|
+
|
111
|
+
'chart.gutter.left': 25,
|
112
|
+
'chart.gutter.right': 25,
|
113
|
+
'chart.gutter.top': 25,
|
114
|
+
'chart.gutter.bottom': 25,
|
115
|
+
|
116
|
+
'chart.text.color': 'black', // Gradients aren't supported for this color
|
117
|
+
'chart.text.size': 12,
|
118
|
+
'chart.text.font': 'Segoe UI, Arial, Verdana, sans-serif',
|
119
|
+
'chart.text.accessible': true,
|
120
|
+
'chart.text.accessible.overflow': 'visible',
|
121
|
+
'chart.text.accessible.pointerevents': true,
|
122
|
+
'chart.events.click': null,
|
123
|
+
'chart.events.mousemove': null,
|
124
|
+
|
125
|
+
'chart.tooltips': null,
|
126
|
+
'chart.tooltips.highlight': true,
|
127
|
+
'chart.tooltips.event': 'onclick',
|
128
|
+
|
129
|
+
'chart.highlight.stroke': 'rgba(0,0,0,0)',
|
130
|
+
'chart.highlight.fill': 'rgba(255,255,255,0.7)',
|
131
|
+
|
132
|
+
'chart.linewidth': 1,
|
133
|
+
|
134
|
+
'chart.title': '',
|
135
|
+
'chart.title.size': null,
|
136
|
+
'chart.title.font': null,
|
137
|
+
'chart.title.background': null, // Gradients aren't supported for this color
|
138
|
+
'chart.title.hpos': null,
|
139
|
+
'chart.title.vpos': null,
|
140
|
+
'chart.title.bold': true,
|
141
|
+
'chart.title.color': 'black',
|
142
|
+
'chart.title.x': null,
|
143
|
+
'chart.title.y': null,
|
144
|
+
'chart.title.halign': null,
|
145
|
+
'chart.title.valign': null,
|
146
|
+
|
147
|
+
'chart.title.xaxis': '',
|
148
|
+
'chart.title.xaxis.bold': true,
|
149
|
+
'chart.title.xaxis.size': null,
|
150
|
+
'chart.title.xaxis.font': null,
|
151
|
+
'chart.title.xaxis.x': null,
|
152
|
+
'chart.title.xaxis.y': null,
|
153
|
+
'chart.title.xaxis.pos': null,
|
154
|
+
|
155
|
+
'chart.title.yaxis': '',
|
156
|
+
'chart.title.yaxis.bold': true,
|
157
|
+
'chart.title.yaxis.size': null,
|
158
|
+
'chart.title.yaxis.font': null,
|
159
|
+
'chart.title.yaxis.color': 'black', // Gradients aren't supported for this color
|
160
|
+
'chart.title.yaxis.x': null,
|
161
|
+
'chart.title.yaxis.y': null,
|
162
|
+
'chart.title.yaxis.pos': null,
|
163
|
+
'chart.clearto': 'rgba(0,0,0,0)'
|
164
|
+
}
|
165
|
+
|
166
|
+
/**
|
167
|
+
* A simple check that the browser has canvas support
|
168
|
+
*/
|
169
|
+
if (!this.canvas) {
|
170
|
+
alert('[DRAWING.BACKGROUND] No canvas support');
|
171
|
+
return;
|
172
|
+
}
|
173
|
+
|
174
|
+
|
175
|
+
|
176
|
+
/**
|
177
|
+
* Create the dollar object so that functions can be added to them
|
178
|
+
*/
|
179
|
+
this.$0 = {};
|
180
|
+
|
181
|
+
|
182
|
+
|
183
|
+
/**
|
184
|
+
* Translate half a pixel for antialiasing purposes - but only if it hasn't beeen
|
185
|
+
* done already
|
186
|
+
*/
|
187
|
+
if (!this.canvas.__rgraph_aa_translated__) {
|
188
|
+
this.context.translate(0.5,0.5);
|
189
|
+
this.canvas.__rgraph_aa_translated__ = true;
|
190
|
+
}
|
191
|
+
|
192
|
+
|
193
|
+
|
194
|
+
|
195
|
+
// Short variable names
|
196
|
+
var RG = RGraph,
|
197
|
+
ca = this.canvas,
|
198
|
+
co = ca.getContext('2d'),
|
199
|
+
prop = this.properties,
|
200
|
+
pa = RG.Path,
|
201
|
+
pa2 = RG.path2,
|
202
|
+
win = window,
|
203
|
+
doc = document,
|
204
|
+
ma = Math
|
205
|
+
|
206
|
+
|
207
|
+
|
208
|
+
/**
|
209
|
+
* "Decorate" the object with the generic effects if the effects library has been included
|
210
|
+
*/
|
211
|
+
if (RG.Effects && typeof RG.Effects.decorate === 'function') {
|
212
|
+
RG.Effects.decorate(this);
|
213
|
+
}
|
214
|
+
|
215
|
+
|
216
|
+
|
217
|
+
|
218
|
+
/**
|
219
|
+
* A setter method for setting graph properties. It can be used like this: obj.Set('chart.strokestyle', '#666');
|
220
|
+
*
|
221
|
+
* @param name string The name of the property to set OR it can be a map
|
222
|
+
* of name/value settings like what you set in the constructor
|
223
|
+
*/
|
224
|
+
this.set =
|
225
|
+
this.Set = function (name)
|
226
|
+
{
|
227
|
+
var value = typeof arguments[1] === 'undefined' ? null : arguments[1];
|
228
|
+
|
229
|
+
/**
|
230
|
+
* the number of arguments is only one and it's an
|
231
|
+
* object - parse it for configuration data and return.
|
232
|
+
*/
|
233
|
+
if (arguments.length === 1 && typeof name === 'object') {
|
234
|
+
RG.parseObjectStyleConfig(this, name);
|
235
|
+
return this;
|
236
|
+
}
|
237
|
+
|
238
|
+
|
239
|
+
|
240
|
+
|
241
|
+
|
242
|
+
/**
|
243
|
+
* This should be done first - prepend the property name with "chart." if necessary
|
244
|
+
*/
|
245
|
+
if (name.substr(0,6) != 'chart.') {
|
246
|
+
name = 'chart.' + name;
|
247
|
+
}
|
248
|
+
|
249
|
+
|
250
|
+
|
251
|
+
// Convert uppercase letters to dot+lower case letter
|
252
|
+
while(name.match(/([A-Z])/)) {
|
253
|
+
name = name.replace(/([A-Z])/, '.' + RegExp.$1.toLowerCase());
|
254
|
+
}
|
255
|
+
|
256
|
+
|
257
|
+
prop[name] = value;
|
258
|
+
|
259
|
+
return this;
|
260
|
+
};
|
261
|
+
|
262
|
+
|
263
|
+
|
264
|
+
|
265
|
+
/**
|
266
|
+
* A getter method for retrieving graph properties. It can be used like this: obj.Get('chart.strokestyle');
|
267
|
+
*
|
268
|
+
* @param name string The name of the property to get
|
269
|
+
*/
|
270
|
+
this.get =
|
271
|
+
this.Get = function (name)
|
272
|
+
{
|
273
|
+
/**
|
274
|
+
* This should be done first - prepend the property name with "chart." if necessary
|
275
|
+
*/
|
276
|
+
if (name.substr(0,6) != 'chart.') {
|
277
|
+
name = 'chart.' + name;
|
278
|
+
}
|
279
|
+
|
280
|
+
// Convert uppercase letters to dot+lower case letter
|
281
|
+
while(name.match(/([A-Z])/)) {
|
282
|
+
name = name.replace(/([A-Z])/, '.' + RegExp.$1.toLowerCase());
|
283
|
+
}
|
284
|
+
|
285
|
+
return prop[name.toLowerCase()];
|
286
|
+
};
|
287
|
+
|
288
|
+
|
289
|
+
|
290
|
+
|
291
|
+
/**
|
292
|
+
* Draws the circle
|
293
|
+
*/
|
294
|
+
this.draw =
|
295
|
+
this.Draw = function ()
|
296
|
+
{
|
297
|
+
/**
|
298
|
+
* Fire the onbeforedraw event
|
299
|
+
*/
|
300
|
+
RG.fireCustomEvent(this, 'onbeforedraw');
|
301
|
+
|
302
|
+
|
303
|
+
/***********************
|
304
|
+
* DRAW BACKGROUND HERE *
|
305
|
+
***********************/
|
306
|
+
this.gutterLeft = prop['chart.gutter.left'];
|
307
|
+
this.gutterRight = prop['chart.gutter.right'];
|
308
|
+
this.gutterTop = prop['chart.gutter.top'];
|
309
|
+
this.gutterBottom = prop['chart.gutter.bottom'];
|
310
|
+
|
311
|
+
|
312
|
+
/**
|
313
|
+
* Parse the colors. This allows for simple gradient syntax
|
314
|
+
*/
|
315
|
+
if (!this.colorsParsed) {
|
316
|
+
|
317
|
+
this.parseColors();
|
318
|
+
|
319
|
+
// Don't want to do this again
|
320
|
+
this.colorsParsed = true;
|
321
|
+
}
|
322
|
+
|
323
|
+
/**
|
324
|
+
* Set the shadow
|
325
|
+
*/
|
326
|
+
RG.drawBackgroundImage(this);
|
327
|
+
RG.Background.draw(this);
|
328
|
+
|
329
|
+
/**
|
330
|
+
* This installs the event listeners
|
331
|
+
*/
|
332
|
+
RG.installEventListeners(this);
|
333
|
+
|
334
|
+
|
335
|
+
/**
|
336
|
+
* Fire the onfirstdraw event
|
337
|
+
*/
|
338
|
+
if (this.firstDraw) {
|
339
|
+
RG.fireCustomEvent(this, 'onfirstdraw');
|
340
|
+
this.firstDraw = false;
|
341
|
+
this.firstDrawFunc();
|
342
|
+
}
|
343
|
+
|
344
|
+
|
345
|
+
|
346
|
+
/**
|
347
|
+
* Fire the ondraw event
|
348
|
+
*/
|
349
|
+
RG.fireCustomEvent(this, 'ondraw');
|
350
|
+
|
351
|
+
return this;
|
352
|
+
};
|
353
|
+
|
354
|
+
|
355
|
+
|
356
|
+
|
357
|
+
/**
|
358
|
+
* Used in chaining. Runs a function there and then - not waiting for
|
359
|
+
* the events to fire (eg the onbeforedraw event)
|
360
|
+
*
|
361
|
+
* @param function func The function to execute
|
362
|
+
*/
|
363
|
+
this.exec = function (func)
|
364
|
+
{
|
365
|
+
func(this);
|
366
|
+
|
367
|
+
return this;
|
368
|
+
};
|
369
|
+
|
370
|
+
|
371
|
+
|
372
|
+
|
373
|
+
/**
|
374
|
+
* The getObjectByXY() worker method
|
375
|
+
*/
|
376
|
+
this.getObjectByXY = function (e)
|
377
|
+
{
|
378
|
+
if (this.getShape(e)) {
|
379
|
+
return this;
|
380
|
+
}
|
381
|
+
};
|
382
|
+
|
383
|
+
|
384
|
+
|
385
|
+
|
386
|
+
/**
|
387
|
+
* Not used by the class during creating the shape, but is used by event handlers
|
388
|
+
* to get the coordinates (if any) of the selected bar
|
389
|
+
*
|
390
|
+
* @param object e The event object
|
391
|
+
* @param object OPTIONAL You can pass in the bar object instead of the
|
392
|
+
* function using "this"
|
393
|
+
*/
|
394
|
+
this.getShape = function (e)
|
395
|
+
{
|
396
|
+
var mouseXY = RG.getMouseXY(e),
|
397
|
+
mouseX = mouseXY[0],
|
398
|
+
mouseY = mouseXY[1];
|
399
|
+
|
400
|
+
if (
|
401
|
+
mouseX >= this.gutterLeft
|
402
|
+
&& mouseX <= (ca.width - this.gutterRight)
|
403
|
+
&& mouseY >= this.gutterTop
|
404
|
+
&& mouseY <= (ca.height - this.gutterBottom)
|
405
|
+
) {
|
406
|
+
|
407
|
+
var tooltip = prop['chart.tooltips'] ? prop['chart.tooltips'][0] : null
|
408
|
+
|
409
|
+
return {
|
410
|
+
0: this, 1: 0 /* the index */, 2: tooltip,
|
411
|
+
'object': this,'index': 0, 'tooltip': tooltip
|
412
|
+
};
|
413
|
+
}
|
414
|
+
|
415
|
+
return null;
|
416
|
+
};
|
417
|
+
|
418
|
+
|
419
|
+
|
420
|
+
|
421
|
+
/**
|
422
|
+
* Each object type has its own Highlight() function which highlights the appropriate shape
|
423
|
+
*
|
424
|
+
* @param object shape The shape to highlight
|
425
|
+
*/
|
426
|
+
this.highlight =
|
427
|
+
this.Highlight = function (shape)
|
428
|
+
{
|
429
|
+
if (prop['chart.tooltips.highlight']) {
|
430
|
+
if (typeof prop['chart.highlight.style'] === 'function') {
|
431
|
+
(prop['chart.highlight.style'])(shape);
|
432
|
+
} else {
|
433
|
+
pa2(co,
|
434
|
+
'b r % % % % f % s %',
|
435
|
+
prop['chart.gutter.left'],
|
436
|
+
prop['chart.gutter.top'],
|
437
|
+
ca.width - prop['chart.gutter.left'] - prop['chart.gutter.right'],
|
438
|
+
ca.height - prop['chart.gutter.top'] - prop['chart.gutter.bottom'],
|
439
|
+
prop['chart.highlight.fill'],
|
440
|
+
prop['chart.highlight.stroke']
|
441
|
+
);
|
442
|
+
}
|
443
|
+
}
|
444
|
+
};
|
445
|
+
|
446
|
+
|
447
|
+
|
448
|
+
|
449
|
+
/**
|
450
|
+
* This allows for easy specification of gradients
|
451
|
+
*/
|
452
|
+
this.parseColors = function ()
|
453
|
+
{
|
454
|
+
// Save the original colors so that they can be restored when the canvas is reset
|
455
|
+
if (this.original_colors.length === 0) {
|
456
|
+
this.original_colors['chart.strokestyle'] = RG.arrayClone(prop['chart.strokestyle']);
|
457
|
+
this.original_colors['chart.highlight.stroke'] = RG.arrayClone(prop['chart.highlight.stroke']);
|
458
|
+
this.original_colors['chart.highlight.fill'] = RG.arrayClone(prop['chart.highlight.fill']);
|
459
|
+
}
|
460
|
+
|
461
|
+
|
462
|
+
|
463
|
+
|
464
|
+
|
465
|
+
/**
|
466
|
+
* Parse various properties for colors
|
467
|
+
*/
|
468
|
+
prop['chart.strokestyle'] = this.parseSingleColorForGradient(prop['chart.strokestyle']);
|
469
|
+
prop['chart.highlight.stroke'] = this.parseSingleColorForGradient(prop['chart.highlight.stroke']);
|
470
|
+
prop['chart.highlight.fill'] = this.parseSingleColorForGradient(prop['chart.highlight.fill']);
|
471
|
+
};
|
472
|
+
|
473
|
+
|
474
|
+
|
475
|
+
|
476
|
+
/**
|
477
|
+
* Use this function to reset the object to the post-constructor state. Eg reset colors if
|
478
|
+
* need be etc
|
479
|
+
*/
|
480
|
+
this.reset = function ()
|
481
|
+
{
|
482
|
+
};
|
483
|
+
|
484
|
+
|
485
|
+
|
486
|
+
|
487
|
+
/**
|
488
|
+
* This parses a single color value
|
489
|
+
*/
|
490
|
+
this.parseSingleColorForGradient = function (color)
|
491
|
+
{
|
492
|
+
if (!color) {
|
493
|
+
return color;
|
494
|
+
}
|
495
|
+
|
496
|
+
if (typeof color === 'string' && color.match(/^gradient\((.*)\)$/i)) {
|
497
|
+
|
498
|
+
// Split and create the gradient
|
499
|
+
var parts = RegExp.$1.split(':'),
|
500
|
+
grad = co.createLinearGradient(
|
501
|
+
this.gutterLeft,
|
502
|
+
this.gutterTop,
|
503
|
+
ca.width - this.gutterRight,
|
504
|
+
ca.height - this.gutterRight
|
505
|
+
),
|
506
|
+
diff = 1 / (parts.length - 1);
|
507
|
+
|
508
|
+
//grad.addColorStop(0, RG.trim(parts[0]));
|
509
|
+
|
510
|
+
for (var j=0; j<parts.length; j+=1) {
|
511
|
+
grad.addColorStop(j * diff, RG.trim(parts[j]));
|
512
|
+
}
|
513
|
+
}
|
514
|
+
|
515
|
+
return grad ? grad : color;
|
516
|
+
};
|
517
|
+
|
518
|
+
|
519
|
+
|
520
|
+
|
521
|
+
/**
|
522
|
+
* Using a function to add events makes it easier to facilitate method chaining
|
523
|
+
*
|
524
|
+
* @param string type The type of even to add
|
525
|
+
* @param function func
|
526
|
+
*/
|
527
|
+
this.on = function (type, func)
|
528
|
+
{
|
529
|
+
if (type.substr(0,2) !== 'on') {
|
530
|
+
type = 'on' + type;
|
531
|
+
}
|
532
|
+
|
533
|
+
if (typeof this[type] !== 'function') {
|
534
|
+
this[type] = func;
|
535
|
+
} else {
|
536
|
+
RG.addCustomEventListener(this, type, func);
|
537
|
+
}
|
538
|
+
|
539
|
+
return this;
|
540
|
+
};
|
541
|
+
|
542
|
+
|
543
|
+
|
544
|
+
|
545
|
+
/**
|
546
|
+
* This function runs once only
|
547
|
+
* (put at the end of the file (before any effects))
|
548
|
+
*/
|
549
|
+
this.firstDrawFunc = function ()
|
550
|
+
{
|
551
|
+
};
|
552
|
+
|
553
|
+
|
554
|
+
|
555
|
+
|
556
|
+
/**
|
557
|
+
* Objects are now always registered so that the chart is redrawn if need be.
|
558
|
+
*/
|
559
|
+
RG.register(this);
|
560
|
+
|
561
|
+
|
562
|
+
|
563
|
+
|
564
|
+
/**
|
565
|
+
* This is the 'end' of the constructor so if the first argument
|
566
|
+
* contains configuration data - handle that.
|
567
|
+
*/
|
568
|
+
if (parseConfObjectForOptions) {
|
569
|
+
RG.parseObjectStyleConfig(this, conf.options);
|
570
|
+
}
|
571
|
+
};
|