Subversion-Projekte lars-tiefland.cienc

Revision

Details | Letzte Änderung | Log anzeigen | RSS feed

Revision Autor Zeilennr. Zeile
9 lars 1
/**
2
 * jqPlot
3
 * Pure JavaScript plotting plugin using jQuery
4
 *
5
 * Version: 1.0.8
6
 * Revision: 1250
7
 *
8
 * Copyright (c) 2009-2013 Chris Leonello
9
 * jqPlot is currently available for use in all personal or commercial projects
10
 * under both the MIT (http://www.opensource.org/licenses/mit-license.php) and GPL
11
 * version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html) licenses. This means that you can
12
 * choose the license that best suits your project and use it accordingly.
13
 *
14
 * Although not required, the author would appreciate an email letting him
15
 * know of any substantial use of jqPlot.  You can reach the author at:
16
 * chris at jqplot dot com or see http://www.jqplot.com/info.php .
17
 *
18
 * If you are feeling kind and generous, consider supporting the project by
19
 * making a donation at: http://www.jqplot.com/donate.php .
20
 *
21
 * sprintf functions contained in jqplot.sprintf.js by Ash Searle:
22
 *
23
 *     version 2007.04.27
24
 *     author Ash Searle
25
 *     http://hexmen.com/blog/2007/03/printf-sprintf/
26
 *     http://hexmen.com/js/sprintf.js
27
 *     The author (Ash Searle) has placed this code in the public domain:
28
 *     "This code is unrestricted: you are free to use it however you like."
29
 *
30
 */
