Free cookie consent management tool by TermsFeed Policy Generator

source: branches/OaaS/HeuristicLab.Services.Optimization.Web/Content/jqplot/src/plugins/jqplot.ohlcRenderer.js @ 13401

Last change on this file since 13401 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: 14.9 KB
RevLine 
[9062]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    /**
32     * Class: $.jqplot.OHLCRenderer
33     * jqPlot Plugin to draw Open Hi Low Close, Candlestick and Hi Low Close charts.
34     *
35     * To use this plugin, include the renderer js file in
36     * your source:
37     *
38     * > <script type="text/javascript" src="plugins/jqplot.ohlcRenderer.js"></script>
39     *
40     * You will most likely want to use a date axis renderer
41     * for the x axis also, so include the date axis render js file also:
42     *
43     * > <script type="text/javascript" src="plugins/jqplot.dateAxisRenderer.js"></script>
44     *
45     * Then you set the renderer in the series options on your plot:
46     *
47     * > series: [{renderer:$.jqplot.OHLCRenderer}]
48     *
49     * For OHLC and candlestick charts, data should be specified
50     * like so:
51     *
52     * > dat = [['07/06/2009',138.7,139.68,135.18,135.4], ['06/29/2009',143.46,144.66,139.79,140.02], ...]
53     *
54     * If the data array has only 4 values per point instead of 5,
55     * the renderer will create a Hi Low Close chart instead.  In that case,
56     * data should be supplied like:
57     *
58     * > dat = [['07/06/2009',139.68,135.18,135.4], ['06/29/2009',144.66,139.79,140.02], ...]
59     *
60     * To generate a candlestick chart instead of an OHLC chart,
61     * set the "candlestick" option to true:
62     *
63     * > series: [{renderer:$.jqplot.OHLCRenderer, rendererOptions:{candleStick:true}}],
64     *
65     */
66    $.jqplot.OHLCRenderer = function(){
67        // subclass line renderer to make use of some of it's methods.
68        $.jqplot.LineRenderer.call(this);
69        // prop: candleStick
70        // true to render chart as candleStick.
71        // Must have an open price, cannot be a hlc chart.
72        this.candleStick = false;
73        // prop: tickLength
74        // length of the line in pixels indicating open and close price.
75        // Default will auto calculate based on plot width and
76        // number of points displayed.
77        this.tickLength = 'auto';
78        // prop: bodyWidth
79        // width of the candlestick body in pixels.  Default will auto calculate
80        // based on plot width and number of candlesticks displayed.
81        this.bodyWidth = 'auto';
82        // prop: openColor
83        // color of the open price tick mark.  Default is series color.
84        this.openColor = null;
85        // prop: closeColor
86        // color of the close price tick mark.  Default is series color.
87        this.closeColor = null;
88        // prop: wickColor
89        // color of the hi-lo line thorugh the candlestick body.
90        // Default is the series color.
91        this.wickColor = null;
92        // prop: fillUpBody
93        // true to render an "up" day (close price greater than open price)
94        // with a filled candlestick body.
95        this.fillUpBody = false;
96        // prop: fillDownBody
97        // true to render a "down" day (close price lower than open price)
98        // with a filled candlestick body.
99        this.fillDownBody = true;
100        // prop: upBodyColor
101        // Color of candlestick body of an "up" day.  Default is series color.
102        this.upBodyColor = null;
103        // prop: downBodyColor
104        // Color of candlestick body on a "down" day.  Default is series color.
105        this.downBodyColor = null;
106        // prop: hlc
107        // true if is a hi-low-close chart (no open price).
108        // This is determined automatically from the series data.
109        this.hlc = false;
110        // prop: lineWidth
111        // Width of the hi-low line and open/close ticks.
112        // Must be set in the rendererOptions for the series.
113        this.lineWidth = 1.5;
114        this._tickLength;
115        this._bodyWidth;
116    };
117   
118    $.jqplot.OHLCRenderer.prototype = new $.jqplot.LineRenderer();
119    $.jqplot.OHLCRenderer.prototype.constructor = $.jqplot.OHLCRenderer;
120   
121    // called with scope of series.
122    $.jqplot.OHLCRenderer.prototype.init = function(options) {
123        options = options || {};
124        // lineWidth has to be set on the series, changes in renderer
125        // constructor have no effect.  set the default here
126        // if no renderer option for lineWidth is specified.
127        this.lineWidth = options.lineWidth || 1.5;
128        $.jqplot.LineRenderer.prototype.init.call(this, options);
129        this._type = 'ohlc';
130        // set the yaxis data bounds here to account for hi and low values
131        var db = this._yaxis._dataBounds;
132        var d = this._plotData;
133        // if data points have less than 5 values, force a hlc chart.
134        if (d[0].length < 5) {
135            this.renderer.hlc = true;
136
137            for (var j=0; j<d.length; j++) {
138                if (d[j][2] < db.min || db.min == null) {
139                    db.min = d[j][2];
140                }
141                if (d[j][1] > db.max || db.max == null) {
142                    db.max = d[j][1];
143                }             
144            }
145        }
146        else {
147            for (var j=0; j<d.length; j++) {
148                if (d[j][3] < db.min || db.min == null) {
149                    db.min = d[j][3];
150                }
151                if (d[j][2] > db.max || db.max == null) {
152                    db.max = d[j][2];
153                }             
154            }
155        }
156       
157    };
158   
159    // called within scope of series.
160    $.jqplot.OHLCRenderer.prototype.draw = function(ctx, gd, options) {
161        var d = this.data;
162        var xmin = this._xaxis.min;
163        var xmax = this._xaxis.max;
164        // index of last value below range of plot.
165        var xminidx = 0;
166        // index of first value above range of plot.
167        var xmaxidx = d.length;
168        var xp = this._xaxis.series_u2p;
169        var yp = this._yaxis.series_u2p;
170        var i, prevColor, ops, b, h, w, a, points;
171        var o;
172        var r = this.renderer;
173        var opts = (options != undefined) ? options : {};
174        var shadow = (opts.shadow != undefined) ? opts.shadow : this.shadow;
175        var fill = (opts.fill != undefined) ? opts.fill : this.fill;
176        var fillAndStroke = (opts.fillAndStroke != undefined) ? opts.fillAndStroke : this.fillAndStroke;
177        r.bodyWidth = (opts.bodyWidth != undefined) ? opts.bodyWidth : r.bodyWidth;
178        r.tickLength = (opts.tickLength != undefined) ? opts.tickLength : r.tickLength;
179        ctx.save();
180        if (this.show) {
181            var x, open, hi, low, close;
182            // need to get widths based on number of points shown,
183            // not on total number of points.  Use the results
184            // to speed up drawing in next step.
185            for (var i=0; i<d.length; i++) {
186                if (d[i][0] < xmin) {
187                    xminidx = i;
188                }
189                else if (d[i][0] < xmax) {
190                    xmaxidx = i+1;
191                }
192            }
193
194            var dwidth = this.gridData[xmaxidx-1][0] - this.gridData[xminidx][0];
195            var nvisiblePoints = xmaxidx - xminidx;
196            try {
197                var dinterval = Math.abs(this._xaxis.series_u2p(parseInt(this._xaxis._intervalStats[0].sortedIntervals[0].interval)) - this._xaxis.series_u2p(0));
198            }
199
200            catch (e) {
201                var dinterval = dwidth / nvisiblePoints;
202            }
203           
204            if (r.candleStick) {
205                if (typeof(r.bodyWidth) == 'number') {
206                    r._bodyWidth = r.bodyWidth;
207                }
208                else {
209                    r._bodyWidth = Math.min(20, dinterval/1.75);
210                }
211            }
212            else {
213                if (typeof(r.tickLength) == 'number') {
214                    r._tickLength = r.tickLength;
215                }
216                else {
217                    r._tickLength = Math.min(10, dinterval/3.5);
218                }
219            }
220           
221            for (var i=xminidx; i<xmaxidx; i++) {
222                x = xp(d[i][0]);
223                if (r.hlc) {
224                    open = null;
225                    hi = yp(d[i][1]);
226                    low = yp(d[i][2]);
227                    close = yp(d[i][3]);
228                }
229                else {
230                    open = yp(d[i][1]);
231                    hi = yp(d[i][2]);
232                    low = yp(d[i][3]);
233                    close = yp(d[i][4]);
234                }
235                o = {};
236                if (r.candleStick && !r.hlc) {
237                    w = r._bodyWidth;
238                    a = x - w/2;
239                    // draw candle
240                    // determine if candle up or down
241                    // up, remember grid coordinates increase downward
242                    if (close < open) {
243                        // draw wick
244                        if (r.wickColor) {
245                            o.color = r.wickColor;
246                        }
247                        else if (r.downBodyColor) {
248                            o.color = r.upBodyColor;
249                        }
250                        ops = $.extend(true, {}, opts, o);
251                        r.shapeRenderer.draw(ctx, [[x, hi], [x, close]], ops);
252                        r.shapeRenderer.draw(ctx, [[x, open], [x, low]], ops);
253                        o = {};
254                        b = close;
255                        h = open - close;
256                        // if color specified, use it
257                        if (r.fillUpBody) {
258                            o.fillRect = true;
259                        }
260                        else {
261                            o.strokeRect = true;
262                            w = w - this.lineWidth;
263                            a = x - w/2;
264                        }
265                        if (r.upBodyColor) {
266                            o.color = r.upBodyColor;
267                            o.fillStyle = r.upBodyColor;
268                        }
269                        points = [a, b, w, h];
270                    }
271                    // down
272                    else if (close >  open) {
273                        // draw wick
274                        if (r.wickColor) {
275                            o.color = r.wickColor;
276                        }
277                        else if (r.downBodyColor) {
278                            o.color = r.downBodyColor;
279                        }
280                        ops = $.extend(true, {}, opts, o);
281                        r.shapeRenderer.draw(ctx, [[x, hi], [x, open]], ops);
282                        r.shapeRenderer.draw(ctx, [[x, close], [x, low]], ops);
283                         
284                        o = {};
285                       
286                        b = open;
287                        h = close - open;
288                        // if color specified, use it
289                        if (r.fillDownBody) {
290                            o.fillRect = true;
291                        }
292                        else {
293                            o.strokeRect = true;
294                            w = w - this.lineWidth;
295                            a = x - w/2;
296                        }
297                        if (r.downBodyColor) {
298                            o.color = r.downBodyColor;
299                            o.fillStyle = r.downBodyColor;
300                        }
301                        points = [a, b, w, h];
302                    }
303                    // even, open = close
304                    else  {
305                        // draw wick
306                        if (r.wickColor) {
307                            o.color = r.wickColor;
308                        }
309                        ops = $.extend(true, {}, opts, o);
310                        r.shapeRenderer.draw(ctx, [[x, hi], [x, low]], ops);
311                        o = {};
312                        o.fillRect = false;
313                        o.strokeRect = false;
314                        a = [x - w/2, open];
315                        b = [x + w/2, close];
316                        w = null;
317                        h = null;
318                        points = [a, b];
319                    }
320                    ops = $.extend(true, {}, opts, o);
321                    r.shapeRenderer.draw(ctx, points, ops);
322                }
323                else {
324                    prevColor = opts.color;
325                    if (r.openColor) {
326                        opts.color = r.openColor;
327                    }
328                    // draw open tick
329                    if (!r.hlc) {
330                        r.shapeRenderer.draw(ctx, [[x-r._tickLength, open], [x, open]], opts);   
331                    }
332                    opts.color = prevColor;
333                    // draw wick
334                    if (r.wickColor) {
335                        opts.color = r.wickColor;
336                    }
337                    r.shapeRenderer.draw(ctx, [[x, hi], [x, low]], opts);
338                    opts.color  = prevColor;
339                    // draw close tick
340                    if (r.closeColor) {
341                        opts.color = r.closeColor;
342                    }
343                    r.shapeRenderer.draw(ctx, [[x, close], [x+r._tickLength, close]], opts);
344                    opts.color = prevColor;
345                }
346            }
347        }
348       
349        ctx.restore();
350    }; 
351   
352    $.jqplot.OHLCRenderer.prototype.drawShadow = function(ctx, gd, options) {
353        // This is a no-op, shadows drawn with lines.
354    };
355   
356    // called with scope of plot.
357    $.jqplot.OHLCRenderer.checkOptions = function(target, data, options) {
358        // provide some sensible highlighter options by default
359        // These aren't good for hlc, only for ohlc or candlestick
360        if (!options.highlighter) {
361            options.highlighter = {
362                showMarker:false,
363                tooltipAxes: 'y',
364                yvalues: 4,
365                formatString:'<table class="jqplot-highlighter"><tr><td>date:</td><td>%s</td></tr><tr><td>open:</td><td>%s</td></tr><tr><td>hi:</td><td>%s</td></tr><tr><td>low:</td><td>%s</td></tr><tr><td>close:</td><td>%s</td></tr></table>'
366            };
367        }
368    };
369   
370    //$.jqplot.preInitHooks.push($.jqplot.OHLCRenderer.checkOptions);
371   
372})(jQuery);   
Note: See TracBrowser for help on using the repository browser.