/** * jqPlot * Pure JavaScript plotting plugin using jQuery * * Version: @VERSION * Revision: @REVISION * * Copyright (c) 2009-2013 Chris Leonello * jqPlot is currently available for use in all personal or commercial projects * under both the MIT (http://www.opensource.org/licenses/mit-license.php) and GPL * version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html) licenses. This means that you can * choose the license that best suits your project and use it accordingly. * * Although not required, the author would appreciate an email letting him * know of any substantial use of jqPlot. You can reach the author at: * chris at jqplot dot com or see http://www.jqplot.com/info.php . * * If you are feeling kind and generous, consider supporting the project by * making a donation at: http://www.jqplot.com/donate.php . * * sprintf functions contained in jqplot.sprintf.js by Ash Searle: * * version 2007.04.27 * author Ash Searle * http://hexmen.com/blog/2007/03/printf-sprintf/ * http://hexmen.com/js/sprintf.js * The author (Ash Searle) has placed this code in the public domain: * "This code is unrestricted: you are free to use it however you like." * */ (function($) { // Class: $.jqplot.LineRenderer // The default line renderer for jqPlot, this class has no options beyond the class. // Draws series as a line. $.jqplot.LineRenderer = function(){ this.shapeRenderer = new $.jqplot.ShapeRenderer(); this.shadowRenderer = new $.jqplot.ShadowRenderer(); }; // called with scope of series. $.jqplot.LineRenderer.prototype.init = function(options, plot) { // Group: Properties // options = options || {}; this._type='line'; this.renderer.animation = { show: false, direction: 'left', speed: 2500, _supported: true }; // prop: smooth // True to draw a smoothed (interpolated) line through the data points // with automatically computed number of smoothing points. // Set to an integer number > 2 to specify number of smoothing points // to use between each data point. this.renderer.smooth = false; // true or a number > 2 for smoothing. this.renderer.tension = null; // null to auto compute or a number typically > 6. Fewer points requires higher tension. // prop: constrainSmoothing // True to use a more accurate smoothing algorithm that will // not overshoot any data points. False to allow overshoot but // produce a smoother looking line. this.renderer.constrainSmoothing = true; // this is smoothed data in grid coordinates, like gridData this.renderer._smoothedData = []; // this is smoothed data in plot units (plot coordinates), like plotData. this.renderer._smoothedPlotData = []; this.renderer._hiBandGridData = []; this.renderer._lowBandGridData = []; this.renderer._hiBandSmoothedData = []; this.renderer._lowBandSmoothedData = []; // prop: bandData // Data used to draw error bands or confidence intervals above/below a line. // // bandData can be input in 3 forms. jqPlot will figure out which is the // low band line and which is the high band line for all forms: // // A 2 dimensional array like [[yl1, yl2, ...], [yu1, yu2, ...]] where // [yl1, yl2, ...] are y values of the lower line and // [yu1, yu2, ...] are y values of the upper line. // In this case there must be the same number of y data points as data points // in the series and the bands will inherit the x values of the series. // // A 2 dimensional array like [[[xl1, yl1], [xl2, yl2], ...], [[xh1, yh1], [xh2, yh2], ...]] // where [xl1, yl1] are x,y data points for the lower line and // [xh1, yh1] are x,y data points for the high line. // x values do not have to correspond to the x values of the series and can // be of any arbitrary length. // // Can be of form [[yl1, yu1], [yl2, yu2], [yl3, yu3], ...] where // there must be 3 or more arrays and there must be the same number of arrays // as there are data points in the series. In this case, // [yl1, yu1] specifies the lower and upper y values for the 1st // data point and so on. The bands will inherit the x // values from the series. this.renderer.bandData = []; // Group: bands // Banding around line, e.g error bands or confidence intervals. this.renderer.bands = { // prop: show // true to show the bands. If bandData or interval is // supplied, show will be set to true by default. show: false, hiData: [], lowData: [], // prop: color // color of lines at top and bottom of bands [default: series color]. color: this.color, // prop: showLines // True to show lines at top and bottom of bands [default: false]. showLines: false, // prop: fill // True to fill area between bands [default: true]. fill: true, // prop: fillColor // css color spec for filled area. [default: series color]. fillColor: null, _min: null, _max: null, // prop: interval // User specified interval above and below line for bands [default: '3%'']. // Can be a value like 3 or a string like '3%' // or an upper/lower array like [1, -2] or ['2%', '-1.5%'] interval: '3%' }; var lopts = {highlightMouseOver: options.highlightMouseOver, highlightMouseDown: options.highlightMouseDown, highlightColor: options.highlightColor}; delete (options.highlightMouseOver); delete (options.highlightMouseDown); delete (options.highlightColor); $.extend(true, this.renderer, options); this.renderer.options = options; // if we are given some band data, and bands aren't explicity set to false in options, turn them on. if (this.renderer.bandData.length > 1 && (!options.bands || options.bands.show == null)) { this.renderer.bands.show = true; } // if we are given an interval, and bands aren't explicity set to false in options, turn them on. else if (options.bands && options.bands.show == null && options.bands.interval != null) { this.renderer.bands.show = true; } // if plot is filled, turn off bands. if (this.fill) { this.renderer.bands.show = false; } if (this.renderer.bands.show) { this.renderer.initBands.call(this, this.renderer.options, plot); } // smoothing is not compatible with stacked lines, disable if (this._stack) { this.renderer.smooth = false; } // set the shape renderer options var opts = {lineJoin:this.lineJoin, lineCap:this.lineCap, fill:this.fill, isarc:false, strokeStyle:this.color, fillStyle:this.fillColor, lineWidth:this.lineWidth, linePattern:this.linePattern, closePath:this.fill}; this.renderer.shapeRenderer.init(opts); var shadow_offset = options.shadowOffset; // set the shadow renderer options if (shadow_offset == null) { // scale the shadowOffset to the width of the line. if (this.lineWidth > 2.5) { shadow_offset = 1.25 * (1 + (Math.atan((this.lineWidth/2.5))/0.785398163 - 1)*0.6); // var shadow_offset = this.shadowOffset; } // for skinny lines, don't make such a big shadow. else { shadow_offset = 1.25 * Math.atan((this.lineWidth/2.5))/0.785398163; } } var sopts = {lineJoin:this.lineJoin, lineCap:this.lineCap, fill:this.fill, isarc:false, angle:this.shadowAngle, offset:shadow_offset, alpha:this.shadowAlpha, depth:this.shadowDepth, lineWidth:this.lineWidth, linePattern:this.linePattern, closePath:this.fill}; this.renderer.shadowRenderer.init(sopts); this._areaPoints = []; this._boundingBox = [[],[]]; if (!this.isTrendline && this.fill || this.renderer.bands.show) { // Group: Properties // // prop: highlightMouseOver // True to highlight area on a filled plot when moused over. // This must be false to enable highlightMouseDown to highlight when clicking on an area on a filled plot. this.highlightMouseOver = true; // prop: highlightMouseDown // True to highlight when a mouse button is pressed over an area on a filled plot. // This will be disabled if highlightMouseOver is true. this.highlightMouseDown = false; // prop: highlightColor // color to use when highlighting an area on a filled plot. this.highlightColor = null; // if user has passed in highlightMouseDown option and not set highlightMouseOver, disable highlightMouseOver if (lopts.highlightMouseDown && lopts.highlightMouseOver == null) { lopts.highlightMouseOver = false; } $.extend(true, this, {highlightMouseOver: lopts.highlightMouseOver, highlightMouseDown: lopts.highlightMouseDown, highlightColor: lopts.highlightColor}); if (!this.highlightColor) { var fc = (this.renderer.bands.show) ? this.renderer.bands.fillColor : this.fillColor; this.highlightColor = $.jqplot.computeHighlightColors(fc); } // turn off (disable) the highlighter plugin if (this.highlighter) { this.highlighter.show = false; } } if (!this.isTrendline && plot) { plot.plugins.lineRenderer = {}; plot.postInitHooks.addOnce(postInit); plot.postDrawHooks.addOnce(postPlotDraw); plot.eventListenerHooks.addOnce('jqplotMouseMove', handleMove); plot.eventListenerHooks.addOnce('jqplotMouseDown', handleMouseDown); plot.eventListenerHooks.addOnce('jqplotMouseUp', handleMouseUp); plot.eventListenerHooks.addOnce('jqplotClick', handleClick); plot.eventListenerHooks.addOnce('jqplotRightClick', handleRightClick); } }; $.jqplot.LineRenderer.prototype.initBands = function(options, plot) { // use bandData if no data specified in bands option //var bd = this.renderer.bandData; var bd = options.bandData || []; var bands = this.renderer.bands; bands.hiData = []; bands.lowData = []; var data = this.data; bands._max = null; bands._min = null; // If 2 arrays, and each array greater than 2 elements, assume it is hi and low data bands of y values. if (bd.length == 2) { // Do we have an array of x,y values? // like [[[1,1], [2,4], [3,3]], [[1,3], [2,6], [3,5]]] if ($.isArray(bd[0][0])) { // since an arbitrary array of points, spin through all of them to determine max and min lines. var p; var bdminidx = 0, bdmaxidx = 0; for (var i = 0, l = bd[0].length; i bands._max) || bands._max == null) { bands._max = p[1]; } if ((p[1] != null && p[1] < bands._min) || bands._min == null) { bands._min = p[1]; } } for (var i = 0, l = bd[1].length; i bands._max) || bands._max == null) { bands._max = p[1]; bdmaxidx = 1; } if ((p[1] != null && p[1] < bands._min) || bands._min == null) { bands._min = p[1]; bdminidx = 1; } } if (bdmaxidx === bdminidx) { bands.show = false; } bands.hiData = bd[bdmaxidx]; bands.lowData = bd[bdminidx]; } // else data is arrays of y values // like [[1,4,3], [3,6,5]] // must have same number of band data points as points in series else if (bd[0].length === data.length && bd[1].length === data.length) { var hi = (bd[0][0] > bd[1][0]) ? 0 : 1; var low = (hi) ? 0 : 1; for (var i=0, l=data.length; i < l; i++) { bands.hiData.push([data[i][0], bd[hi][i]]); bands.lowData.push([data[i][0], bd[low][i]]); } } // we don't have proper data array, don't show bands. else { bands.show = false; } } // if more than 2 arrays, have arrays of [ylow, yhi] values. // note, can't distinguish case of [[ylow, yhi], [ylow, yhi]] from [[ylow, ylow], [yhi, yhi]] // this is assumed to be of the latter form. else if (bd.length > 2 && !$.isArray(bd[0][0])) { var hi = (bd[0][0] > bd[0][1]) ? 0 : 1; var low = (hi) ? 0 : 1; for (var i=0, l=bd.length; i bands._max) || bands._max == null) { bands._max = hd[i][1]; } } for (var i = 0, l = ld.length; i 0) { slope2 = Math.abs((gd[i][1] - gd[i-1][1]) / (gd[i][0] - gd[i-1][0])); } temp = slope2/scale + shift; a2 = stretch * tanh(temp) - stretch * tanh(shift) + min; a = (a1 + a2)/2.0; } else { a = tension; } for (t=0; t < steps; t++) { s = t / steps; h1 = (1 + 2*s)*Math.pow((1-s),2); h2 = s*Math.pow((1-s),2); h3 = Math.pow(s,2)*(3-2*s); h4 = Math.pow(s,2)*(s-1); if (gd[i-1]) { TiX = a * (gd[i+1][0] - gd[i-1][0]); TiY = a * (gd[i+1][1] - gd[i-1][1]); } else { TiX = a * (gd[i+1][0] - gd[i][0]); TiY = a * (gd[i+1][1] - gd[i][1]); } if (gd[i+2]) { Ti1X = a * (gd[i+2][0] - gd[i][0]); Ti1Y = a * (gd[i+2][1] - gd[i][1]); } else { Ti1X = a * (gd[i+1][0] - gd[i][0]); Ti1Y = a * (gd[i+1][1] - gd[i][1]); } pX = h1*gd[i][0] + h3*gd[i+1][0] + h2*TiX + h4*Ti1X; pY = h1*gd[i][1] + h3*gd[i+1][1] + h2*TiY + h4*Ti1Y; p = [pX, pY]; _smoothedData.push(p); _smoothedPlotData.push([xp(pX), yp(pY)]); } } _smoothedData.push(gd[l]); _smoothedPlotData.push([xp(gd[l][0]), yp(gd[l][1])]); return [_smoothedData, _smoothedPlotData]; } // setGridData // converts the user data values to grid coordinates and stores them // in the gridData array. // Called with scope of a series. $.jqplot.LineRenderer.prototype.setGridData = function(plot) { // recalculate the grid data var xp = this._xaxis.series_u2p; var yp = this._yaxis.series_u2p; var data = this._plotData; var pdata = this._prevPlotData; this.gridData = []; this._prevGridData = []; this.renderer._smoothedData = []; this.renderer._smoothedPlotData = []; this.renderer._hiBandGridData = []; this.renderer._lowBandGridData = []; this.renderer._hiBandSmoothedData = []; this.renderer._lowBandSmoothedData = []; var bands = this.renderer.bands; var hasNull = false; for (var i=0, l=data.length; i < l; i++) { // if not a line series or if no nulls in data, push the converted point onto the array. if (data[i][0] != null && data[i][1] != null) { this.gridData.push([xp.call(this._xaxis, data[i][0]), yp.call(this._yaxis, data[i][1])]); } // else if there is a null, preserve it. else if (data[i][0] == null) { hasNull = true; this.gridData.push([null, yp.call(this._yaxis, data[i][1])]); } else if (data[i][1] == null) { hasNull = true; this.gridData.push([xp.call(this._xaxis, data[i][0]), null]); } // if not a line series or if no nulls in data, push the converted point onto the array. if (pdata[i] != null && pdata[i][0] != null && pdata[i][1] != null) { this._prevGridData.push([xp.call(this._xaxis, pdata[i][0]), yp.call(this._yaxis, pdata[i][1])]); } // else if there is a null, preserve it. else if (pdata[i] != null && pdata[i][0] == null) { this._prevGridData.push([null, yp.call(this._yaxis, pdata[i][1])]); } else if (pdata[i] != null && pdata[i][0] != null && pdata[i][1] == null) { this._prevGridData.push([xp.call(this._xaxis, pdata[i][0]), null]); } } // don't do smoothing or bands on broken lines. if (hasNull) { this.renderer.smooth = false; if (this._type === 'line') { bands.show = false; } } if (this._type === 'line' && bands.show) { for (var i=0, l=bands.hiData.length; i 2) { var ret; if (this.renderer.constrainSmoothing) { ret = computeConstrainedSmoothedData.call(this, this.gridData); this.renderer._smoothedData = ret[0]; this.renderer._smoothedPlotData = ret[1]; if (bands.show) { ret = computeConstrainedSmoothedData.call(this, this.renderer._hiBandGridData); this.renderer._hiBandSmoothedData = ret[0]; ret = computeConstrainedSmoothedData.call(this, this.renderer._lowBandGridData); this.renderer._lowBandSmoothedData = ret[0]; } ret = null; } else { ret = computeHermiteSmoothedData.call(this, this.gridData); this.renderer._smoothedData = ret[0]; this.renderer._smoothedPlotData = ret[1]; if (bands.show) { ret = computeHermiteSmoothedData.call(this, this.renderer._hiBandGridData); this.renderer._hiBandSmoothedData = ret[0]; ret = computeHermiteSmoothedData.call(this, this.renderer._lowBandGridData); this.renderer._lowBandSmoothedData = ret[0]; } ret = null; } } }; // makeGridData // converts any arbitrary data values to grid coordinates and // returns them. This method exists so that plugins can use a series' // linerenderer to generate grid data points without overwriting the // grid data associated with that series. // Called with scope of a series. $.jqplot.LineRenderer.prototype.makeGridData = function(data, plot) { // recalculate the grid data var xp = this._xaxis.series_u2p; var yp = this._yaxis.series_u2p; var gd = []; var pgd = []; this.renderer._smoothedData = []; this.renderer._smoothedPlotData = []; this.renderer._hiBandGridData = []; this.renderer._lowBandGridData = []; this.renderer._hiBandSmoothedData = []; this.renderer._lowBandSmoothedData = []; var bands = this.renderer.bands; var hasNull = false; for (var i=0; i 2) { var ret; if (this.renderer.constrainSmoothing) { ret = computeConstrainedSmoothedData.call(this, gd); this.renderer._smoothedData = ret[0]; this.renderer._smoothedPlotData = ret[1]; if (bands.show) { ret = computeConstrainedSmoothedData.call(this, this.renderer._hiBandGridData); this.renderer._hiBandSmoothedData = ret[0]; ret = computeConstrainedSmoothedData.call(this, this.renderer._lowBandGridData); this.renderer._lowBandSmoothedData = ret[0]; } ret = null; } else { ret = computeHermiteSmoothedData.call(this, gd); this.renderer._smoothedData = ret[0]; this.renderer._smoothedPlotData = ret[1]; if (bands.show) { ret = computeHermiteSmoothedData.call(this, this.renderer._hiBandGridData); this.renderer._hiBandSmoothedData = ret[0]; ret = computeHermiteSmoothedData.call(this, this.renderer._lowBandGridData); this.renderer._lowBandSmoothedData = ret[0]; } ret = null; } } return gd; }; // called within scope of series. $.jqplot.LineRenderer.prototype.draw = function(ctx, gd, options, plot) { var i; // get a copy of the options, so we don't modify the original object. var opts = $.extend(true, {}, options); var shadow = (opts.shadow != undefined) ? opts.shadow : this.shadow; var showLine = (opts.showLine != undefined) ? opts.showLine : this.showLine; var fill = (opts.fill != undefined) ? opts.fill : this.fill; var fillAndStroke = (opts.fillAndStroke != undefined) ? opts.fillAndStroke : this.fillAndStroke; var xmin, ymin, xmax, ymax; ctx.save(); if (gd.length) { if (showLine) { // if we fill, we'll have to add points to close the curve. if (fill) { if (this.fillToZero) { // have to break line up into shapes at axis crossings var negativeColor = this.negativeColor; if (! this.useNegativeColors) { negativeColor = opts.fillStyle; } var isnegative = false; var posfs = opts.fillStyle; // if stoking line as well as filling, get a copy of line data. if (fillAndStroke) { var fasgd = gd.slice(0); } // if not stacked, fill down to axis if (this.index == 0 || !this._stack) { var tempgd = []; var pd = (this.renderer.smooth) ? this.renderer._smoothedPlotData : this._plotData; this._areaPoints = []; var pyzero = this._yaxis.series_u2p(this.fillToValue); var pxzero = this._xaxis.series_u2p(this.fillToValue); opts.closePath = true; if (this.fillAxis == 'y') { tempgd.push([gd[0][0], pyzero]); this._areaPoints.push([gd[0][0], pyzero]); for (var i=0; i0; i--) { gd.push(prev[i-1]); // this._areaPoints.push(prev[i-1]); } if (shadow) { this.renderer.shadowRenderer.draw(ctx, gd, opts); } this._areaPoints = gd; this.renderer.shapeRenderer.draw(ctx, gd, opts); } } ///////////////////////// // Not filled to zero //////////////////////// else { // if stoking line as well as filling, get a copy of line data. if (fillAndStroke) { var fasgd = gd.slice(0); } // if not stacked, fill down to axis if (this.index == 0 || !this._stack) { // var gridymin = this._yaxis.series_u2p(this._yaxis.min) - this.gridBorderWidth / 2; var gridymin = ctx.canvas.height; // IE doesn't return new length on unshift gd.unshift([gd[0][0], gridymin]); var len = gd.length; gd.push([gd[len - 1][0], gridymin]); } // if stacked, fill to line below else { var prev = this._prevGridData; for (var i=prev.length; i>0; i--) { gd.push(prev[i-1]); } } this._areaPoints = gd; if (shadow) { this.renderer.shadowRenderer.draw(ctx, gd, opts); } this.renderer.shapeRenderer.draw(ctx, gd, opts); } if (fillAndStroke) { var fasopts = $.extend(true, {}, opts, {fill:false, closePath:false}); this.renderer.shapeRenderer.draw(ctx, fasgd, fasopts); ////////// // TODO: figure out some way to do shadows nicely // if (shadow) { // this.renderer.shadowRenderer.draw(ctx, fasgd, fasopts); // } // now draw the markers if (this.markerRenderer.show) { if (this.renderer.smooth) { fasgd = this.gridData; } for (i=0; i p[0] || xmin == null) { xmin = p[0]; } if (ymax < p[1] || ymax == null) { ymax = p[1]; } if (xmax < p[0] || xmax == null) { xmax = p[0]; } if (ymin > p[1] || ymin == null) { ymin = p[1]; } } if (this.type === 'line' && this.renderer.bands.show) { ymax = this._yaxis.series_u2p(this.renderer.bands._min); ymin = this._yaxis.series_u2p(this.renderer.bands._max); } this._boundingBox = [[xmin, ymax], [xmax, ymin]]; // now draw the markers if (this.markerRenderer.show && !fill) { if (this.renderer.smooth) { gd = this.gridData; } for (i=0; i