Free cookie consent management tool by TermsFeed Policy Generator

source: branches/HiveStatistics/sources/HeuristicLab.Services.Hive.Statistics/3.3/Scripts/jqPlot/plugins/jqplot.pyramidGridRenderer.js @ 9646

Last change on this file since 9646 was 9617, checked in by pfleck, 12 years ago

#2063:
Started integrating Hive statistics into statistics web project.
Added jqPlot library for charting.

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