aboutsummaryrefslogtreecommitdiffstatshomepage
path: root/js
diff options
context:
space:
mode:
Diffstat (limited to 'js')
-rw-r--r--js/RrdGfxCanvas.js21
-rw-r--r--js/RrdGfxPdf.js37
-rw-r--r--js/RrdGfxSvg.js25
-rw-r--r--js/RrdGraph.js58
4 files changed, 127 insertions, 14 deletions
diff --git a/js/RrdGfxCanvas.js b/js/RrdGfxCanvas.js
index 324b655..6ba71bb 100644
--- a/js/RrdGfxCanvas.js
+++ b/js/RrdGfxCanvas.js
@@ -28,6 +28,9 @@ var RrdGfxCanvas = function(canvasId)
28{ 28{
29 this.canvas = document.getElementById(canvasId); 29 this.canvas = document.getElementById(canvasId);
30 this.ctx = this.canvas.getContext('2d'); 30 this.ctx = this.canvas.getContext('2d');
31 this.dash = false;
32 this.dash_offset = null;
33 this.dash_array = null;
31}; 34};
32 35
33RrdGfxCanvas.prototype.size = function (width, height) 36RrdGfxCanvas.prototype.size = function (width, height)
@@ -38,7 +41,22 @@ RrdGfxCanvas.prototype.size = function (width, height)
38 41
39RrdGfxCanvas.prototype.set_dash = function (dashes, n, offset) 42RrdGfxCanvas.prototype.set_dash = function (dashes, n, offset)
40{ 43{
44 this.dash = true;
45 this.dash_array = dashes;
46 this.dash_offset = offset;
47};
41 48
49RrdGfxCanvas.prototype._set_dash = function ()
50{
51 if (this.dash_array != undefined && this.dash_array.length > 0) {
52 this.ctx.setLineDash(this.dash_array);
53 if (this.dash_offset > 0) {
54 this.ctx.lineDashOffset = this.dash_offset;
55 }
56 }
57 this.dash = false;
58 this.dash_array = null;
59 this.dash_offset = 0;
42}; 60};
43 61
44RrdGfxCanvas.prototype.line = function (X0, Y0, X1, Y1, width, color) 62RrdGfxCanvas.prototype.line = function (X0, Y0, X1, Y1, width, color)
@@ -58,6 +76,7 @@ RrdGfxCanvas.prototype.line = function (X0, Y0, X1, Y1, width, color)
58 this.ctx.save(); 76 this.ctx.save();
59 this.ctx.lineWidth = width; 77 this.ctx.lineWidth = width;
60 this.ctx.strokeStyle = color; 78 this.ctx.strokeStyle = color;
79 if (this.dash) this._set_dash();
61 this.ctx.beginPath(); 80 this.ctx.beginPath();
62 this.ctx.moveTo(X0, Y0); 81 this.ctx.moveTo(X0, Y0);
63 this.ctx.lineTo(X1, Y1); 82 this.ctx.lineTo(X1, Y1);
@@ -136,6 +155,7 @@ RrdGfxCanvas.prototype.rectangle = function (X0, Y0, X1, Y1, width, style)
136 155
137 this.ctx.save(); 156 this.ctx.save();
138 this.ctx.beginPath(); 157 this.ctx.beginPath();
158 if (this.dash) this._set_dash();
139 this.ctx.lineWidth = width; 159 this.ctx.lineWidth = width;
140 this.ctx.moveTo(X0, Y0); 160 this.ctx.moveTo(X0, Y0);
141 this.ctx.lineTo(X1, Y0); 161 this.ctx.lineTo(X1, Y0);
@@ -179,6 +199,7 @@ RrdGfxCanvas.prototype.stroke_begin = function (width, style)
179{ 199{
180 this.ctx.save(); 200 this.ctx.save();
181 this.ctx.beginPath(); 201 this.ctx.beginPath();
202 if (this.dash) this._set_dash();
182 this.ctx.lineWidth = width; 203 this.ctx.lineWidth = width;
183 this.ctx.strokeStyle = style; 204 this.ctx.strokeStyle = style;
184 this.ctx.lineCap = 'round'; 205 this.ctx.lineCap = 'round';
diff --git a/js/RrdGfxPdf.js b/js/RrdGfxPdf.js
index cbc552f..7cde098 100644
--- a/js/RrdGfxPdf.js
+++ b/js/RrdGfxPdf.js
@@ -81,7 +81,7 @@ var RrdGfxPdf = function (orientation, unit, size)
81 this.CoreFonts = ['courier', 'helvetica', 'times', 'symbol', 'zapfdingbats']; 81 this.CoreFonts = ['courier', 'helvetica', 'times', 'symbol', 'zapfdingbats'];
82 // Scale factor (number of points in user unit) 82 // Scale factor (number of points in user unit)
83 if(unit === 'pt') 83 if(unit === 'pt')
84 this.k = 1; 84 this.k = 1;
85 else if(unit === 'mm') 85 else if(unit === 'mm')
86 this.k = 72/25.4; 86 this.k = 72/25.4;
87 else if(unit === 'cm') 87 else if(unit === 'cm')
@@ -129,6 +129,10 @@ var RrdGfxPdf = function (orientation, unit, size)
129 this.SetDisplayMode('default'); 129 this.SetDisplayMode('default');
130 // Set default PDF version number 130 // Set default PDF version number
131 this.PDFVersion = '1.3'; 131 this.PDFVersion = '1.3';
132
133 this.dash = false;
134 this.dash_array = null;
135 this.dash_offset = null;
132}; 136};
133 137
134RrdGfxPdf.CORE_FONTS= { 138RrdGfxPdf.CORE_FONTS= {
@@ -182,6 +186,31 @@ RrdGfxPdf.prototype.size = function (width, height)
182 186
183RrdGfxPdf.prototype.set_dash = function (dashes, n, offset) 187RrdGfxPdf.prototype.set_dash = function (dashes, n, offset)
184{ 188{
189 this.dash = true;
190 this.dash_array = dashes;
191 this.dash_offset = offset;
192};
193
194RrdGfxPdf.prototype._set_dash = function ()
195{
196 this.dash = true;
197
198 if (this.dash_array != undefined && this.dash_array.length > 0) {
199 for (var n=0; n < this.dash_array.length; n++) {
200 this.dash_array[n] = this.dash_array[n] * this.k;
201 }
202 this.dash_array = this.dash_array.join(' ');
203
204 if (this.dash_offset == 0) {
205 this._out('['+this.dash_array+'] 0 d');
206 } else {
207 this.dash_offset = this.dash_offset * this.k;
208 this._out('['+this.dash_array+'] '+this.dash_offset+' d');
209 }
210 }
211 this.dash = false;
212 this.dash_array = null;
213 this.dash_offset = 0;
185}; 214};
186 215
187RrdGfxPdf.prototype.line = function (X0, Y0, X1, Y1, width, color) 216RrdGfxPdf.prototype.line = function (X0, Y0, X1, Y1, width, color)
@@ -190,6 +219,8 @@ RrdGfxPdf.prototype.line = function (X0, Y0, X1, Y1, width, color)
190 this._setLineWidth(width); 219 this._setLineWidth(width);
191 var rgba = this.parse_color(color); 220 var rgba = this.parse_color(color);
192 this._setDrawColor(rgba[0], rgba[1], rgba[2]); 221 this._setDrawColor(rgba[0], rgba[1], rgba[2]);
222 if (this.dash)
223 this._set_dash();
193 this._moveTo(X0, Y0); 224 this._moveTo(X0, Y0);
194 this._lineTo(X1, Y1); 225 this._lineTo(X1, Y1);
195 this._stroke(); 226 this._stroke();
@@ -215,6 +246,8 @@ RrdGfxPdf.prototype.rectangle = function (X0, Y0, X1, Y1, width, style)
215 this._setLineWidth(width); 246 this._setLineWidth(width);
216 var rgba = this.parse_color(style); 247 var rgba = this.parse_color(style);
217 this._setDrawColor(rgba[0], rgba[1], rgba[2]); 248 this._setDrawColor(rgba[0], rgba[1], rgba[2]);
249 if (this.dash)
250 this._set_dash();
218 this._moveTo(X0, Y0); 251 this._moveTo(X0, Y0);
219 this._lineTo(X1, Y0); 252 this._lineTo(X1, Y0);
220 this._lineTo(X1, Y1); 253 this._lineTo(X1, Y1);
@@ -250,6 +283,8 @@ RrdGfxPdf.prototype.stroke_begin = function (width, style)
250 this._setLineWidth(width); 283 this._setLineWidth(width);
251 var rgba = this.parse_color(style); 284 var rgba = this.parse_color(style);
252 this._setDrawColor(rgba[0], rgba[1], rgba[2]); 285 this._setDrawColor(rgba[0], rgba[1], rgba[2]);
286 if (this.dash)
287 this._set_dash();
253 this._out('0 J'); // line cap 288 this._out('0 J'); // line cap
254 this._out('0 j'); // line join 289 this._out('0 j'); // line join
255}; 290};
diff --git a/js/RrdGfxSvg.js b/js/RrdGfxSvg.js
index ffc0071..927cb14 100644
--- a/js/RrdGfxSvg.js
+++ b/js/RrdGfxSvg.js
@@ -31,6 +31,9 @@ var RrdGfxSvg = function(svgId) {
31 this.path = null; 31 this.path = null;
32 this.path_color = null; 32 this.path_color = null;
33 this.path_width = null; 33 this.path_width = null;
34 this.dash = false;
35 this.dash_offset = null;
36 this.dash_array = null;
34}; 37};
35 38
36RrdGfxSvg.prototype.size = function (width, height) 39RrdGfxSvg.prototype.size = function (width, height)
@@ -45,8 +48,24 @@ RrdGfxSvg.prototype.size = function (width, height)
45 48
46RrdGfxSvg.prototype.set_dash = function (dashes, n, offset) 49RrdGfxSvg.prototype.set_dash = function (dashes, n, offset)
47{ 50{
51 this.dash = true;
52 this.dash_array = dashes;
53 this.dash_offset = offset;
48}; 54};
49 55
56RrdGfxSvg.prototype._set_dash = function (shape)
57{
58 if (this.dash_array != undefined && this.dash_array.length > 0) {
59 shape.setAttributeNS(null, "stroke-dasharray", this.dash_array.join(','));
60 if (this.dash_offset > 0) {
61 shape.setAttributeNS(null, "stroke-dashoffset", this.dash_offset);
62 }
63 }
64 this.dash = false;
65 this.dash_array = null;
66 this.dash_offset = 0;
67}
68
50RrdGfxSvg.prototype.line = function (X0, Y0, X1, Y1, width, color) 69RrdGfxSvg.prototype.line = function (X0, Y0, X1, Y1, width, color)
51{ 70{
52 var shape = document.createElementNS(this.svgns, "line"); 71 var shape = document.createElementNS(this.svgns, "line");
@@ -62,6 +81,8 @@ RrdGfxSvg.prototype.line = function (X0, Y0, X1, Y1, width, color)
62 shape.setAttributeNS(null, "y2", Y1); 81 shape.setAttributeNS(null, "y2", Y1);
63 shape.setAttributeNS(null, "stroke-width", width); 82 shape.setAttributeNS(null, "stroke-width", width);
64 shape.setAttributeNS(null, "stroke", color); 83 shape.setAttributeNS(null, "stroke", color);
84 if (this.dash)
85 this._set_dash(shape);
65 86
66 this.svg.appendChild(shape); 87 this.svg.appendChild(shape);
67}; 88};
@@ -100,6 +121,8 @@ RrdGfxSvg.prototype.rectangle = function (X0, Y0, X1, Y1, width, style)
100 shape.setAttributeNS(null, "stroke-width", width); 121 shape.setAttributeNS(null, "stroke-width", width);
101 shape.setAttributeNS(null, "stroke", style); 122 shape.setAttributeNS(null, "stroke", style);
102 shape.setAttributeNS(null, "fill", "none"); 123 shape.setAttributeNS(null, "fill", "none");
124 if (this.dash)
125 this._set_dash(shape);
103 126
104 this.svg.appendChild(shape); 127 this.svg.appendChild(shape);
105}; 128};
@@ -157,6 +180,8 @@ RrdGfxSvg.prototype.stroke_end = function ()
157 shape.setAttributeNS(null, "stroke-width", this.path_width); 180 shape.setAttributeNS(null, "stroke-width", this.path_width);
158 shape.setAttributeNS(null, "stroke-linecap", 'round'); 181 shape.setAttributeNS(null, "stroke-linecap", 'round');
159 shape.setAttributeNS(null, "stroke-linejoin", 'round'); 182 shape.setAttributeNS(null, "stroke-linejoin", 'round');
183 if (this.dash)
184 this._set_dash(shape);
160 185
161 this.svg.appendChild(shape); 186 this.svg.appendChild(shape);
162}; 187};
diff --git a/js/RrdGraph.js b/js/RrdGraph.js
index c2457c9..25823aa 100644
--- a/js/RrdGraph.js
+++ b/js/RrdGraph.js
@@ -36,7 +36,7 @@ RrdGraphDescError.prototype = new Error();
36 * RrdGraphDesc 36 * RrdGraphDesc
37 * @constructor 37 * @constructor
38 */ 38 */
39var RrdGraphDesc = function (graph) 39var RrdGraphDesc = function (graph)
40{ 40{
41 this.gf = null; /* graphing function */ 41 this.gf = null; /* graphing function */
42 this.stack = false; /* boolean */ 42 this.stack = false; /* boolean */
@@ -164,7 +164,7 @@ RrdGraphDesc.TXA_RIGHT = 1;
164RrdGraphDesc.TXA_CENTER = 2; 164RrdGraphDesc.TXA_CENTER = 2;
165RrdGraphDesc.TXA_JUSTIFIED = 3; 165RrdGraphDesc.TXA_JUSTIFIED = 3;
166 166
167RrdGraphDesc.cf_conv = function (str) 167RrdGraphDesc.cf_conv = function (str)
168{ 168{
169 switch (str){ 169 switch (str){
170 case 'AVERAGE': return RrdGraphDesc.CF_AVERAGE; 170 case 'AVERAGE': return RrdGraphDesc.CF_AVERAGE;
@@ -279,7 +279,7 @@ RrdGraphDesc.prototype.fshift = function (graph, vname, offset)
279 this.legend = ''; 279 this.legend = '';
280}; 280};
281 281
282RrdGraphDesc.prototype.line = function (graph, width, value, color, legend, stack) 282RrdGraphDesc.prototype.line = function (graph, width, value, color, legend, stack, dashes, dash_offset)
283{ 283{
284 this.gf = RrdGraphDesc.GF_LINE; 284 this.gf = RrdGraphDesc.GF_LINE;
285 this.vname = value; 285 this.vname = value;
@@ -287,10 +287,20 @@ RrdGraphDesc.prototype.line = function (graph, width, value, color, legend, stac
287 this.linewidth = width; 287 this.linewidth = width;
288 this.col = color; 288 this.col = color;
289 if (legend === undefined) this.legend = ''; 289 if (legend === undefined) this.legend = '';
290 else if (legend.length === 0) this.legend = '';
290 else this.legend = ' '+legend; 291 else this.legend = ' '+legend;
291 if (stack === undefined) this.stack = false; 292 if (stack === undefined) this.stack = false;
292 else this.stack = stack; 293 else this.stack = stack;
293 this.format = this.legend; 294 this.format = this.legend;
295
296 if (dashes != undefined) {
297 this.dash = true;
298 this.p_dashes = dashes;
299 this.ndash = dashes.length;
300 }
301 if (dash_offset !=undefined) {
302 this.offset = dash_offset;
303 }
294}; 304};
295 305
296RrdGraphDesc.prototype.area = function (graph, value, color, legend, stack) 306RrdGraphDesc.prototype.area = function (graph, value, color, legend, stack)
@@ -300,6 +310,7 @@ RrdGraphDesc.prototype.area = function (graph, value, color, legend, stack)
300 this.vidx = graph.find_var(value); 310 this.vidx = graph.find_var(value);
301 this.col = color; 311 this.col = color;
302 if (legend === undefined) this.legend = ''; 312 if (legend === undefined) this.legend = '';
313 else if (legend.length === 0) this.legend = '';
303 else this.legend = ' '+legend; 314 else this.legend = ' '+legend;
304 if (stack === undefined) this.stack = false; 315 if (stack === undefined) this.stack = false;
305 else this.stack = stack; 316 else this.stack = stack;
@@ -315,6 +326,7 @@ RrdGraphDesc.prototype.tick = function (graph, vname, color, fraction, legend)
315 if (fraction !== undefined) 326 if (fraction !== undefined)
316 this.yrule = fraction; 327 this.yrule = fraction;
317 if (legend === undefined) this.legend = ''; 328 if (legend === undefined) this.legend = '';
329 else if (legend.length === 0) this.legend = '';
318 else this.legend = ' '+legend; 330 else this.legend = ' '+legend;
319 this.format = this.legend; 331 this.format = this.legend;
320}; 332};
@@ -372,16 +384,26 @@ RrdGraphDesc.prototype.textalign = function (graph, align)
372 } 384 }
373}; 385};
374 386
375RrdGraphDesc.prototype.vrule = function (graph, time, color, legend) 387RrdGraphDesc.prototype.vrule = function (graph, time, color, legend, dashes, dash_offset)
376{ 388{
377 this.gf = RrdGraphDesc.GF_VRULE; 389 this.gf = RrdGraphDesc.GF_VRULE;
378 this.xrule = time; 390 this.xrule = time;
379 this.col = color; 391 this.col = color;
380 if (legend === undefined) this.legend = ''; 392 if (legend === undefined) this.legend = '';
393 else if (legend.length === 0) this.legend = '';
381 else this.legend = ' '+legend; 394 else this.legend = ' '+legend;
395
396 if (dashes != undefined) {
397 this.dash = true;
398 this.p_dashes = dashes;
399 this.ndash = dashes.length;
400 }
401 if (dash_offset !=undefined) {
402 this.offset = dash_offset;
403 }
382}; 404};
383 405
384RrdGraphDesc.prototype.hrule = function (graph, value, color, legend) 406RrdGraphDesc.prototype.hrule = function (graph, value, color, legend, dashes, dash_offset)
385{ 407{
386 this.gf = RrdGraphDesc.GF_HRULE; 408 this.gf = RrdGraphDesc.GF_HRULE;
387 this.vidx = graph.find_var(value); 409 this.vidx = graph.find_var(value);
@@ -389,7 +411,17 @@ RrdGraphDesc.prototype.hrule = function (graph, value, color, legend)
389 this.yrule = value; 411 this.yrule = value;
390 this.col = color; 412 this.col = color;
391 if (legend === undefined) this.legend = ''; 413 if (legend === undefined) this.legend = '';
414 else if (legend.length === 0) this.legend = '';
392 else this.legend = ' '+legend; 415 else this.legend = ' '+legend;
416
417 if (dashes != undefined) {
418 this.dash = true;
419 this.p_dashes = dashes;
420 this.ndash = dashes.length;
421 }
422 if (dash_offset !=undefined) {
423 this.offset = dash_offset;
424 }
393}; 425};
394 426
395/** 427/**
@@ -823,10 +855,10 @@ var RrdGraph = function (gfx, data)
823 FONT: 'rgba(0, 0, 0, 1.0)', 855 FONT: 'rgba(0, 0, 0, 1.0)',
824 ARROW: 'rgba(127, 31, 31, 1.0)', 856 ARROW: 'rgba(127, 31, 31, 1.0)',
825 AXIS: 'rgba(31, 31, 31, 1.0)', 857 AXIS: 'rgba(31, 31, 31, 1.0)',
826 FRAME: 'rgba(0, 0, 0, 1.0)' 858 FRAME: 'rgba(0, 0, 0, 1.0)'
827 }; 859 };
828 860
829 this.xlab = [ 861 this.xlab = [
830 {minsec: 0, length: 0, gridtm: RrdGraph.TMT_SECOND, gridst: 30, mgridtm: RrdGraph.TMT_MINUTE, mgridst: 5, labtm: RrdGraph.TMT_MINUTE, labst: 5, precis: 0, stst: '%H:%M' } , 862 {minsec: 0, length: 0, gridtm: RrdGraph.TMT_SECOND, gridst: 30, mgridtm: RrdGraph.TMT_MINUTE, mgridst: 5, labtm: RrdGraph.TMT_MINUTE, labst: 5, precis: 0, stst: '%H:%M' } ,
831 {minsec: 2, length: 0, gridtm: RrdGraph.TMT_MINUTE, gridst: 1, mgridtm: RrdGraph.TMT_MINUTE, mgridst: 5, labtm: RrdGraph.TMT_MINUTE, labst: 5, precis: 0, stst: '%H:%M' } , 863 {minsec: 2, length: 0, gridtm: RrdGraph.TMT_MINUTE, gridst: 1, mgridtm: RrdGraph.TMT_MINUTE, mgridst: 5, labtm: RrdGraph.TMT_MINUTE, labst: 5, precis: 0, stst: '%H:%M' } ,
832 {minsec: 5, length: 0, gridtm: RrdGraph.TMT_MINUTE, gridst: 2, mgridtm: RrdGraph.TMT_MINUTE, mgridst: 10, labtm: RrdGraph.TMT_MINUTE, labst: 10, precis: 0, stst: '%H:%M' } , 864 {minsec: 5, length: 0, gridtm: RrdGraph.TMT_MINUTE, gridst: 2, mgridtm: RrdGraph.TMT_MINUTE, mgridst: 10, labtm: RrdGraph.TMT_MINUTE, labst: 10, precis: 0, stst: '%H:%M' } ,
@@ -2963,9 +2995,9 @@ RrdGraph.prototype.gdes_add_shift = function (vname, offset)
2963 this.gdes.push(new RrdGraphDesc(this, RrdGraphDesc.GF_SHIFT, vname, offset)); 2995 this.gdes.push(new RrdGraphDesc(this, RrdGraphDesc.GF_SHIFT, vname, offset));
2964}; 2996};
2965 2997
2966RrdGraph.prototype.gdes_add_line = function (width, value, color, legend, stack) 2998RrdGraph.prototype.gdes_add_line = function (width, value, color, legend, stack, dashes, dash_offset)
2967{ 2999{
2968 this.gdes.push(new RrdGraphDesc(this, RrdGraphDesc.GF_LINE, width, value, color, legend, stack)); 3000 this.gdes.push(new RrdGraphDesc(this, RrdGraphDesc.GF_LINE, width, value, color, legend, stack, dashes, dash_offset));
2969}; 3001};
2970 3002
2971RrdGraph.prototype.gdes_add_area = function (value, color, legend, stack) 3003RrdGraph.prototype.gdes_add_area = function (value, color, legend, stack)
@@ -2993,14 +3025,14 @@ RrdGraph.prototype.gdes_add_textalign = function (align)
2993 this.gdes.push(new RrdGraphDesc(this, RrdGraphDesc.GF_TEXTALIGN, align)); 3025 this.gdes.push(new RrdGraphDesc(this, RrdGraphDesc.GF_TEXTALIGN, align));
2994}; 3026};
2995 3027
2996RrdGraph.prototype.gdes_add_vrule = function (time, color, legend) 3028RrdGraph.prototype.gdes_add_vrule = function (time, color, legend, dashes, dash_offset)
2997{ 3029{
2998 this.gdes.push(new RrdGraphDesc(this, RrdGraphDesc.GF_VRULE, time, color, legend)); 3030 this.gdes.push(new RrdGraphDesc(this, RrdGraphDesc.GF_VRULE, time, color, legend, dashes, dash_offset));
2999}; 3031};
3000 3032
3001RrdGraph.prototype.gdes_add_hrule = function (value, color, legend) 3033RrdGraph.prototype.gdes_add_hrule = function (value, color, legend, dashes, dash_offset)
3002{ 3034{
3003 this.gdes.push(new RrdGraphDesc(this, RrdGraphDesc.GF_HRULE, value, color, legend)); 3035 this.gdes.push(new RrdGraphDesc(this, RrdGraphDesc.GF_HRULE, value, color, legend, dashes, dash_offset));
3004}; 3036};
3005 3037
3006RrdGraph.prototype.tmt_conv = function (str) 3038RrdGraph.prototype.tmt_conv = function (str)