/** * 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($) { // Need to ensure pyramid axis and grid renderers are loaded. // You should load these with script tags in the html head, that is more efficient // as the browser will cache the request. // Note, have to block with synchronous request in order to execute bar renderer code. if ($.jqplot.PyramidAxisRenderer === undefined) { $.ajax({ url: $.jqplot.pluginLocation + 'jqplot.pyramidAxisRenderer.js', dataType: "script", async: false }); } if ($.jqplot.PyramidGridRenderer === undefined) { $.ajax({ url: $.jqplot.pluginLocation + 'jqplot.pyramidGridRenderer.js', dataType: "script", async: false }); } $.jqplot.PyramidRenderer = function(){ $.jqplot.LineRenderer.call(this); }; $.jqplot.PyramidRenderer.prototype = new $.jqplot.LineRenderer(); $.jqplot.PyramidRenderer.prototype.constructor = $.jqplot.PyramidRenderer; // called with scope of a series $.jqplot.PyramidRenderer.prototype.init = function(options, plot) { options = options || {}; this._type = 'pyramid'; // Group: Properties // // prop: barPadding this.barPadding = 10; this.barWidth = null; // prop: fill // True to fill the bars. this.fill = true; // prop: highlightMouseOver // True to highlight slice when moused over. // This must be false to enable highlightMouseDown to highlight when clicking on a slice. this.highlightMouseOver = true; // prop: highlightMouseDown // True to highlight when a mouse button is pressed over a slice. // This will be disabled if highlightMouseOver is true. this.highlightMouseDown = false; // prop: highlightColors // an array of colors to use when highlighting a slice. this.highlightColors = []; // prop highlightThreshold // Expand the highlightable region in the x direction. // E.g. a value of 3 will highlight a bar when the mouse is // within 3 pixels of the bar in the x direction. this.highlightThreshold = 2; // prop: synchronizeHighlight // Index of another series to highlight when this series is highlighted. // null or false to not synchronize. this.synchronizeHighlight = false; // prop: offsetBars // False will center bars on their y value. // True will push bars up by 1/2 bar width to fill between their y values. // If true, there needs to be 1 more tick than there are bars. this.offsetBars = false; // if user has passed in highlightMouseDown option and not set highlightMouseOver, disable highlightMouseOver if (options.highlightMouseDown && options.highlightMouseOver == null) { options.highlightMouseOver = false; } this.side = 'right'; $.extend(true, this, options); // if (this.fill === false) { // this.shadow = false; // } if (this.side === 'left') { this._highlightThreshold = [[-this.highlightThreshold, 0], [-this.highlightThreshold, 0], [0,0], [0,0]]; } else { this._highlightThreshold = [[0,0], [0,0], [this.highlightThreshold, 0], [this.highlightThreshold, 0]]; } this.renderer.options = options; // index of the currenty highlighted point, if any this._highlightedPoint = null; // Array of actual data colors used for each data point. this._dataColors = []; this._barPoints = []; this.fillAxis = 'y'; this._primaryAxis = '_yaxis'; this._xnudge = 0; // set the shape renderer options var opts = {lineJoin:'miter', lineCap:'butt', fill:this.fill, fillRect:this.fill, isarc:false, strokeStyle:this.color, fillStyle:this.color, closePath:this.fill, lineWidth: this.lineWidth}; this.renderer.shapeRenderer.init(opts); // set the shadow renderer options 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:'miter', lineCap:'butt', fill:this.fill, fillRect:this.fill, isarc:false, angle:this.shadowAngle, offset:shadow_offset, alpha:this.shadowAlpha, depth:this.shadowDepth, closePath:this.fill, lineWidth: this.lineWidth}; this.renderer.shadowRenderer.init(sopts); plot.postDrawHooks.addOnce(postPlotDraw); plot.eventListenerHooks.addOnce('jqplotMouseMove', handleMove); // if this is the left side of pyramid, set y values to negative. if (this.side === 'left') { for (var i=0, l=this.data.length; i= 0) { // xstart = this._xaxis.series_u2p(this._xnudge); w = gridData[i][0] - xstart; h = this.barWidth; points = [xstart, base - bw2 - yadj, w, h]; } else { // xstart = this._xaxis.series_u2p(0); w = xstart - gridData[i][0]; h = this.barWidth; points = [gridData[i][0], base - bw2 - yadj, w, h]; } this._barPoints.push([[points[0], points[1] + h], [points[0], points[1]], [points[0] + w, points[1]], [points[0] + w, points[1] + h]]); if (shadow) { this.renderer.shadowRenderer.draw(ctx, points); } var clr = opts.fillStyle || this.color; this._dataColors.push(clr); this.renderer.shapeRenderer.draw(ctx, points, opts); } else { if (i === 0) { points =[[xstart, ystart], [gridData[i][0], ystart], [gridData[i][0], gridData[i][1] - bw2 - yadj]]; } else if (i < l-1) { points = points.concat([[gridData[i-1][0], gridData[i-1][1] - bw2 - yadj], [gridData[i][0], gridData[i][1] + bw2 - yadj], [gridData[i][0], gridData[i][1] - bw2 - yadj]]); } // finally, draw the line else { points = points.concat([[gridData[i-1][0], gridData[i-1][1] - bw2 - yadj], [gridData[i][0], gridData[i][1] + bw2 - yadj], [gridData[i][0], yend], [xstart, yend]]); if (shadow) { this.renderer.shadowRenderer.draw(ctx, points); } var clr = opts.fillStyle || this.color; this._dataColors.push(clr); this.renderer.shapeRenderer.draw(ctx, points, opts); } } } } if (this.highlightColors.length == 0) { this.highlightColors = $.jqplot.computeHighlightColors(this._dataColors); } else if (typeof(this.highlightColors) == 'string') { this.highlightColors = []; for (var i=0; i= s.synchronizeHighlight && s.synchronizeHighlight !== sidx) { s = plot.series[s.synchronizeHighlight]; opts = {fillStyle: s.highlightColors[pidx], fillRect: false}; s.renderer.shapeRenderer.draw(canvas._ctx, s._barPoints[pidx], opts); } canvas = null; } function unhighlight (plot) { var canvas = plot.plugins.pyramidRenderer.highlightCanvas; canvas._ctx.clearRect(0,0, canvas._ctx.canvas.width, canvas._ctx.canvas.height); for (var i=0; i