Free cookie consent management tool by TermsFeed Policy Generator

source: branches/1888_OaaS/HeuristicLab.Services.Optimization.Web/Content/jqplot/src/jqplot.markerRenderer.js @ 16654

Last change on this file since 16654 was 9062, checked in by fschoepp, 12 years ago

#1888:
Backend changes:

  • Simplified job state detection (only one hive call will be made to detect all states now, instead of one additional call per job)
  • Reorganized classes (moved model classes into Model folder)

Website changes:

  • Website now heavily uses JavaScript to achieve better user experience
  • JavaScript degrades gracefully, except for plots
  • Tables: Added jquery-datatable-plugin to extend tables (pagination + search functionality)
  • OaaS-Website now uses the design of the HL websites (found in WebApplication branch)
  • Added jqplot to render zoomable line plots for HL-Datatables
  • Styling.js: Plots will be generated by using an ajax call; additional jquery-styling occurs within this file.
  • Added jquery-ui-1.9.2 which is capable of handling/rendering tabs, accordions and resizers.
File size: 8.8 KB
Line 
1/**
2 * jqPlot
3 * Pure JavaScript plotting plugin using jQuery
4 *
5 * Version: @VERSION
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.MarkerRenderer
32    // The default jqPlot marker renderer, rendering the points on the line.
33    $.jqplot.MarkerRenderer = function(options){
34        // Group: Properties
35       
36        // prop: show
37        // wether or not to show the marker.
38        this.show = true;
39        // prop: style
40        // One of diamond, circle, square, x, plus, dash, filledDiamond, filledCircle, filledSquare
41        this.style = 'filledCircle';
42        // prop: lineWidth
43        // size of the line for non-filled markers.
44        this.lineWidth = 2;
45        // prop: size
46        // Size of the marker (diameter or circle, length of edge of square, etc.)
47        this.size = 9.0;
48        // prop: color
49        // color of marker.  Will be set to color of series by default on init.
50        this.color = '#666666';
51        // prop: shadow
52        // wether or not to draw a shadow on the line
53        this.shadow = true;
54        // prop: shadowAngle
55        // Shadow angle in degrees
56        this.shadowAngle = 45;
57        // prop: shadowOffset
58        // Shadow offset from line in pixels
59        this.shadowOffset = 1;
60        // prop: shadowDepth
61        // Number of times shadow is stroked, each stroke offset shadowOffset from the last.
62        this.shadowDepth = 3;
63        // prop: shadowAlpha
64        // Alpha channel transparency of shadow.  0 = transparent.
65        this.shadowAlpha = '0.07';
66        // prop: shadowRenderer
67        // Renderer that will draws the shadows on the marker.
68        this.shadowRenderer = new $.jqplot.ShadowRenderer();
69        // prop: shapeRenderer
70        // Renderer that will draw the marker.
71        this.shapeRenderer = new $.jqplot.ShapeRenderer();
72       
73        $.extend(true, this, options);
74    };
75   
76    $.jqplot.MarkerRenderer.prototype.init = function(options) {
77        $.extend(true, this, options);
78        var sdopt = {angle:this.shadowAngle, offset:this.shadowOffset, alpha:this.shadowAlpha, lineWidth:this.lineWidth, depth:this.shadowDepth, closePath:true};
79        if (this.style.indexOf('filled') != -1) {
80            sdopt.fill = true;
81        }
82        if (this.style.indexOf('ircle') != -1) {
83            sdopt.isarc = true;
84            sdopt.closePath = false;
85        }
86        this.shadowRenderer.init(sdopt);
87       
88        var shopt = {fill:false, isarc:false, strokeStyle:this.color, fillStyle:this.color, lineWidth:this.lineWidth, closePath:true};
89        if (this.style.indexOf('filled') != -1) {
90            shopt.fill = true;
91        }
92        if (this.style.indexOf('ircle') != -1) {
93            shopt.isarc = true;
94            shopt.closePath = false;
95        }
96        this.shapeRenderer.init(shopt);
97    };
98   
99    $.jqplot.MarkerRenderer.prototype.drawDiamond = function(x, y, ctx, fill, options) {
100        var stretch = 1.2;
101        var dx = this.size/2/stretch;
102        var dy = this.size/2*stretch;
103        var points = [[x-dx, y], [x, y+dy], [x+dx, y], [x, y-dy]];
104        if (this.shadow) {
105            this.shadowRenderer.draw(ctx, points);
106        }
107        this.shapeRenderer.draw(ctx, points, options);
108    };
109   
110    $.jqplot.MarkerRenderer.prototype.drawPlus = function(x, y, ctx, fill, options) {
111        var stretch = 1.0;
112        var dx = this.size/2*stretch;
113        var dy = this.size/2*stretch;
114        var points1 = [[x, y-dy], [x, y+dy]];
115        var points2 = [[x+dx, y], [x-dx, y]];
116        var opts = $.extend(true, {}, this.options, {closePath:false});
117        if (this.shadow) {
118            this.shadowRenderer.draw(ctx, points1, {closePath:false});
119            this.shadowRenderer.draw(ctx, points2, {closePath:false});
120        }
121        this.shapeRenderer.draw(ctx, points1, opts);
122        this.shapeRenderer.draw(ctx, points2, opts);
123    };
124   
125    $.jqplot.MarkerRenderer.prototype.drawX = function(x, y, ctx, fill, options) {
126        var stretch = 1.0;
127        var dx = this.size/2*stretch;
128        var dy = this.size/2*stretch;
129        var opts = $.extend(true, {}, this.options, {closePath:false});
130        var points1 = [[x-dx, y-dy], [x+dx, y+dy]];
131        var points2 = [[x-dx, y+dy], [x+dx, y-dy]];
132        if (this.shadow) {
133            this.shadowRenderer.draw(ctx, points1, {closePath:false});
134            this.shadowRenderer.draw(ctx, points2, {closePath:false});
135        }
136        this.shapeRenderer.draw(ctx, points1, opts);
137        this.shapeRenderer.draw(ctx, points2, opts);
138    };
139   
140    $.jqplot.MarkerRenderer.prototype.drawDash = function(x, y, ctx, fill, options) {
141        var stretch = 1.0;
142        var dx = this.size/2*stretch;
143        var dy = this.size/2*stretch;
144        var points = [[x-dx, y], [x+dx, y]];
145        if (this.shadow) {
146            this.shadowRenderer.draw(ctx, points);
147        }
148        this.shapeRenderer.draw(ctx, points, options);
149    };
150   
151    $.jqplot.MarkerRenderer.prototype.drawLine = function(p1, p2, ctx, fill, options) {
152        var points = [p1, p2];
153        if (this.shadow) {
154            this.shadowRenderer.draw(ctx, points);
155        }
156        this.shapeRenderer.draw(ctx, points, options);
157    };
158   
159    $.jqplot.MarkerRenderer.prototype.drawSquare = function(x, y, ctx, fill, options) {
160        var stretch = 1.0;
161        var dx = this.size/2/stretch;
162        var dy = this.size/2*stretch;
163        var points = [[x-dx, y-dy], [x-dx, y+dy], [x+dx, y+dy], [x+dx, y-dy]];
164        if (this.shadow) {
165            this.shadowRenderer.draw(ctx, points);
166        }
167        this.shapeRenderer.draw(ctx, points, options);
168    };
169   
170    $.jqplot.MarkerRenderer.prototype.drawCircle = function(x, y, ctx, fill, options) {
171        var radius = this.size/2;
172        var end = 2*Math.PI;
173        var points = [x, y, radius, 0, end, true];
174        if (this.shadow) {
175            this.shadowRenderer.draw(ctx, points);
176        }
177        this.shapeRenderer.draw(ctx, points, options);
178    };
179   
180    $.jqplot.MarkerRenderer.prototype.draw = function(x, y, ctx, options) {
181        options = options || {};
182        // hack here b/c shape renderer uses canvas based color style options
183        // and marker uses css style names.
184        if (options.show == null || options.show != false) {
185            if (options.color && !options.fillStyle) {
186                options.fillStyle = options.color;
187            }
188            if (options.color && !options.strokeStyle) {
189                options.strokeStyle = options.color;
190            }
191            switch (this.style) {
192                case 'diamond':
193                    this.drawDiamond(x,y,ctx, false, options);
194                    break;
195                case 'filledDiamond':
196                    this.drawDiamond(x,y,ctx, true, options);
197                    break;
198                case 'circle':
199                    this.drawCircle(x,y,ctx, false, options);
200                    break;
201                case 'filledCircle':
202                    this.drawCircle(x,y,ctx, true, options);
203                    break;
204                case 'square':
205                    this.drawSquare(x,y,ctx, false, options);
206                    break;
207                case 'filledSquare':
208                    this.drawSquare(x,y,ctx, true, options);
209                    break;
210                case 'x':
211                    this.drawX(x,y,ctx, true, options);
212                    break;
213                case 'plus':
214                    this.drawPlus(x,y,ctx, true, options);
215                    break;
216                case 'dash':
217                    this.drawDash(x,y,ctx, true, options);
218                    break;
219                case 'line':
220                    this.drawLine(x, y, ctx, false, options);
221                    break;
222                default:
223                    this.drawDiamond(x,y,ctx, false, options);
224                    break;
225            }
226        }
227    };
228})(jQuery);   
Note: See TracBrowser for help on using the repository browser.