31
(function($) {
32
    // Class: $.jqplot.CanvasGridRenderer
33
    // The default jqPlot grid renderer, creating a grid on a canvas element.
34
    // The renderer has no additional options beyond the <Grid> class.
35
    $.jqplot.PyramidGridRenderer = function(){
36
        $.jqplot.CanvasGridRenderer.call(this);
37
    };
38
 
39
    $.jqplot.PyramidGridRenderer.prototype = new $.jqplot.CanvasGridRenderer();
40
    $.jqplot.PyramidGridRenderer.prototype.constructor = $.jqplot.PyramidGridRenderer;
41
 
42
    // called with context of Grid object
43
    $.jqplot.CanvasGridRenderer.prototype.init = function(options) {
44
        this._ctx;
45
        this.plotBands = {
46
            show: false,
47
            color: 'rgb(230, 219, 179)',
48
            axis: 'y',
49
            start: null,
50
            interval: 10
51
        };
52
        $.extend(true, this, options);
53
        // set the shadow renderer options
54
        var sopts = {lineJoin:'miter', lineCap:'round', fill:false, isarc:false, angle:this.shadowAngle, offset:this.shadowOffset, alpha:this.shadowAlpha, depth:this.shadowDepth, lineWidth:this.shadowWidth, closePath:false, strokeStyle:this.shadowColor};
55
        this.renderer.shadowRenderer.init(sopts);
56
    };
57
 
58
    $.jqplot.PyramidGridRenderer.prototype.draw = function() {
59
        this._ctx = this._elem.get(0).getContext("2d");
60
        var ctx = this._ctx;
61
        var axes = this._axes;
62
        var xp = axes.xaxis.u2p;
63
        var yp = axes.yMidAxis.u2p;
64
        var xnudge = axes.xaxis.max/1000.0;
65
        var xp0 = xp(0);
66
        var xpn = xp(xnudge);
67
        var ax = ['xaxis', 'yaxis', 'x2axis', 'y2axis','yMidAxis'];
68
        // Add the grid onto the grid canvas.  This is the bottom most layer.
69
        ctx.save();
70
        ctx.clearRect(0, 0, this._plotDimensions.width, this._plotDimensions.height);
71
        ctx.fillStyle = this.backgroundColor || this.background;
72
 
73
        ctx.fillRect(this._left, this._top, this._width, this._height);
74
 
75
        if (this.plotBands.show) {
76
            ctx.save();
77
            var pb = this.plotBands;
78
            ctx.fillStyle = pb.color;
79
            var axis;
80
            var x, y, w, h;
81
            // find axis to work with
82
            if (pb.axis.charAt(0) === 'x') {
83
                if (axes.xaxis.show) {
84
                    axis = axes.xaxis;
85
                }
86
            }
87
            else if (pb.axis.charAt(0) === 'y') {
88
                if (axes.yaxis.show) {
89
                    axis = axes.yaxis;
90
                }
91
                else if (axes.y2axis.show) {
92
                    axis = axes.y2axis;
93
                }
94
                else if (axes.yMidAxis.show) {
95
                    axis = axes.yMidAxis;
96
                }
97
            }
98
 
99
            if (axis !== undefined) {
100
                // draw some rectangles
101
                var start = pb.start;
102
                if (start === null) {
103
                    start = axis.min;
104
                }
105
                for (var i = start; i < axis.max; i += 2 * pb.interval) {
106
                    if (axis.name.charAt(0) === 'y') {
107
                        x = this._left;
108
                        if ((i + pb.interval) < axis.max) {
109
                            y = axis.series_u2p(i + pb.interval) + this._top;
110
                        }
111
                        else {
112
                            y = axis.series_u2p(axis.max) + this._top;
113
                        }
114
                        w = this._right - this._left;
115
                        h = axis.series_u2p(start) - axis.series_u2p(start + pb.interval);
116
                        ctx.fillRect(x, y, w, h);
117
                    }
118
                    // else {
119
                    //     y = 0;
120
                    //     x = axis.series_u2p(i);
121
                    //     h = this._height;
122
                    //     w = axis.series_u2p(start + pb.interval) - axis.series_u2p(start);
123
                    // }
124
 
125
                }
126
            }
127
            ctx.restore();
128
        }
129
 
130
        ctx.save();
131
        ctx.lineJoin = 'miter';
132
        ctx.lineCap = 'butt';
133
        ctx.lineWidth = this.gridLineWidth;
134
        ctx.strokeStyle = this.gridLineColor;
135
        var b, e, s, m;
136
        for (var i=5; i>0; i--) {
137
            var name = ax[i-1];
138
            var axis = axes[name];
139
            var ticks = axis._ticks;
140
            var numticks = ticks.length;
141
            if (axis.show) {
142
                if (axis.drawBaseline) {
143
                    var bopts = {};
144
                    if (axis.baselineWidth !== null) {
145
                        bopts.lineWidth = axis.baselineWidth;
146
                    }
147
                    if (axis.baselineColor !== null) {
148
                        bopts.strokeStyle = axis.baselineColor;
149
                    }
150
                    switch (name) {
151
                        case 'xaxis':
152
                            if (axes.yMidAxis.show) {
153
                                drawLine (this._left, this._bottom, xp0, this._bottom, bopts);
154
                                drawLine (xpn, this._bottom, this._right, this._bottom, bopts);
155
                            }
156
                            else {
157
                                drawLine (this._left, this._bottom, this._right, this._bottom, bopts);
158
                            }
159
                            break;
160
                        case 'yaxis':
161
                            drawLine (this._left, this._bottom, this._left, this._top, bopts);
162
                            break;
163
                        case 'yMidAxis':
164
                            drawLine(xp0, this._bottom, xp0, this._top, bopts);
165
                            drawLine(xpn, this._bottom, xpn, this._top, bopts);
166
                            break;
167
                        case 'x2axis':
168
                            if (axes.yMidAxis.show) {
169
                                drawLine (this._left, this._top, xp0, this._top, bopts);
170
                                drawLine (xpn, this._top, this._right, this._top, bopts);
171
                            }
172
                            else {
173
                                drawLine (this._left, this._bottom, this._right, this._bottom, bopts);
174
                            }
175
                            break;
176
                        case 'y2axis':
177
                            drawLine (this._right, this._bottom, this._right, this._top, bopts);
178
                            break;
179
 
180
                    }
181
                }
182
                for (var j=numticks; j>0; j--) {
183
                    var t = ticks[j-1];
184
                    if (t.show) {
185
                        var pos = Math.round(axis.u2p(t.value)) + 0.5;
186
                        switch (name) {
187
                            case 'xaxis':
188
                                // draw the grid line if we should
189
                                if (t.showGridline && this.drawGridlines && (!t.isMinorTick || axis.showMinorTicks)) {
190
                                    drawLine(pos, this._top, pos, this._bottom);
191
                                }
192
 
193
                                // draw the mark
194
                                if (t.showMark && t.mark && (!t.isMinorTick || axis.showMinorTicks)) {
195
                                    s = t.markSize;
196
                                    m = t.mark;
197
                                    var pos = Math.round(axis.u2p(t.value)) + 0.5;
198
                                    switch (m) {
199
                                        case 'outside':
200
                                            b = this._bottom;
201
                                            e = this._bottom+s;
202
                                            break;
203
                                        case 'inside':
204
                                            b = this._bottom-s;
205
                                            e = this._bottom;
206
                                            break;
207
                                        case 'cross':
208
                                            b = this._bottom-s;
209
                                            e = this._bottom+s;
210
                                            break;
211
                                        default:
212
                                            b = this._bottom;
213
                                            e = this._bottom+s;
214
                                            break;
215
                                    }
216
                                    // draw the shadow
217
                                    if (this.shadow) {
218
                                        this.renderer.shadowRenderer.draw(ctx, [[pos,b],[pos,e]], {lineCap:'butt', lineWidth:this.gridLineWidth, offset:this.gridLineWidth*0.75, depth:2, fill:false, closePath:false});
219
                                    }
220
                                    // draw the line
221
                                    drawLine(pos, b, pos, e);
222
                                }
223
                                break;
224
                            case 'yaxis':
225
                                // draw the grid line
226
                                if (t.showGridline && this.drawGridlines && (!t.isMinorTick || axis.showMinorTicks)) {
227
                                    drawLine(this._right, pos, this._left, pos);
228
                                }
229
 
230
                                // draw the mark
231
                                if (t.showMark && t.mark && (!t.isMinorTick || axis.showMinorTicks)) {
232
                                    s = t.markSize;
233
                                    m = t.mark;
234
                                    var pos = Math.round(axis.u2p(t.value)) + 0.5;
235
                                    switch (m) {
236
                                        case 'outside':
237
                                            b = this._left-s;
238
                                            e = this._left;
239
                                            break;
240
                                        case 'inside':
241
                                            b = this._left;
242
                                            e = this._left+s;
243
                                            break;
244
                                        case 'cross':
245
                                            b = this._left-s;
246
                                            e = this._left+s;
247
                                            break;
248
                                        default:
249
                                            b = this._left-s;
250
                                            e = this._left;
251
                                            break;
252
                                            }
253
                                    // draw the shadow
254
                                    if (this.shadow) {
255
                                        this.renderer.shadowRenderer.draw(ctx, [[b, pos], [e, pos]], {lineCap:'butt', lineWidth:this.gridLineWidth*1.5, offset:this.gridLineWidth*0.75, fill:false, closePath:false});
256
                                    }
257
                                    drawLine(b, pos, e, pos, {strokeStyle:axis.borderColor});
258
                                }
259
                                break;
260
                            case 'yMidAxis':
261
                                // draw the grid line
262
                                if (t.showGridline && this.drawGridlines && (!t.isMinorTick || axis.showMinorTicks)) {
263
                                    drawLine(this._left, pos, xp0, pos);
264
                                    drawLine(xpn, pos, this._right, pos);
265
                                }
266
                                // draw the mark
267
                                if (t.showMark && t.mark && (!t.isMinorTick || axis.showMinorTicks)) {
268
                                    s = t.markSize;
269
                                    m = t.mark;
270
                                    var pos = Math.round(axis.u2p(t.value)) + 0.5;
271
 
272
                                    b = xp0;
273
                                    e = xp0 + s;
274
                                    // draw the shadow
275
                                    if (this.shadow) {
276
                                        this.renderer.shadowRenderer.draw(ctx, [[b, pos], [e, pos]], {lineCap:'butt', lineWidth:this.gridLineWidth*1.5, offset:this.gridLineWidth*0.75, fill:false, closePath:false});
277
                                    }
278
                                    drawLine(b, pos, e, pos, {strokeStyle:axis.borderColor});
279
 
280
                                    b = xpn - s;
281
                                    e = xpn;
282
                                    // draw the shadow
283
                                    if (this.shadow) {
284
                                        this.renderer.shadowRenderer.draw(ctx, [[b, pos], [e, pos]], {lineCap:'butt', lineWidth:this.gridLineWidth*1.5, offset:this.gridLineWidth*0.75, fill:false, closePath:false});
285
                                    }
286
                                    drawLine(b, pos, e, pos, {strokeStyle:axis.borderColor});
287
                                }
288
                                break;
289
                            case 'x2axis':
290
                                // draw the grid line
291
                                if (t.showGridline && this.drawGridlines && (!t.isMinorTick || axis.showMinorTicks)) {
292
                                    drawLine(pos, this._bottom, pos, this._top);
293
                                }
294
 
295
                                // draw the mark
296
                                if (t.showMark && t.mark && (!t.isMinorTick || axis.showMinorTicks)) {
297
                                    s = t.markSize;
298
                                    m = t.mark;
299
                                    var pos = Math.round(axis.u2p(t.value)) + 0.5;
300
                                    switch (m) {
301
                                        case 'outside':
302
                                            b = this._top-s;
303
                                            e = this._top;
304
                                            break;
305
                                        case 'inside':
306
                                            b = this._top;
307
                                            e = this._top+s;
308
                                            break;
309
                                        case 'cross':
310
                                            b = this._top-s;
311
                                            e = this._top+s;
312
                                            break;
313
                                        default:
314
                                            b = this._top-s;
315
                                            e = this._top;
316
                                            break;
317
                                            }
318
                                    // draw the shadow
319
                                    if (this.shadow) {
320
                                        this.renderer.shadowRenderer.draw(ctx, [[pos,b],[pos,e]], {lineCap:'butt', lineWidth:this.gridLineWidth, offset:this.gridLineWidth*0.75, depth:2, fill:false, closePath:false});
321
                                    }
322
                                    drawLine(pos, b, pos, e);
323
                                }
324
                                break;
325
                            case 'y2axis':
326
                                // draw the grid line
327
                                if (t.showGridline && this.drawGridlines && (!t.isMinorTick || axis.showMinorTicks)) {
328
                                    drawLine(this._left, pos, this._right, pos);
329
                                }
330
 
331
                                // draw the mark
332
                                if (t.showMark && t.mark && (!t.isMinorTick || axis.showMinorTicks)) {
333
                                    s = t.markSize;
334
                                    m = t.mark;
335
                                    var pos = Math.round(axis.u2p(t.value)) + 0.5;
336
                                    switch (m) {
337
                                        case 'outside':
338
                                            b = this._right;
339
                                            e = this._right+s;
340
                                            break;
341
                                        case 'inside':
342
                                            b = this._right-s;
343
                                            e = this._right;
344
                                            break;
345
                                        case 'cross':
346
                                            b = this._right-s;
347
                                            e = this._right+s;
348
                                            break;
349
                                        default:
350
                                            b = this._right;
351
                                            e = this._right+s;
352
                                            break;
353
                                            }
354
                                    // draw the shadow
355
                                    if (this.shadow) {
356
                                        this.renderer.shadowRenderer.draw(ctx, [[b, pos], [e, pos]], {lineCap:'butt', lineWidth:this.gridLineWidth*1.5, offset:this.gridLineWidth*0.75, fill:false, closePath:false});
357
                                    }
358
                                    drawLine(b, pos, e, pos, {strokeStyle:axis.borderColor});
359
                                }
360
                                break;
361
                            default:
362
                                break;
363
                        }
364
                    }
365
                }
366
                t = null;
367
            }
368
            axis = null;
369
            ticks = null;
370
        }
371
 
372
        ctx.restore();
373
 
374
        function drawLine(bx, by, ex, ey, opts) {
375
            ctx.save();
376
            opts = opts || {};
377
            if (opts.lineWidth == null || opts.lineWidth != 0){
378
                $.extend(true, ctx, opts);
379
                ctx.beginPath();
380
                ctx.moveTo(bx, by);
381
                ctx.lineTo(ex, ey);
382
                ctx.stroke();
383
            }
384
            ctx.restore();
385
        }
386
 
387
        if (this.shadow) {
388
            if (axes.yMidAxis.show) {
389
                var points = [[this._left, this._bottom], [xp0, this._bottom]];
390
                this.renderer.shadowRenderer.draw(ctx, points);
391
                var points = [[xpn, this._bottom], [this._right, this._bottom], [this._right, this._top]];
392
                this.renderer.shadowRenderer.draw(ctx, points);
393
                var points = [[xp0, this._bottom], [xp0, this._top]];
394
                this.renderer.shadowRenderer.draw(ctx, points);
395
            }
396
            else {
397
                var points = [[this._left, this._bottom], [this._right, this._bottom], [this._right, this._top]];
398
                this.renderer.shadowRenderer.draw(ctx, points);
399
            }
400
        }
401
        // Now draw border around grid.  Use axis border definitions. start at
402
        // upper left and go clockwise.
403
        if (this.borderWidth != 0 && this.drawBorder) {
404
            if (axes.yMidAxis.show) {
405
                drawLine (this._left, this._top, xp0, this._top, {lineCap:'round', strokeStyle:axes.x2axis.borderColor, lineWidth:axes.x2axis.borderWidth});
406
                drawLine (xpn, this._top, this._right, this._top, {lineCap:'round', strokeStyle:axes.x2axis.borderColor, lineWidth:axes.x2axis.borderWidth});
407
                drawLine (this._right, this._top, this._right, this._bottom, {lineCap:'round', strokeStyle:axes.y2axis.borderColor, lineWidth:axes.y2axis.borderWidth});
408
                drawLine (this._right, this._bottom, xpn, this._bottom, {lineCap:'round', strokeStyle:axes.xaxis.borderColor, lineWidth:axes.xaxis.borderWidth});
409
                drawLine (xp0, this._bottom, this._left, this._bottom, {lineCap:'round', strokeStyle:axes.xaxis.borderColor, lineWidth:axes.xaxis.borderWidth});
410
                drawLine (this._left, this._bottom, this._left, this._top, {lineCap:'round', strokeStyle:axes.yaxis.borderColor, lineWidth:axes.yaxis.borderWidth});
411
                drawLine (xp0, this._bottom, xp0, this._top, {lineCap:'round', strokeStyle:axes.yaxis.borderColor, lineWidth:axes.yaxis.borderWidth});
412
                drawLine (xpn, this._bottom, xpn, this._top, {lineCap:'round', strokeStyle:axes.yaxis.borderColor, lineWidth:axes.yaxis.borderWidth});
413
            }
414
            else {
415
                drawLine (this._left, this._top, this._right, this._top, {lineCap:'round', strokeStyle:axes.x2axis.borderColor, lineWidth:axes.x2axis.borderWidth});
416
                drawLine (this._right, this._top, this._right, this._bottom, {lineCap:'round', strokeStyle:axes.y2axis.borderColor, lineWidth:axes.y2axis.borderWidth});
417
                drawLine (this._right, this._bottom, this._left, this._bottom, {lineCap:'round', strokeStyle:axes.xaxis.borderColor, lineWidth:axes.xaxis.borderWidth});
418
                drawLine (this._left, this._bottom, this._left, this._top, {lineCap:'round', strokeStyle:axes.yaxis.borderColor, lineWidth:axes.yaxis.borderWidth});
419
            }
420
        }
421
        // ctx.lineWidth = this.borderWidth;
422
        // ctx.strokeStyle = this.borderColor;
423
        // ctx.strokeRect(this._left, this._top, this._width, this._height);
424
 
425
        ctx.restore();
426
        ctx =  null;
427
        axes = null;
428
    };
429
})(jQuery);