svn commit: r945045 [2/3] - /ofbiz/trunk/framework/images/
Locked
 
|
Added: ofbiz/trunk/framework/images/webapp/images/flotr/flotr.debug-0.2.0-alpha.js URL: http://svn.apache.org/viewvc/ofbiz/trunk/framework/images/webapp/images/flotr/flotr.debug-0.2.0-alpha.js?rev=945045&view=auto ============================================================================== --- ofbiz/trunk/framework/images/webapp/images/flotr/flotr.debug-0.2.0-alpha.js (added) +++ ofbiz/trunk/framework/images/webapp/images/flotr/flotr.debug-0.2.0-alpha.js Mon May 17 09:33:34 2010 @@ -0,0 +1,3105 @@ +//Flotr 0.2.0-alpha Copyright (c) 2009 Bas Wenneker, <http://solutoire.com>, MIT License. +/* $Id: flotr.js 82 2009-01-12 19:19:31Z fabien.menager $ */ + +var Flotr = { + version: '0.2.0-alpha', + author: 'Bas Wenneker', + website: 'http://www.solutoire.com', + /** + * An object of the default registered graph types. Use Flotr.register(type, functionName) + * to add your own type. + */ + _registeredTypes:{ + 'lines': 'drawSeriesLines', + 'points': 'drawSeriesPoints', + 'bars': 'drawSeriesBars', + 'candles': 'drawSeriesCandles', + 'pie': 'drawSeriesPie' + }, + /** + * Can be used to register your own chart type. Default types are 'lines', 'points' and 'bars'. + * This is still experimental. + * @todo Test and confirm. + * @param {String} type - type of chart, like 'pies', 'bars' etc. + * @param {String} functionName - Name of the draw function, like 'drawSeriesPies', 'drawSeriesBars' etc. + */ + register: function(type, functionName){ + Flotr._registeredTypes[type] = functionName+''; + }, + /** + * Draws the graph. This function is here for backwards compatibility with Flotr version 0.1.0alpha. + * You could also draw graphs by directly calling Flotr.Graph(element, data, options). + * @param {Element} el - element to insert the graph into + * @param {Object} data - an array or object of dataseries + * @param {Object} options - an object containing options + * @param {Class} _GraphKlass_ - (optional) Class to pass the arguments to, defaults to Flotr.Graph + * @return {Class} returns a new graph object and of course draws the graph. + */ + draw: function(el, data, options, _GraphKlass_){ + _GraphKlass_ = _GraphKlass_ || Flotr.Graph; + return new _GraphKlass_(el, data, options); + }, + /** + * Collects dataseries from input and parses the series into the right format. It returns an Array + * of Objects each having at least the 'data' key set. + * @param {Array/Object} data - Object or array of dataseries + * @return {Array} Array of Objects parsed into the right format ({(...,) data: [[x1,y1], [x2,y2], ...] (, ...)}) + */ + getSeries: function(data){ + return data.collect(function(serie){ + var i, serie = (serie.data) ? Object.clone(serie) : {'data': serie}; + for (i = serie.data.length-1; i > -1; --i) { + serie.data[i][1] = (serie.data[i][1] === null ? null : parseFloat(serie.data[i][1])); + } + return serie; + }); + }, + /** + * Recursively merges two objects. + * @param {Object} src - source object (likely the object with the least properties) + * @param {Object} dest - destination object (optional, object with the most properties) + * @return {Object} recursively merged Object + */ + merge: function(src, dest){ + var result = dest || {}; + for(var i in src){ + result[i] = (src[i] != null && typeof(src[i]) == 'object' && !(src[i].constructor == Array || src[i].constructor == RegExp) && !Object.isElement(src[i])) ? Flotr.merge(src[i], dest[i]) : result[i] = src[i]; + } + return result; + }, + /** + * Function calculates the ticksize and returns it. + * @param {Integer} noTicks - number of ticks + * @param {Integer} min - lower bound integer value for the current axis + * @param {Integer} max - upper bound integer value for the current axis + * @param {Integer} decimals - number of decimals for the ticks + * @return {Integer} returns the ticksize in pixels + */ + getTickSize: function(noTicks, min, max, decimals){ + var delta = (max - min) / noTicks; + var magn = Flotr.getMagnitude(delta); + + // Norm is between 1.0 and 10.0. + var norm = delta / magn; + + var tickSize = 10; + if(norm < 1.5) tickSize = 1; + else if(norm < 2.25) tickSize = 2; + else if(norm < 3) tickSize = ((decimals == 0) ? 2 : 2.5); + else if(norm < 7.5) tickSize = 5; + + return tickSize * magn; + }, + /** + * Default tick formatter. + * @param {String/Integer} val - tick value integer + * @return {String} formatted tick string + */ + defaultTickFormatter: function(val){ + return val+''; + }, + /** + * Formats the mouse tracker values. + * @param {Object} obj - Track value Object {x:..,y:..} + * @return {String} Formatted track string + */ + defaultTrackFormatter: function(obj){ + return '('+obj.x+', '+obj.y+')'; + }, + defaultPieLabelFormatter: function(slice) { + return (slice.fraction*100).toFixed(2)+'%'; + }, + /** + * Returns the magnitude of the input value. + * @param {Integer/Float} x - integer or float value + * @return {Integer/Float} returns the magnitude of the input value + */ + getMagnitude: function(x){ + return Math.pow(10, Math.floor(Math.log(x) / Math.LN10)); + }, + toPixel: function(val){ + return Math.floor(val)+0.5;//((val-Math.round(val) < 0.4) ? (Math.floor(val)-0.5) : val); + }, + toRad: function(angle){ + return -angle * (Math.PI/180); + }, + /** + * Parses a color string and returns a corresponding Color. + * @param {String} str - string thats representing a color + * @return {Color} returns a Color object or false + */ + parseColor: function(str){ + if (str instanceof Flotr.Color) return str; + + var result, Color = Flotr.Color; + + // rgb(num,num,num) + if((result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(str))) + return new Color(parseInt(result[1]), parseInt(result[2]), parseInt(result[3])); + + // rgba(num,num,num,num) + if((result = /rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(str))) + return new Color(parseInt(result[1]), parseInt(result[2]), parseInt(result[3]), parseFloat(result[4])); + + // rgb(num%,num%,num%) + if((result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(str))) + return new Color(parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55); + + // rgba(num%,num%,num%,num) + if((result = /rgba\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(str))) + return new Color(parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55, parseFloat(result[4])); + + // #a0b1c2 + if((result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(str))) + return new Color(parseInt(result[1],16), parseInt(result[2],16), parseInt(result[3],16)); + + // #fff + if((result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(str))) + return new Color(parseInt(result[1]+result[1],16), parseInt(result[2]+result[2],16), parseInt(result[3]+result[3],16)); + + // Otherwise, we're most likely dealing with a named color. + var name = str.strip().toLowerCase(); + if(name == 'transparent'){ + return new Color(255, 255, 255, 0); + } + return ((result = Color.lookupColors[name])) ? new Color(result[0], result[1], result[2]) : false; + }, + /** + * Extracts the background-color of the passed element. + * @param {Element} element + * @return {String} color string + */ + extractColor: function(element){ + var color; + // Loop until we find an element with a background color and stop when we hit the body element. + do { + color = element.getStyle('background-color').toLowerCase(); + if(!(color == '' || color == 'transparent')) break; + element = element.up(0); + } while(!element.nodeName.match(/^body$/i)); + + // Catch Safari's way of signaling transparent. + return (color == 'rgba(0, 0, 0, 0)') ? 'transparent' : color; + } +}; +/** + * Flotr Graph class that plots a graph on creation. + + */ +Flotr.Graph = Class.create({ + /** + * Flotr Graph constructor. + * @param {Element} el - element to insert the graph into + * @param {Object} data - an array or object of dataseries + * @param {Object} options - an object containing options + */ + initialize: function(el, data, options){ + this.el = $(el); + + if (!this.el) throw 'The target container doesn\'t exist'; + + this.data = data; + this.series = Flotr.getSeries(data); + this.setOptions(options); + + // Initialize some variables + this.lastMousePos = { pageX: null, pageY: null }; + this.selection = { first: { x: -1, y: -1}, second: { x: -1, y: -1} }; + this.prevSelection = null; + this.selectionInterval = null; + this.ignoreClick = false; + this.prevHit = null; + + // Create and prepare canvas. + this.constructCanvas(); + + // Add event handlers for mouse tracking, clicking and selection + this.initEvents(); + + this.findDataRanges(); + this.calculateTicks(this.axes.x); + this.calculateTicks(this.axes.x2); + this.calculateTicks(this.axes.y); + this.calculateTicks(this.axes.y2); + + this.calculateSpacing(); + this.draw(); + this.insertLegend(); + + // Graph and Data tabs + if (this.options.spreadsheet.show) + this.constructTabs(); + }, + /** + * Sets options and initializes some variables and color specific values, used by the constructor. + * @param {Object} opts - options object + */ + setOptions: function(opts){ + var options = { + colors: ['#00A8F0', '#C0D800', '#CB4B4B', '#4DA74D', '#9440ED'], //=> The default colorscheme. When there are > 5 series, additional colors are generated. + title: null, + subtitle: null, + legend: { + show: true, // => setting to true will show the legend, hide otherwise + noColumns: 1, // => number of colums in legend table // @todo: doesn't work for HtmlText = false + labelFormatter: Prototype.K, // => fn: string -> string + labelBoxBorderColor: '#CCCCCC', // => border color for the little label boxes + labelBoxWidth: 14, + labelBoxHeight: 10, + labelBoxMargin: 5, + container: null, // => container (as jQuery object) to put legend in, null means default on top of graph + position: 'nw', // => position of default legend container within plot + margin: 5, // => distance from grid edge to default legend container within plot + backgroundColor: null, // => null means auto-detect + backgroundOpacity: 0.85// => set to 0 to avoid background, set to 1 for a solid background + }, + xaxis: { + ticks: null, // => format: either [1, 3] or [[1, 'a'], 3] + showLabels: true, // => setting to true will show the axis ticks labels, hide otherwise + labelsAngle: 0, // => Labels' angle, in degrees + title: null, // => axis title + titleAngle: 0, // => axis title's angle, in degrees + noTicks: 5, // => number of ticks for automagically generated ticks + tickFormatter: Flotr.defaultTickFormatter, // => fn: number -> string + tickDecimals: null, // => no. of decimals, null means auto + min: null, // => min. value to show, null means set automatically + max: null, // => max. value to show, null means set automatically + autoscaleMargin: 0, // => margin in % to add if auto-setting min/max + color: null + }, + x2axis: {}, + yaxis: { + ticks: null, // => format: either [1, 3] or [[1, 'a'], 3] + showLabels: true, // => setting to true will show the axis ticks labels, hide otherwise + labelsAngle: 0, // => Labels' angle, in degrees + title: null, // => axis title + titleAngle: 90, // => axis title's angle, in degrees + noTicks: 5, // => number of ticks for automagically generated ticks + tickFormatter: Flotr.defaultTickFormatter, // => fn: number -> string + tickDecimals: null, // => no. of decimals, null means auto + min: null, // => min. value to show, null means set automatically + max: null, // => max. value to show, null means set automatically + autoscaleMargin: 0, // => margin in % to add if auto-setting min/max + color: null + }, + y2axis: { + titleAngle: 270 + }, + points: { + show: false, // => setting to true will show points, false will hide + radius: 3, // => point radius (pixels) + lineWidth: 2, // => line width in pixels + fill: true, // => true to fill the points with a color, false for (transparent) no fill + fillColor: '#FFFFFF', // => fill color + fillOpacity: 0.4 + }, + lines: { + show: false, // => setting to true will show lines, false will hide + lineWidth: 2, // => line width in pixels + fill: false, // => true to fill the area from the line to the x axis, false for (transparent) no fill + fillColor: null, // => fill color + fillOpacity: 0.4 // => opacity of the fill color, set to 1 for a solid fill, 0 hides the fill + }, + bars: { + show: false, // => setting to true will show bars, false will hide + lineWidth: 2, // => in pixels + barWidth: 1, // => in units of the x axis + fill: true, // => true to fill the area from the line to the x axis, false for (transparent) no fill + fillColor: null, // => fill color + fillOpacity: 0.4, // => opacity of the fill color, set to 1 for a solid fill, 0 hides the fill + horizontal: false, + stacked: false + }, + candles: { + show: false, // => setting to true will show candle sticks, false will hide + lineWidth: 1, // => in pixels + wickLineWidth: 1, // => in pixels + candleWidth: 0.6, // => in units of the x axis + fill: true, // => true to fill the area from the line to the x axis, false for (transparent) no fill + upFillColor: '#00A8F0',// => up sticks fill color + downFillColor: '#CB4B4B',// => down sticks fill color + fillOpacity: 0.5, // => opacity of the fill color, set to 1 for a solid fill, 0 hides the fill + barcharts: false // => draw as barcharts (not standard bars but financial barcharts) + }, + pie: { + show: false, // => setting to true will show bars, false will hide + lineWidth: 1, // => in pixels + fill: true, // => true to fill the area from the line to the x axis, false for (transparent) no fill + fillColor: null, // => fill color + fillOpacity: 0.6, // => opacity of the fill color, set to 1 for a solid fill, 0 hides the fill + explode: 6, + sizeRatio: 0.6, + startAngle: Math.PI/4, + labelFormatter: Flotr.defaultPieLabelFormatter, + pie3D: false, + pie3DviewAngle: (Math.PI/2 * 0.8), + pie3DspliceThickness: 20 + }, + grid: { + color: '#545454', // => primary color used for outline and labels + backgroundColor: null, // => null for transparent, else color + tickColor: '#DDDDDD', // => color used for the ticks + labelMargin: 3, // => margin in pixels + verticalLines: true, // => whether to show gridlines in vertical direction + horizontalLines: true, // => whether to show gridlines in horizontal direction + outlineWidth: 2 // => width of the grid outline/border in pixels + }, + selection: { + mode: null, // => one of null, 'x', 'y' or 'xy' + color: '#B6D9FF', // => selection box color + fps: 20 // => frames-per-second + }, + mouse: { + track: false, // => true to track the mouse, no tracking otherwise + position: 'se', // => position of the value box (default south-east) + relative: false, // => next to the mouse cursor + trackFormatter: Flotr.defaultTrackFormatter, // => formats the values in the value box + margin: 5, // => margin in pixels of the valuebox + lineColor: '#FF3F19', // => line color of points that are drawn when mouse comes near a value of a series + trackDecimals: 1, // => decimals for the track values + sensibility: 2, // => the lower this number, the more precise you have to aim to show a value + radius: 3 // => radius of the track point + }, + shadowSize: 4, // => size of the 'fake' shadow + defaultType: 'lines', // => default series type + HtmlText: true, // => wether to draw the text using HTML or on the canvas + fontSize: 7.5, // => canvas' text font size + spreadsheet: { + show: false, // => show the data grid using two tabs + tabGraphLabel: 'Graph', + tabDataLabel: 'Data', + toolbarDownload: 'Download CSV', // @todo: add language support + toolbarSelectAll: 'Select all' + } + } + + options.x2axis = Object.extend(Object.clone(options.xaxis), options.x2axis); + options.y2axis = Object.extend(Object.clone(options.yaxis), options.y2axis); + this.options = Flotr.merge((opts || {}), options); + + this.axes = { + x: {options: this.options.xaxis, n: 1}, + x2: {options: this.options.x2axis, n: 2}, + y: {options: this.options.yaxis, n: 1}, + y2: {options: this.options.y2axis, n: 2} + }; + + // Initialize some variables used throughout this function. + var assignedColors = [], + colors = [], + ln = this.series.length, + neededColors = this.series.length, + oc = this.options.colors, + usedColors = [], + variation = 0, + c, i, j, s, tooClose; + + // Collect user-defined colors from series. + for(i = neededColors - 1; i > -1; --i){ + c = this.series[i].color; + if(c != null){ + --neededColors; + if(Object.isNumber(c)) assignedColors.push(c); + else usedColors.push(Flotr.parseColor(c)); + } + } + + // Calculate the number of colors that need to be generated. + for(i = assignedColors.length - 1; i > -1; --i) + neededColors = Math.max(neededColors, assignedColors[i] + 1); + + // Generate needed number of colors. + for(i = 0; colors.length < neededColors;){ + c = (oc.length == i) ? new Flotr.Color(100, 100, 100) : Flotr.parseColor(oc[i]); + + // Make sure each serie gets a different color. + var sign = variation % 2 == 1 ? -1 : 1; + var factor = 1 + sign * Math.ceil(variation / 2) * 0.2; + c.scale(factor, factor, factor); + + /** + * @todo if we're getting too close to something else, we should probably skip this one + */ + colors.push(c); + + if(++i >= oc.length){ + i = 0; + ++variation; + } + } + + // Fill the options with the generated colors. + for(i = 0, j = 0; i < ln; ++i){ + s = this.series[i]; + + // Assign the color. + if(s.color == null){ + s.color = colors[j++].toString(); + }else if(Object.isNumber(s.color)){ + s.color = colors[s.color].toString(); + } + + if (!s.xaxis) s.xaxis = this.axes.x; + if (s.xaxis == 1) s.xaxis = this.axes.x; + else if (s.xaxis == 2) s.xaxis = this.axes.x2; + + if (!s.yaxis) s.yaxis = this.axes.y; + if (s.yaxis == 1) s.yaxis = this.axes.y; + else if (s.yaxis == 2) s.yaxis = this.axes.y2; + + // Apply missing options to the series. + s.lines = Object.extend(Object.clone(this.options.lines), s.lines); + s.points = Object.extend(Object.clone(this.options.points), s.points); + s.bars = Object.extend(Object.clone(this.options.bars), s.bars); + s.candles = Object.extend(Object.clone(this.options.candles), s.candles); + s.pie = Object.extend(Object.clone(this.options.pie), s.pie); + s.mouse = Object.extend(Object.clone(this.options.mouse), s.mouse); + + if(s.shadowSize == null) s.shadowSize = this.options.shadowSize; + } + }, + /** + * Initializes the canvas and it's overlay canvas element. When the browser is IE, this makes use + * of excanvas. The overlay canvas is inserted for displaying interactions. After the canvas elements + * are created, the elements are inserted into the container element. + */ + constructCanvas: function(){ + var el = this.el, + size, c, oc; + + this.canvas = el.select('.flotr-canvas')[0]; + this.overlay = el.select('.flotr-overlay')[0]; + + el.childElements().invoke('remove'); + + // For positioning labels and overlay. + el.setStyle({position:'relative', cursor:'default'}); + + this.canvasWidth = el.getWidth(); + this.canvasHeight = el.getHeight(); + size = {'width': this.canvasWidth, 'height': this.canvasHeight}; + + if(this.canvasWidth <= 0 || this.canvasHeight <= 0){ + throw 'Invalid dimensions for plot, width = ' + this.canvasWidth + ', height = ' + this.canvasHeight; + } + + // Insert main canvas. + if (!this.canvas) { + c = this.canvas = new Element('canvas', size); + c.className = 'flotr-canvas'; + c = c.writeAttribute('style', 'position:absolute;left:0px;top:0px;'); + } else { + c = this.canvas.writeAttribute(size); + } + el.insert(c); + + if(Prototype.Browser.IE){ + c = window.G_vmlCanvasManager.initElement(c); + } + this.ctx = c.getContext('2d'); + + // Insert overlay canvas for interactive features. + if (!this.overlay) { + oc = this.overlay = new Element('canvas', size); + oc.className = 'flotr-overlay'; + oc = oc.writeAttribute('style', 'position:absolute;left:0px;top:0px;'); + } else { + oc = this.overlay.writeAttribute(size); + } + el.insert(oc); + + if(Prototype.Browser.IE){ + oc = window.G_vmlCanvasManager.initElement(oc); + } + this.octx = oc.getContext('2d'); + + // Enable text functions + if (window.CanvasText) { + CanvasText.enable(this.ctx); + CanvasText.enable(this.octx); + this.textEnabled = true; + } + }, + getTextDimensions: function(text, canvasStyle, HtmlStyle, className) { + if (!text) return {width:0, height:0}; + + if (!this.options.HtmlText && this.textEnabled) { + var bounds = this.ctx.getTextBounds(text, canvasStyle); + return { + width: bounds.width+2, + height: bounds.height+6 + }; + } + else { + var dummyDiv = this.el.insert('<div style="position:absolute;top:-10000px;'+HtmlStyle+'" class="'+className+' flotr-dummy-div">' + text + '</div>').select(".flotr-dummy-div")[0]; + dim = dummyDiv.getDimensions(); + dummyDiv.remove(); + return dim; + } + }, + loadDataGrid: function(){ + if (this.seriesData) return this.seriesData; + + var s = this.series; + var dg = []; + + /* The data grid is a 2 dimensions array. There is a row for each X value. + * Each row contains the x value and the corresponding y value for each serie ('undefined' if there isn't one) + **/ + for(i = 0; i < s.length; ++i){ + s[i].data.each(function(v) { + var x = v[0], + y = v[1]; + if (r = dg.find(function(row) {return row[0] == x})) { + r[i+1] = y; + } + else { + var newRow = []; + newRow[0] = x; + newRow[i+1] = y + dg.push(newRow); + } + }); + } + + // The data grid is sorted by x value + dg = dg.sortBy(function(v) { + return v[0]; + }); + return this.seriesData = dg; + }, + + // @todo: make a tab manager (Flotr.Tabs) + showTab: function(tabName, onComplete){ + var elementsClassNames = 'canvas, .flotr-labels, .flotr-legend, .flotr-legend-bg, .flotr-title, .flotr-subtitle'; + switch(tabName) { + case 'graph': + this.datagrid.up().hide(); + this.el.select(elementsClassNames).invoke('show'); + this.tabs.data.removeClassName('selected'); + this.tabs.graph.addClassName('selected'); + break; + case 'data': + this.constructDataGrid(); + this.datagrid.up().show(); + this.el.select(elementsClassNames).invoke('hide'); + this.tabs.data.addClassName('selected'); + this.tabs.graph.removeClassName('selected'); + break; + } + }, + constructTabs: function(){ + var tabsContainer = new Element('div', {className:'flotr-tabs-group', style:'position:absolute;left:0px;top:'+this.canvasHeight+'px;width:'+this.canvasWidth+'px;'}); + this.el.insert({bottom: tabsContainer}); + this.tabs = { + graph: new Element('div', {className:'flotr-tab selected', style:'float:left;'}).update(this.options.spreadsheet.tabGraphLabel), + data: new Element('div', {className:'flotr-tab', style:'float:left;'}).update(this.options.spreadsheet.tabDataLabel) + } + + tabsContainer.insert(this.tabs.graph).insert(this.tabs.data); + + this.el.setStyle({height: this.canvasHeight+this.tabs.data.getHeight()+2+'px'}); + + this.tabs.graph.observe('click', (function() {this.showTab('graph')}).bind(this)); + this.tabs.data.observe('click', (function() {this.showTab('data')}).bind(this)); + }, + + // @todo: make a spreadsheet manager (Flotr.Spreadsheet) + constructDataGrid: function(){ + // If the data grid has already been built, nothing to do here + if (this.datagrid) return this.datagrid; + + var i, j, + s = this.series, + datagrid = this.loadDataGrid(); + + var t = this.datagrid = new Element('table', {className:'flotr-datagrid', style:'height:100px;'}); + var colgroup = ['<colgroup><col />']; + + // First row : series' labels + var html = ['<tr class="first-row">']; + html.push('<th> </th>'); + for (i = 0; i < s.length; ++i) { + html.push('<th scope="col">'+(s[i].label || String.fromCharCode(65+i))+'</th>'); + colgroup.push('<col />'); + } + html.push('</tr>'); + + // Data rows + for (j = 0; j < datagrid.length; ++j) { + html.push('<tr>'); + for (i = 0; i < s.length+1; ++i) { + var tag = 'td'; + var content = (datagrid[j][i] != null ? Math.round(datagrid[j][i]*100000)/100000 : ''); + + if (i == 0) { + tag = 'th'; + var label; + if(this.options.xaxis.ticks) { + var tick = this.options.xaxis.ticks.find(function (x) { return x[0] == datagrid[j][i] }); + if (tick) label = tick[1]; + } + else { + label = this.options.xaxis.tickFormatter(content); + } + + if (label) content = label; + } + + html.push('<'+tag+(tag=='th'?' scope="row"':'')+'>'+content+'</'+tag+'>'); + } + html.push('</tr>'); + } + colgroup.push('</colgroup>'); + t.update(colgroup.join('')+html.join('')); + + if (!Prototype.Browser.IE) { + t.select('td').each(function(td) { + td.observe('mouseover', function(e){ + td = e.element(); + var siblings = td.previousSiblings(); + + t.select('th[scope=col]')[siblings.length-1].addClassName('hover'); + t.select('colgroup col')[siblings.length].addClassName('hover'); + }); + + td.observe('mouseout', function(){ + t.select('colgroup col.hover, th.hover').each(function(e){e.removeClassName('hover')}); + }); + }); + } + + var toolbar = new Element('div', {className: 'flotr-datagrid-toolbar'}). + insert(new Element('button', {type:'button', className:'flotr-datagrid-toolbar-button'}).update(this.options.spreadsheet.toolbarDownload).observe('click', this.downloadCSV.bind(this))). + insert(new Element('button', {type:'button', className:'flotr-datagrid-toolbar-button'}).update(this.options.spreadsheet.toolbarSelectAll).observe('click', this.selectAllData.bind(this))); + + var container = new Element('div', {className:'flotr-datagrid-container', style:'left:0px;top:0px;width:'+this.canvasWidth+'px;height:'+this.canvasHeight+'px;overflow:auto;'}); + container.insert(toolbar); + t.wrap(container.hide()); + + this.el.insert(container); + return t; + }, + selectAllData: function(){ + if (this.tabs) { + var selection, range, doc, win, node = this.constructDataGrid(); + + this.showTab('data'); + + // deferred to be able to select the table + (function () { + if ((doc = node.ownerDocument) && (win = doc.defaultView) && + win.getSelection && doc.createRange && + (selection = window.getSelection()) && + selection.removeAllRanges) { + range = doc.createRange(); + range.selectNode(node); + selection.removeAllRanges(); + selection.addRange(range); + } + else if (document.body && document.body.createTextRange && + (range = document.body.createTextRange())) { + range.moveToElementText(node); + range.select(); + } + }).defer(); + return true; + } + else return false; + }, + downloadCSV: function(){ + var i, csv = '"x"', + series = this.series, + dg = this.loadDataGrid(); + + for (i = 0; i < series.length; ++i) { + csv += '%09"'+(series[i].label || String.fromCharCode(65+i))+'"'; // \t + } + csv += "%0D%0A"; // \r\n + + for (i = 0; i < dg.length; ++i) { + if (this.options.xaxis.ticks) { + var tick = this.options.xaxis.ticks.find(function (x) { return x[0] == dg[i][0] }); + if (tick) dg[i][0] = tick[1]; + } else { + dg[i][0] = this.options.xaxis.tickFormatter(dg[i][0]); + } + csv += dg[i].join('%09')+"%0D%0A"; // \t and \r\n + } + if (Prototype.Browser.IE) { + csv = csv.gsub('%09', '\t').gsub('%0A', '\n').gsub('%0D', '\r'); + window.open().document.write(csv); + } + else { + window.open('data:text/csv,'+csv); + } + }, + /** + * Initializes event some handlers. + */ + initEvents: function () { + //@todo: maybe stopObserving with only flotr functions + this.overlay.stopObserving(); + this.overlay.observe('mousedown', this.mouseDownHandler.bind(this)); + this.overlay.observe('mousemove', this.mouseMoveHandler.bind(this)); + this.overlay.observe('click', this.clickHandler.bind(this)); + }, + /** + * Function determines the min and max values for the xaxis and yaxis. + */ + findDataRanges: function(){ + var s = this.series, + a = this.axes; + + a.x.datamin = 0; a.x.datamax = 0; + a.x2.datamin = 0; a.x2.datamax = 0; + a.y.datamin = 0; a.y.datamax = 0; + a.y2.datamin = 0; a.y2.datamax = 0; + + if(s.length > 0){ + var i, j, h, x, y, data, xaxis, yaxis; + + // Get datamin, datamax start values + for(i = 0; i < s.length; ++i) { + data = s[i].data, + xaxis = s[i].xaxis, + yaxis = s[i].yaxis; + + if (data.length > 0 && !s[i].hide) { + if (!xaxis.used) xaxis.datamin = xaxis.datamax = data[0][0]; + if (!yaxis.used) yaxis.datamin = yaxis.datamax = data[0][1]; + xaxis.used = true; + yaxis.used = true; + + for(h = data.length - 1; h > -1; --h){ + x = data[h][0]; + if(x < xaxis.datamin) xaxis.datamin = x; + else if(x > xaxis.datamax) xaxis.datamax = x; + + for(j = 1; j < data[h].length; j++){ + y = data[h][j]; + if(y < yaxis.datamin) yaxis.datamin = y; + else if(y > yaxis.datamax) yaxis.datamax = y; + } + } + } + } + } + + this.findXAxesValues(); + + this.calculateRange(a.x); + this.extendXRangeIfNeededByBar(a.x); + + if (a.x2.used) { + this.calculateRange(a.x2); + this.extendXRangeIfNeededByBar(a.x2); + } + + this.calculateRange(a.y); + this.extendYRangeIfNeededByBar(a.y); + + if (a.y2.used) { + this.calculateRange(a.y2); + this.extendYRangeIfNeededByBar(a.y2); + } + }, + /** + * Calculates the range of an axis to apply autoscaling. + */ + calculateRange: function(axis){ + var o = axis.options, + min = o.min != null ? o.min : axis.datamin, + max = o.max != null ? o.max : axis.datamax, + margin; + + if(max - min == 0.0){ + var widen = (max == 0.0) ? 1.0 : 0.01; + min -= widen; + max += widen; + } + axis.tickSize = Flotr.getTickSize(o.noTicks, min, max, o.tickDecimals); + + // Autoscaling. + if(o.min == null){ + // Add a margin. + margin = o.autoscaleMargin; + if(margin != 0){ + min -= axis.tickSize * margin; + + // Make sure we don't go below zero if all values are positive. + if(min < 0 && axis.datamin >= 0) min = 0; + min = axis.tickSize * Math.floor(min / axis.tickSize); + } + } + if(o.max == null){ + margin = o.autoscaleMargin; + if(margin != 0){ + max += axis.tickSize * margin; + if(max > 0 && axis.datamax <= 0) max = 0; + max = axis.tickSize * Math.ceil(max / axis.tickSize); + } + } + axis.min = min; + axis.max = max; + }, + /** + * Bar series autoscaling in x direction. + */ + extendXRangeIfNeededByBar: function(axis){ + if(axis.options.max == null){ + var newmax = axis.max, + i, s, b, c, + stackedSums = [], + lastSerie = null; + + for(i = 0; i < this.series.length; ++i){ + s = this.series[i]; + b = s.bars; + c = s.candles; + if(s.axis == axis && (b.show || c.show)) { + if (!b.horizontal && (b.barWidth + axis.datamax > newmax) || (c.candleWidth + axis.datamax > newmax)){ + newmax = axis.max + s.bars.barWidth; + } + if(b.stacked && b.horizontal){ + for (j = 0; j < s.data.length; j++) { + if (s.bars.show && s.bars.stacked) { + var x = s.data[j][0]; + stackedSums[x] = (stackedSums[x] || 0) + s.data[j][1]; + lastSerie = s; + } + } + + for (j = 0; j < stackedSums.length; j++) { + newmax = Math.max(stackedSums[j], newmax); + } + } + } + } + axis.lastSerie = lastSerie; + axis.max = newmax; + } + }, + /** + * Bar series autoscaling in y direction. + */ + extendYRangeIfNeededByBar: function(axis){ + if(axis.options.max == null){ + var newmax = axis.max, + i, s, b, c, + stackedSums = [], + lastSerie = null; + + for(i = 0; i < this.series.length; ++i){ + s = this.series[i]; + b = s.bars; + c = s.candles; + if (s.yaxis == axis && b.show && !s.hide) { + if (b.horizontal && (b.barWidth + axis.datamax > newmax) || (c.candleWidth + axis.datamax > newmax)){ + newmax = axis.max + b.barWidth; + } + if(b.stacked && !b.horizontal){ + for (j = 0; j < s.data.length; j++) { + if (s.bars.show && s.bars.stacked) { + var x = s.data[j][0]; + stackedSums[x] = (stackedSums[x] || 0) + s.data[j][1]; + lastSerie = s; + } + } + + for (j = 0; j < stackedSums.length; j++) { + newmax = Math.max(stackedSums[j], newmax); + } + } + } + } + axis.lastSerie = lastSerie; + axis.max = newmax; + } + }, + /** + * Find every values of the x axes + */ + findXAxesValues: function(){ + for(i = this.series.length-1; i > -1 ; --i){ + s = this.series[i]; + s.xaxis.values = s.xaxis.values || []; + for (j = s.data.length-1; j > -1 ; --j){ + s.xaxis.values[s.data[j][0]] = {}; + } + } + }, + /** + * Calculate axis ticks. + * @param {Object} axis - axis object + * @param {Object} o - axis options + */ + calculateTicks: function(axis){ + var o = axis.options, i, v; + + axis.ticks = []; + if(o.ticks){ + var ticks = o.ticks, t, label; + + if(Object.isFunction(ticks)){ + ticks = ticks({min: axis.min, max: axis.max}); + } + + // Clean up the user-supplied ticks, copy them over. + for(i = 0; i < ticks.length; ++i){ + t = ticks[i]; + if(typeof(t) == 'object'){ + v = t[0]; + label = (t.length > 1) ? t[1] : o.tickFormatter(v); + }else{ + v = t; + label = o.tickFormatter(v); + } + axis.ticks[i] = { v: v, label: label }; + } + } + else { + // Round to nearest multiple of tick size. + var start = axis.tickSize * Math.ceil(axis.min / axis.tickSize), + decimals; + + // Then store all possible ticks. + for(i = 0; start + i * axis.tickSize <= axis.max; ++i){ + v = start + i * axis.tickSize; + + // Round (this is always needed to fix numerical instability). + decimals = o.tickDecimals; + if(decimals == null) decimals = 1 - Math.floor(Math.log(axis.tickSize) / Math.LN10); + if(decimals < 0) decimals = 0; + + v = v.toFixed(decimals); + axis.ticks.push({ v: v, label: o.tickFormatter(v) }); + } + } + }, + /** + * Calculates axis label sizes. + */ + calculateSpacing: function(){ + var a = this.axes, + options = this.options, + series = this.series, + margin = options.grid.labelMargin, + x = a.x, + x2 = a.x2, + y = a.y, + y2 = a.y2, + maxOutset = 2, + i, j, l, dim; + + // Labels width and height + [x, x2, y, y2].each(function(axis) { + var maxLabel = ''; + + if (axis.options.showLabels) { + for(i = 0; i < axis.ticks.length; ++i){ + l = axis.ticks[i].label.length; + if(l > maxLabel.length){ + maxLabel = axis.ticks[i].label; + } + } + } + axis.maxLabel = this.getTextDimensions(maxLabel, {size:options.fontSize, angle: Flotr.toRad(axis.options.labelsAngle)}, 'font-size:smaller;', 'flotr-grid-label'); + axis.titleSize = this.getTextDimensions(axis.options.title, {size: options.fontSize*1.2, angle: Flotr.toRad(axis.options.titleAngle)}, 'font-weight:bold;', 'flotr-axis-title'); + }, this); + + // Title height + dim = this.getTextDimensions(options.title, {size: options.fontSize*1.5}, 'font-size:1em;font-weight:bold;', 'flotr-title'); + this.titleHeight = dim.height; + + // Subtitle height + dim = this.getTextDimensions(options.subtitle, {size: options.fontSize}, 'font-size:smaller;', 'flotr-subtitle'); + this.subtitleHeight = dim.height; + + // Grid outline line width. + if(options.show){ + maxOutset = Math.max(maxOutset, options.points.radius + options.points.lineWidth/2); + } + for(j = 0; j < options.length; ++j){ + if (series[j].points.show){ + maxOutset = Math.max(maxOutset, series[j].points.radius + series[j].points.lineWidth/2); + } + } + + var p = this.plotOffset = {left: 0, right: 0, top: 0, bottom: 0}; + p.left = p.right = p.top = p.bottom = maxOutset; + + p.bottom += (x.options.showLabels ? (x.maxLabel.height + margin) : 0) + + (x.options.title ? (x.titleSize.height + margin) : 0); + + p.top += (x2.options.showLabels ? (x2.maxLabel.height + margin) : 0) + + (x2.options.title ? (x2.titleSize.height + margin) : 0) + this.subtitleHeight + this.titleHeight; + + p.left += (y.options.showLabels ? (y.maxLabel.width + margin) : 0) + + (y.options.title ? (y.titleSize.width + margin) : 0); + + p.right += (y2.options.showLabels ? (y2.maxLabel.width + margin) : 0) + + (y2.options.title ? (y2.titleSize.width + margin) : 0); + + p.top = Math.floor(p.top); // In order the outline not to be blured + + this.plotWidth = this.canvasWidth - p.left - p.right; + this.plotHeight = this.canvasHeight - p.bottom - p.top; + + x.scale = this.plotWidth / (x.max - x.min); + x2.scale = this.plotWidth / (x2.max - x2.min); + y.scale = this.plotHeight / (y.max - y.min); + y2.scale = this.plotHeight / (y2.max - y2.min); + }, + /** + * Draws grid, labels and series. + */ + draw: function() { + this.drawGrid(); + this.drawLabels(); + this.drawTitles(); + + if(this.series.length){ + this.el.fire('flotr:beforedraw', [this.series, this]); + for(var i = 0; i < this.series.length; i++){ + if (!this.series[i].hide) + this.drawSeries(this.series[i]); + } + } + this.el.fire('flotr:afterdraw', [this.series, this]); + }, + /** + * Translates absolute horizontal x coordinates to relative coordinates. + * @param {Integer} x - absolute integer x coordinate + * @return {Integer} translated relative x coordinate + */ + tHoz: function(x, axis){ + axis = axis || this.axes.x; + return (x - axis.min) * axis.scale; + }, + /** + * Translates absolute vertical x coordinates to relative coordinates. + * @param {Integer} y - absolute integer y coordinate + * @return {Integer} translated relative y coordinate + */ + tVert: function(y, axis){ + axis = axis || this.axes.y; + return this.plotHeight - (y - axis.min) * axis.scale; + }, + /** + * Draws a grid for the graph. + */ + drawGrid: function(){ + var v, o = this.options, + ctx = this.ctx; + if(o.grid.verticalLines || o.grid.horizontalLines){ + this.el.fire('flotr:beforegrid', [this.axes.x, this.axes.y, o, this]); + } + ctx.save(); + ctx.translate(this.plotOffset.left, this.plotOffset.top); + + // Draw grid background, if present in options. + if(o.grid.backgroundColor != null){ + ctx.fillStyle = o.grid.backgroundColor; + ctx.fillRect(0, 0, this.plotWidth, this.plotHeight); + } + + // Draw grid lines in vertical direction. + ctx.lineWidth = 1; + ctx.strokeStyle = o.grid.tickColor; + ctx.beginPath(); + if(o.grid.verticalLines){ + for(var i = 0; i < this.axes.x.ticks.length; ++i){ + v = this.axes.x.ticks[i].v; + // Don't show lines on upper and lower bounds. + if ((v == this.axes.x.min || v == this.axes.x.max) && o.grid.outlineWidth != 0) + continue; + + ctx.moveTo(Math.floor(this.tHoz(v)) + ctx.lineWidth/2, 0); + ctx.lineTo(Math.floor(this.tHoz(v)) + ctx.lineWidth/2, this.plotHeight); + } + } + + // Draw grid lines in horizontal direction. + if(o.grid.horizontalLines){ + for(var j = 0; j < this.axes.y.ticks.length; ++j){ + v = this.axes.y.ticks[j].v; + // Don't show lines on upper and lower bounds. + if ((v == this.axes.y.min || v == this.axes.y.max) && o.grid.outlineWidth != 0) + continue; + + ctx.moveTo(0, Math.floor(this.tVert(v)) + ctx.lineWidth/2); + ctx.lineTo(this.plotWidth, Math.floor(this.tVert(v)) + ctx.lineWidth/2); + } + } + ctx.stroke(); + + // Draw axis/grid border. + if(o.grid.outlineWidth != 0) { + ctx.lineWidth = o.grid.outlineWidth; + ctx.strokeStyle = o.grid.color; + ctx.lineJoin = 'round'; + ctx.strokeRect(0, 0, this.plotWidth, this.plotHeight); + } + ctx.restore(); + if(o.grid.verticalLines || o.grid.horizontalLines){ + this.el.fire('flotr:aftergrid', [this.axes.x, this.axes.y, o, this]); + } + }, + /** + * Draws labels for x and y axis. + */ + drawLabels: function(){ + // Construct fixed width label boxes, which can be styled easily. + var noLabels = 0, axis, + xBoxWidth, i, html, tick, + options = this.options, + ctx = this.ctx, + a = this.axes; + + for(i = 0; i < a.x.ticks.length; ++i){ + if (a.x.ticks[i].label) { + ++noLabels; + } + } + xBoxWidth = this.plotWidth / noLabels; + + if (!options.HtmlText && this.textEnabled) { + var style = { + size: options.fontSize, + adjustAlign: true + }; + + // Add x labels. + axis = a.x; + style.color = axis.options.color || options.grid.color; + for(i = 0; i < axis.ticks.length && axis.options.showLabels && axis.used; ++i){ + tick = axis.ticks[i]; + if(!tick.label || tick.label.length == 0) continue; + + style.angle = Flotr.toRad(axis.options.labelsAngle); + style.halign = 'c'; + style.valign = 't'; + + ctx.drawText( + tick.label, + this.plotOffset.left + this.tHoz(tick.v, axis), + this.plotOffset.top + this.plotHeight + options.grid.labelMargin, + style + ); + } + + // Add x2 labels. + axis = a.x2; + style.color = axis.options.color || options.grid.color; + for(i = 0; i < axis.ticks.length && axis.options.showLabels && axis.used; ++i){ + tick = axis.ticks[i]; + if(!tick.label || tick.label.length == 0) continue; + + style.angle = Flotr.toRad(axis.options.labelsAngle); + style.halign = 'c'; + style.valign = 'b'; + + ctx.drawText( + tick.label, + this.plotOffset.left + this.tHoz(tick.v, axis), + this.plotOffset.top + options.grid.labelMargin, + style + ); + } + + // Add y labels. + axis = a.y; + style.color = axis.options.color || options.grid.color; + for(i = 0; i < axis.ticks.length && axis.options.showLabels && axis.used; ++i){ + tick = axis.ticks[i]; + if (!tick.label || tick.label.length == 0) continue; + + style.angle = Flotr.toRad(axis.options.labelsAngle); + style.halign = 'r'; + style.valign = 'm'; + + ctx.drawText( + tick.label, + this.plotOffset.left - options.grid.labelMargin, + this.plotOffset.top + this.tVert(tick.v, axis), + style + ); + } + + // Add y2 labels. + axis = a.y2; + style.color = axis.options.color || options.grid.color; + for(i = 0; i < axis.ticks.length && axis.options.showLabels && axis.used; ++i){ + tick = axis.ticks[i]; + if (!tick.label || tick.label.length == 0) continue; + + style.angle = Flotr.toRad(axis.options.labelsAngle); + style.halign = 'l'; + style.valign = 'm'; + + ctx.drawText( + tick.label, + this.plotOffset.left + this.plotWidth + options.grid.labelMargin, + this.plotOffset.top + this.tVert(tick.v, axis), + style + ); + + ctx.save(); + ctx.strokeStyle = style.color; + ctx.beginPath(); + ctx.moveTo(this.plotOffset.left + this.plotWidth - 8, this.plotOffset.top + this.tVert(tick.v, axis)); + ctx.lineTo(this.plotOffset.left + this.plotWidth, this.plotOffset.top + this.tVert(tick.v, axis)); + ctx.stroke(); + ctx.restore(); + } + } + else if (a.x.options.showLabels || + a.x2.options.showLabels || + a.y.options.showLabels || + a.y2.options.showLabels) { + html = ['<div style="font-size:smaller;color:' + options.grid.color + ';" class="flotr-labels">']; + + // Add x labels. + axis = a.x; + if (axis.options.showLabels){ + for(i = 0; i < axis.ticks.length; ++i){ + tick = axis.ticks[i]; + if(!tick.label || tick.label.length == 0) continue; + html.push('<div style="position:absolute;top:' + (this.plotOffset.top + this.plotHeight + options.grid.labelMargin) + 'px;left:' + (this.plotOffset.left + this.tHoz(tick.v, axis) - xBoxWidth/2) + 'px;width:' + xBoxWidth + 'px;text-align:center;'+(axis.options.color?('color:'+axis.options.color+';'):'')+'" class="flotr-grid-label">' + tick.label + '</div>'); + } + } + + // Add x2 labels. + axis = a.x2; + if (axis.options.showLabels && axis.used){ + for(i = 0; i < axis.ticks.length; ++i){ + tick = axis.ticks[i]; + if(!tick.label || tick.label.length == 0) continue; + html.push('<div style="position:absolute;top:' + (this.plotOffset.top - options.grid.labelMargin - axis.maxLabel.height) + 'px;left:' + (this.plotOffset.left + this.tHoz(tick.v, axis) - xBoxWidth/2) + 'px;width:' + xBoxWidth + 'px;text-align:center;'+(axis.options.color?('color:'+axis.options.color+';'):'')+'" class="flotr-grid-label">' + tick.label + '</div>'); + } + } + + // Add y labels. + axis = a.y; + if (axis.options.showLabels){ + for(i = 0; i < axis.ticks.length; ++i){ + tick = axis.ticks[i]; + if (!tick.label || tick.label.length == 0) continue; + html.push('<div style="position:absolute;top:' + (this.plotOffset.top + this.tVert(tick.v, axis) - axis.maxLabel.height/2) + 'px;left:0;width:' + (this.plotOffset.left - options.grid.labelMargin) + 'px;text-align:right;'+(axis.options.color?('color:'+axis.options.color+';'):'')+'" class="flotr-grid-label">' + tick.label + '</div>'); + } + } + + // Add y2 labels. + axis = a.y2; + if (axis.options.showLabels && axis.used){ + ctx.save(); + ctx.strokeStyle = axis.options.color || options.grid.color; + ctx.beginPath(); + + for(i = 0; i < axis.ticks.length; ++i){ + tick = axis.ticks[i]; + if (!tick.label || tick.label.length == 0) continue; + html.push('<div style="position:absolute;top:' + (this.plotOffset.top + this.tVert(tick.v, axis) - axis.maxLabel.height/2) + 'px;right:0;width:' + (this.plotOffset.right - options.grid.labelMargin) + 'px;text-align:left;'+(axis.options.color?('color:'+axis.options.color+';'):'')+'" class="flotr-grid-label">' + tick.label + '</div>'); + + ctx.moveTo(this.plotOffset.left + this.plotWidth - 8, this.plotOffset.top + this.tVert(tick.v, axis)); + ctx.lineTo(this.plotOffset.left + this.plotWidth, this.plotOffset.top + this.tVert(tick.v, axis)); + } + ctx.stroke(); + ctx.restore(); + } + + html.push('</div>'); + this.el.insert(html.join('')); + } + }, + /** + * Draws the title and the subtitle + */ + drawTitles: function(){ + var html, + options = this.options, + margin = options.grid.labelMargin, + ctx = this.ctx, + a = this.axes; + + if (!options.HtmlText && this.textEnabled) { + var style = { + size: options.fontSize, + color: options.grid.color, + halign: 'c' + }; + + // Add subtitle + if (options.subtitle){ + ctx.drawText( + options.subtitle, + this.plotOffset.left + this.plotWidth/2, + this.titleHeight + this.subtitleHeight - 2, + style + ); + } + + style.weight = 1.5; + style.size *= 1.5; + + // Add title + if (options.title){ + ctx.drawText( + options.title, + this.plotOffset.left + this.plotWidth/2, + this.titleHeight - 2, + style + ); + } + + style.weight = 1.8; + style.size *= 0.8; + style.adjustAlign = true; + + // Add x axis title + if (a.x.options.title && a.x.used){ + style.halign = 'c'; + style.valign = 't'; + style.angle = Flotr.toRad(a.x.options.titleAngle); + ctx.drawText( + a.x.options.title, + this.plotOffset.left + this.plotWidth/2, + this.plotOffset.top + a.x.maxLabel.height + this.plotHeight + 2 * margin, + style + ); + } + + // Add x2 axis title + if (a.x2.options.title && a.x2.used){ + style.halign = 'c'; + style.valign = 'b'; + style.angle = Flotr.toRad(a.x2.options.titleAngle); + ctx.drawText( + a.x2.options.title, + this.plotOffset.left + this.plotWidth/2, + this.plotOffset.top - a.x2.maxLabel.height - 2 * margin, + style + ); + } + + // Add y axis title + if (a.y.options.title && a.y.used){ + style.halign = 'r'; + style.valign = 'm'; + style.angle = Flotr.toRad(a.y.options.titleAngle); + ctx.drawText( + a.y.options.title, + this.plotOffset.left - a.y.maxLabel.width - 2 * margin, + this.plotOffset.top + this.plotHeight / 2, + style + ); + } + + // Add y2 axis title + if (a.y2.options.title && a.y2.used){ + style.halign = 'l'; + style.valign = 'm'; + style.angle = Flotr.toRad(a.y2.options.titleAngle); + ctx.drawText( + a.y2.options.title, + this.plotOffset.left + this.plotWidth + a.y2.maxLabel.width + 2 * margin, + this.plotOffset.top + this.plotHeight / 2, + style + ); + } + } + else { + html = ['<div style="color:'+options.grid.color+';" class="flotr-titles">']; + + // Add title + if (options.title){ + html.push('<div style="position:absolute;top:0;left:'+this.plotOffset.left+'px;font-size:1em;font-weight:bold;text-align:center;width:'+this.plotWidth+'px;" class="flotr-title">'+options.title+'</div>'); + } + + // Add subtitle + if (options.subtitle){ + html.push('<div style="position:absolute;top:'+this.titleHeight+'px;left:'+this.plotOffset.left+'px;font-size:smaller;text-align:center;width:'+this.plotWidth+'px;" class="flotr-subtitle">'+options.subtitle+'</div>'); + } + html.push('</div>'); + + + html.push('<div class="flotr-axis-title" style="font-weight:bold;">'); + // Add x axis title + if (a.x.options.title && a.x.used){ + html.push('<div style="position:absolute;top:' + (this.plotOffset.top + this.plotHeight + options.grid.labelMargin + a.x.titleSize.height) + 'px;left:' + this.plotOffset.left + 'px;width:' + this.plotWidth + 'px;text-align:center;" class="flotr-axis-title">' + a.x.options.title + '</div>'); + } + + // Add x2 axis title + if (a.x2.options.title && a.x2.used){ + html.push('<div style="position:absolute;top:0;left:' + this.plotOffset.left + 'px;width:' + this.plotWidth + 'px;text-align:center;" class="flotr-axis-title">' + a.x2.options.title + '</div>'); + } + + // Add y axis title + if (a.y.options.title && a.y.used){ + html.push('<div style="position:absolute;top:' + (this.plotOffset.top + this.plotHeight/2 - a.y.titleSize.height/2) + 'px;left:0;text-align:right;" class="flotr-axis-title">' + a.y.options.title + '</div>'); + } + + // Add y2 axis title + if (a.y2.options.title && a.y2.used){ + html.push('<div style="position:absolute;top:' + (this.plotOffset.top + this.plotHeight/2 - a.y.titleSize.height/2) + 'px;right:0;text-align:right;" class="flotr-axis-title">' + a.y2.options.title + '</div>'); + } + html.push('</div>'); + + this.el.insert(html.join('')); + } + }, + /** + * Actually draws the graph. + * @param {Object} series - series to draw + */ + drawSeries: function(series){ + series = series || this.series; + + var drawn = false; + for(var type in Flotr._registeredTypes){ + if(series[type] && series[type].show){ + this[Flotr._registeredTypes[type]](series); + drawn = true; + } + } + + if(!drawn){ + this[Flotr._registeredTypes[this.options.defaultType]](series); + } + }, + + plotLine: function(series, offset){ + var ctx = this.ctx, + xa = series.xaxis, + ya = series.yaxis, + tHoz = this.tHoz.bind(this), + tVert = this.tVert.bind(this), + data = series.data; + + if(data.length < 2) return; + + var prevx = tHoz(data[0][0], xa), + prevy = tVert(data[0][1], ya) + offset; + + ctx.beginPath(); + ctx.moveTo(prevx, prevy); + for(var i = 0; i < data.length - 1; ++i){ + var x1 = data[i][0], y1 = data[i][1], + x2 = data[i+1][0], y2 = data[i+1][1]; + + // To allow empty values + if (y1 === null || y2 === null) continue; + + /** + * Clip with ymin. + */ + if(y1 <= y2 && y1 < ya.min){ + /** + * Line segment is outside the drawing area. + */ + if(y2 < ya.min) continue; + + /** + * Compute new intersection point. + */ + x1 = (ya.min - y1) / (y2 - y1) * (x2 - x1) + x1; + y1 = ya.min; + }else if(y2 <= y1 && y2 < ya.min){ + if(y1 < ya.min) continue; + x2 = (ya.min - y1) / (y2 - y1) * (x2 - x1) + x1; + y2 = ya.min; + } + + /** + * Clip with ymax. + */ + if(y1 >= y2 && y1 > ya.max) { + if(y2 > ya.max) continue; + x1 = (ya.max - y1) / (y2 - y1) * (x2 - x1) + x1; + y1 = ya.max; + } + else if(y2 >= y1 && y2 > ya.max){ + if(y1 > ya.max) continue; + x2 = (ya.max - y1) / (y2 - y1) * (x2 - x1) + x1; + y2 = ya.max; + } + + /** + * Clip with xmin. + */ + if(x1 <= x2 && x1 < xa.min){ + if(x2 < xa.min) continue; + y1 = (xa.min - x1) / (x2 - x1) * (y2 - y1) + y1; + x1 = xa.min; + }else if(x2 <= x1 && x2 < xa.min){ + if(x1 < xa.min) continue; + y2 = (xa.min - x1) / (x2 - x1) * (y2 - y1) + y1; + x2 = xa.min; + } + + /** + * Clip with xmax. + */ + if(x1 >= x2 && x1 > xa.max){ + if (x2 > xa.max) continue; + y1 = (xa.max - x1) / (x2 - x1) * (y2 - y1) + y1; + x1 = xa.max; + }else if(x2 >= x1 && x2 > xa.max){ + if(x1 > xa.max) continue; + y2 = (xa.max - x1) / (x2 - x1) * (y2 - y1) + y1; + x2 = xa.max; + } + + if(prevx != tHoz(x1, xa) || prevy != tVert(y1, ya) + offset) + ctx.moveTo(tHoz(x1, xa), tVert(y1, ya) + offset); + + prevx = tHoz(x2, xa); + prevy = tVert(y2, ya) + offset; + ctx.lineTo(prevx, prevy); + } + ctx.stroke(); + }, + /** + * Function used to fill + * @param {Object} data + */ + plotLineArea: function(series, offset){ + var data = series.data; + if(data.length < 2) return; + + var top, lastX = 0, + ctx = this.ctx, + xa = series.xaxis, + ya = series.yaxis, + tHoz = this.tHoz.bind(this), + tVert = this.tVert.bind(this), + bottom = Math.min(Math.max(0, ya.min), ya.max), + first = true; + + ctx.beginPath(); + for(var i = 0; i < data.length - 1; ++i){ + + var x1 = data[i][0], y1 = data[i][1], + x2 = data[i+1][0], y2 = data[i+1][1]; + + if(x1 <= x2 && x1 < xa.min){ + if(x2 < xa.min) continue; + y1 = (xa.min - x1) / (x2 - x1) * (y2 - y1) + y1; + x1 = xa.min; + }else if(x2 <= x1 && x2 < xa.min){ + if(x1 < xa.min) continue; + y2 = (xa.min - x1) / (x2 - x1) * (y2 - y1) + y1; + x2 = xa.min; + } + + if(x1 >= x2 && x1 > xa.max){ + if(x2 > xa.max) continue; + y1 = (xa.max - x1) / (x2 - x1) * (y2 - y1) + y1; + x1 = xa.max; + }else if(x2 >= x1 && x2 > xa.max){ + if (x1 > xa.max) continue; + y2 = (xa.max - x1) / (x2 - x1) * (y2 - y1) + y1; + x2 = xa.max; + } + + if(first){ + ctx.moveTo(tHoz(x1, xa), tVert(bottom, ya) + offset); + first = false; + } + + /** + * Now check the case where both is outside. + */ + if(y1 >= ya.max && y2 >= ya.max){ + ctx.lineTo(tHoz(x1, xa), tVert(ya.max, ya) + offset); + ctx.lineTo(tHoz(x2, xa), tVert(ya.max, ya) + offset); + continue; + }else if(y1 <= ya.min && y2 <= ya.min){ + ctx.lineTo(tHoz(x1, xa), tVert(ya.min, ya) + offset); + ctx.lineTo(tHoz(x2, xa), tVert(ya.min, ya) + offset); + continue; + } + + /** + * Else it's a bit more complicated, there might + * be two rectangles and two triangles we need to fill + * in; to find these keep track of the current x values. + */ + var x1old = x1, x2old = x2; + + /** + * And clip the y values, without shortcutting. + * Clip with ymin. + */ + if(y1 <= y2 && y1 < ya.min && y2 >= ya.min){ + x1 = (ya.min - y1) / (y2 - y1) * (x2 - x1) + x1; + y1 = ya.min; + }else if(y2 <= y1 && y2 < ya.min && y1 >= ya.min){ + x2 = (ya.min - y1) / (y2 - y1) * (x2 - x1) + x1; + y2 = ya.min; + } + + /** + * Clip with ymax. + */ + if(y1 >= y2 && y1 > ya.max && y2 <= ya.max){ + x1 = (ya.max - y1) / (y2 - y1) * (x2 - x1) + x1; + y1 = ya.max; + }else if(y2 >= y1 && y2 > ya.max && y1 <= ya.max){ + x2 = (ya.max - y1) / (y2 - y1) * (x2 - x1) + x1; + y2 = ya.max; + } + + /** + * If the x value was changed we got a rectangle to fill. + */ + if(x1 != x1old){ + top = (y1 <= ya.min) ? top = ya.min : ya.max; + ctx.lineTo(tHoz(x1old, xa), tVert(top, ya) + offset); + ctx.lineTo(tHoz(x1, xa), tVert(top, ya) + offset); + } + + /** + * Fill the triangles. + */ + ctx.lineTo(tHoz(x1, xa), tVert(y1, ya) + offset); + ctx.lineTo(tHoz(x2, xa), tVert(y2, ya) + offset); + + /** + * Fill the other rectangle if it's there. + */ + if(x2 != x2old){ + top = (y2 <= ya.min) ? ya.min : ya.max; + ctx.lineTo(tHoz(x2old, xa), tVert(top, ya) + offset); + ctx.lineTo(tHoz(x2, xa), tVert(top, ya) + offset); + } + + lastX = Math.max(x2, x2old); + } + + ctx.lineTo(tHoz(lastX, xa), tVert(bottom, ya) + offset); + ctx.closePath(); + ctx.fill(); + }, + /** + * Function: (private) drawSeriesLines + * + * Function draws lines series in the canvas element. + * + * Parameters: + * series - Series with options.lines.show = true. + * + * Returns: + * void + */ + drawSeriesLines: function(series){ + series = series || this.series; + var ctx = this.ctx; + ctx.save(); + ctx.translate(this.plotOffset.left, this.plotOffset.top); + ctx.lineJoin = 'round'; + + var lw = series.lines.lineWidth; + var sw = series.shadowSize; + + if(sw > 0){ + ctx.lineWidth = sw / 2; + + var offset = lw/2 + ctx.lineWidth/2; + + ctx.strokeStyle = "rgba(0,0,0,0.1)"; + this.plotLine(series, offset + sw/2); + + ctx.strokeStyle = "rgba(0,0,0,0.2)"; + this.plotLine(series, offset); + + if(series.lines.fill) { + ctx.fillStyle = "rgba(0,0,0,0.05)"; + this.plotLineArea(series, offset + sw/2); + } + } + + ctx.lineWidth = lw; + ctx.strokeStyle = series.color; + if(series.lines.fill){ + ctx.fillStyle = series.lines.fillColor != null ? series.lines.fillColor : Flotr.parseColor(series.color).scale(null, null, null, series.lines.fillOpacity).toString(); + this.plotLineArea(series, 0); + } + + this.plotLine(series, 0); + ctx.restore(); + }, + /** + * Function: drawSeriesPoints + * + * Function draws point series in the canvas element. + * + * Parameters: + * series - Series with options.points.show = true. + * + * Returns: + * void + */ + drawSeriesPoints: function(series) { + var ctx = this.ctx; + + ctx.save(); + ctx.translate(this.plotOffset.left, this.plotOffset.top); + + var lw = series.lines.lineWidth; + var sw = series.shadowSize; + + if(sw > 0){ + ctx.lineWidth = sw / 2; + + ctx.strokeStyle = 'rgba(0,0,0,0.1)'; + this.plotPointShadows(series, sw/2 + ctx.lineWidth/2, series.points.radius); + + ctx.strokeStyle = 'rgba(0,0,0,0.2)'; + this.plotPointShadows(series, ctx.lineWidth/2, series.points.radius); + } + + ctx.lineWidth = series.points.lineWidth; + ctx.strokeStyle = series.color; + ctx.fillStyle = series.points.fillColor != null ? series.points.fillColor : series.color; + this.plotPoints(series, series.points.radius, series.points.fill); + ctx.restore(); + }, + plotPoints: function (series, radius, fill) { + var xa = series.xaxis, + ya = series.yaxis, + ctx = this.ctx, i, + data = series.data; + + for(i = data.length - 1; i > -1; --i){ + var x = data[i][0], y = data[i][1]; + if(x < xa.min || x > xa.max || y < ya.min || y > ya.max) + continue; + + ctx.beginPath(); + ctx.arc(this.tHoz(x, xa), this.tVert(y, ya), radius, 0, 2 * Math.PI, true); + if(fill) ctx.fill(); + ctx.stroke(); + } + }, + plotPointShadows: function(series, offset, radius){ + var xa = series.xaxis, + ya = series.yaxis, + ctx = this.ctx, i, + data = series.data; + + for(i = data.length - 1; i > -1; --i){ + var x = data[i][0], y = data[i][1]; + if (x < xa.min || x > xa.max || y < ya.min || y > ya.max) + continue; + ctx.beginPath(); + ctx.arc(this.tHoz(x, xa), this.tVert(y, ya) + offset, radius, 0, Math.PI, false); + ctx.stroke(); + } + }, + /** + * Function: drawSeriesBars + * + * Function draws bar series in the canvas element. + * + * Parameters: + * series - Series with options.bars.show = true. + * + * Returns: + * void + */ + drawSeriesBars: function(series) { + var ctx = this.ctx, + bw = series.bars.barWidth, + lw = Math.min(series.bars.lineWidth, bw); + + ctx.save(); + ctx.translate(this.plotOffset.left, this.plotOffset.top); + ctx.lineJoin = 'miter'; + + /** + * @todo linewidth not interpreted the right way. + */ + ctx.lineWidth = lw; + ctx.strokeStyle = series.color; + + this.plotBarsShadows(series, bw, 0, series.bars.fill); + + if(series.bars.fill){ + ctx.fillStyle = series.bars.fillColor != null ? series.bars.fillColor : Flotr.parseColor(series.color).scale(null, null, null, series.bars.fillOpacity).toString(); + } + + this.plotBars(series, bw, 0, series.bars.fill); + ctx.restore(); + }, + plotBars: function(series, barWidth, offset, fill){ + var data = series.data; + if(data.length < 1) return; + + var xa = series.xaxis, + ya = series.yaxis, + ctx = this.ctx, + tHoz = this.tHoz.bind(this), + tVert = this.tVert.bind(this); + + for(var i = 0; i < data.length; i++){ + var x = data[i][0], + y = data[i][1]; + var drawLeft = true, drawTop = true, drawRight = true; + + // Stacked bars + var stackOffset = 0; + if(series.bars.stacked) { + xa.values.each(function(o, v) { + if (v == x) { + stackOffset = o.stack || 0; + o.stack = stackOffset + y; + } + }); + } + + // @todo: fix horizontal bars support + // Horizontal bars + if(series.bars.horizontal) + var left = stackOffset, right = x + stackOffset, bottom = y, top = y + barWidth; + else + var left = x, right = x + barWidth, bottom = stackOffset, top = y + stackOffset; + + if(right < xa.min || left > xa.max || top < ya.min || bottom > ya.max) + continue; + + if(left < xa.min){ + left = xa.min; + drawLeft = false; + } + + if(right > xa.max){ + right = xa.max; + if (xa.lastSerie != series && series.bars.horizontal) + drawTop = false; + } + + if(bottom < ya.min) + bottom = ya.min; + + if(top > ya.max){ + top = ya.max; + if (ya.lastSerie != series && !series.bars.horizontal) + drawTop = false; + } + + /** + * Fill the bar. + */ + if(fill){ + ctx.beginPath(); + ctx.moveTo(tHoz(left, xa), tVert(bottom, ya) + offset); + ctx.lineTo(tHoz(left, xa), tVert(top, ya) + offset); + ctx.lineTo(tHoz(right, xa), tVert(top, ya) + offset); + ctx.lineTo(tHoz(right, xa), tVert(bottom, ya) + offset); + ctx.fill(); + } + + /** + * Draw bar outline/border. + */ + if(series.bars.lineWidth != 0 && (drawLeft || drawRight || drawTop)){ + ctx.beginPath(); + ctx.moveTo(tHoz(left, xa), tVert(bottom, ya) + offset); + + ctx[drawLeft ?'lineTo':'moveTo'](tHoz(left, xa), tVert(top, ya) + offset); + ctx[drawTop ?'lineTo':'moveTo'](tHoz(right, xa), tVert(top, ya) + offset); + ctx[drawRight?'lineTo':'moveTo'](tHoz(right, xa), tVert(bottom, ya) + offset); + + ctx.stroke(); + } + } + }, + plotBarsShadows: function(series, barWidth, offset){ + var data = series.data; + if(data.length < 1) return; + + var xa = series.xaxis, + ya = series.yaxis, + ctx = this.ctx, + tHoz = this.tHoz.bind(this), + tVert = this.tVert.bind(this), + sw = this.options.shadowSize; + + for(var i = 0; i < data.length; i++){ + var x = data[i][0], + y = data[i][1]; + + // Stacked bars + var stackOffset = 0; + if(series.bars.stacked) { + xa.values.each(function(o, v) { + if (v == x) { + stackOffset = o.stackShadow || 0; + o.stackShadow = stackOffset + y; + } + }); + } + + // Horizontal bars + if(series.bars.horizontal) + var left = stackOffset, right = x + stackOffset, bottom = y, top = y + barWidth; + else + var left = x, right = x + barWidth, bottom = stackOffset, top = y + stackOffset; + + if(right < xa.min || left > xa.max || top < ya.min || bottom > ya.max) + continue; + + if(left < xa.min) left = xa.min; + if(right > xa.max) right = xa.max; + if(bottom < ya.min) bottom = ya.min; + if(top > ya.max) top = ya.max; + + var width = tHoz(right, xa)-tHoz(left, xa)-((tHoz(right, xa)+sw <= this.plotWidth) ? 0 : sw); + var height = Math.max(0, tVert(bottom, ya)-tVert(top, ya)-((tVert(bottom, ya)+sw <= this.plotHeight) ? 0 : sw)); + + ctx.fillStyle = 'rgba(0,0,0,0.05)'; + ctx.fillRect(Math.min(tHoz(left, xa)+sw, this.plotWidth), Math.min(tVert(top, ya)+sw, this.plotWidth), width, height); + } + }, + /** + * Function: drawSeriesCandles + * + * Function draws candles series in the canvas element. + * + * Parameters: + * series - Series with options.candles.show = true. + * + * Returns: + * void + */ + drawSeriesCandles: function(series) { + var ctx = this.ctx, + bw = series.candles.candleWidth; + + ctx.save(); + ctx.translate(this.plotOffset.left, this.plotOffset.top); + ctx.lineJoin = 'miter'; + + /** + * @todo linewidth not interpreted the right way. + */ + ctx.lineWidth = series.candles.lineWidth; + this.plotCandlesShadows(series, bw/2); + this.plotCandles(series, bw/2); + + ctx.restore(); + }, + plotCandles: function(series, offset){ + var data = series.data; + if(data.length < 1) return; + + var xa = series.xaxis, + ya = series.yaxis, + ctx = this.ctx, + tHoz = this.tHoz.bind(this), + tVert = this.tVert.bind(this); + + for(var i = 0; i < data.length; i++){ + var d = data[i], + x = d[0], + open = d[1], + high = d[2], + low = d[3], + close = d[4]; + + var left = x, + right = x + series.candles.candleWidth, + bottom = Math.max(ya.min, low), + top = Math.min(ya.max, high), + bottom2 = Math.max(ya.min, Math.min(open, close)), + top2 = Math.min(ya.max, Math.max(open, close)); + + if(right < xa.min || left > xa.max || top < ya.min || bottom > ya.max) + continue; + + var color = series.candles[open>close?'downFillColor':'upFillColor']; + /** + * Fill the candle. + */ + if(series.candles.fill && !series.candles.barcharts){ + ctx.fillStyle = Flotr.parseColor(color).scale(null, null, null, series.candles.fillOpacity).toString(); + ctx.fillRect(tHoz(left, xa), tVert(top2, ya) + offset, tHoz(right, xa) - tHoz(left, xa), tVert(bottom2, ya) - tVert(top2, ya)); + } + + /** + * Draw candle outline/border, high, low. + */ + if(series.candles.lineWidth || series.candles.wickLineWidth){ + var x, y, pixelOffset = (series.candles.wickLineWidth % 2) / 2; + + x = Math.floor(tHoz((left + right) / 2), xa) + pixelOffset; + + ctx.save(); + ctx.strokeStyle = color; + ctx.lineWidth = series.candles.wickLineWidth; + ctx.lineCap = 'butt'; + + if (series.candles.barcharts) { + ctx.beginPath(); + + ctx.moveTo(x, Math.floor(tVert(top, ya) + offset)); + ctx.lineTo(x, Math.floor(tVert(bottom, ya) + offset)); + + y = Math.floor(tVert(open, ya) + offset)+0.5; + ctx.moveTo(Math.floor(tHoz(left, xa))+pixelOffset, y); + ctx.lineTo(x, y); + + y = Math.floor(tVert(close, ya) + offset)+0.5; + ctx.moveTo(Math.floor(tHoz(right, xa))+pixelOffset, y); + ctx.lineTo(x, y); + } + else { + ctx.strokeRect(tHoz(left, xa), tVert(top2, ya) + offset, tHoz(right, xa) - tHoz(left, xa), tVert(bottom2, ya) - tVert(top2, ya)); + + ctx.beginPath(); + ctx.moveTo(x, Math.floor(tVert(top2, ya) + offset)); + ctx.lineTo(x, Math.floor(tVert(top, ya) + offset)); + ctx.moveTo(x, Math.floor(tVert(bottom2, ya) + offset)); + ctx.lineTo(x, Math.floor(tVert(bottom, ya) + offset)); + } + + ctx.stroke(); + ctx.restore(); + } + } + }, + plotCandlesShadows: function(series, offset){ + var data = series.data; + if(data.length < 1 || series.candles.barcharts) return; + + var xa = series.xaxis, + ya = series.yaxis, + tHoz = this.tHoz.bind(this), + tVert = this.tVert.bind(this), + sw = this.options.shadowSize; + + for(var i = 0; i < data.length; i++){ + var d = data[i], + x = d[0], + open = d[1], + high = d[2], + low = d[3], + close = d[4]; + + var left = x, + right = x + series.candles.candleWidth, + bottom = Math.max(ya.min, Math.min(open, close)), + top = Math.min(ya.max, Math.max(open, close)); + + if(right < xa.min || left > xa.max || top < ya.min || bottom > ya.max) + continue; + + var width = tHoz(right, xa)-tHoz(left, xa)-((tHoz(right, xa)+sw <= this.plotWidth) ? 0 : sw); + var height = Math.max(0, tVert(bottom, ya)-tVert(top, ya)-((tVert(bottom, ya)+sw <= this.plotHeight) ? 0 : sw)); + + this.ctx.fillStyle = 'rgba(0,0,0,0.05)'; + this.ctx.fillRect(Math.min(tHoz(left, xa)+sw, this.plotWidth), Math.min(tVert(top, ya)+sw, this.plotWidth), width, height); + } + }, + /** + * Function: drawSeriesPie + * + * Function draws a pie in the canvas element. + * + * Parameters: + * series - Series with options.pie.show = true. + * + * Returns: + * void + */ + drawSeriesPie: function(series) { + if (!this.options.pie.drawn) { + var ctx = this.ctx, + options = this.options, + lw = series.pie.lineWidth, + sw = series.shadowSize, + data = series.data, + radius = (Math.min(this.canvasWidth, this.canvasHeight) * series.pie.sizeRatio) / 2, + html = []; + + var vScale = 1;//Math.cos(series.pie.viewAngle); + var plotTickness = Math.sin(series.pie.viewAngle)*series.pie.spliceThickness / vScale; + + var style = { + size: options.fontSize*1.2, + color: options.grid.color, + weight: 1.5 + }; + + var center = { + x: (this.canvasWidth+this.plotOffset.left)/2, + y: (this.canvasHeight-this.plotOffset.bottom)/2 + }; + + // Pie portions + var portions = this.series.collect(function(hash, index){ + if (hash.pie.show) + return { + name: (hash.label || hash.data[0][1]), + value: [index, hash.data[0][1]], + explode: hash.pie.explode + }; + }); + + // Sum of the portions' angles + var sum = portions.pluck('value').pluck(1).inject(0, function(acc, n) { return acc + n; }); + + var fraction = 0.0, + angle = series.pie.startAngle, + value = 0.0; + + var slices = portions.collect(function(slice){ + angle += fraction; + value = parseFloat(slice.value[1]); // @warning : won't support null values !! + fraction = value/sum; + return { + name: slice.name, + fraction: fraction, + x: slice.value[0], + y: value, + explode: slice.explode, + startAngle: 2 * angle * Math.PI, + endAngle: 2 * (angle + fraction) * Math.PI + }; + }); + + ctx.save(); + + if(sw > 0){ + slices.each(function (slice) { + var bisection = (slice.startAngle + slice.endAngle) / 2; + + var xOffset = center.x + Math.cos(bisection) * slice.explode + sw; + var yOffset = center.y + Math.sin(bisection) * slice.explode + sw; + + this.plotSlice(xOffset, yOffset, radius, slice.startAngle, slice.endAngle, false, vScale); + + ctx.fillStyle = 'rgba(0,0,0,0.1)'; + ctx.fill(); + }, this); + } + + if (options.HtmlText) { + html = ['<div style="color:' + this.options.grid.color + '" class="flotr-labels">']; + } + + slices.each(function (slice, index) { + var bisection = (slice.startAngle + slice.endAngle) / 2; + var color = options.colors[index]; + + var xOffset = center.x + Math.cos(bisection) * slice.explode; + var yOffset = center.y + Math.sin(bisection) * slice.explode; + + this.plotSlice(xOffset, yOffset, radius, slice.startAngle, slice.endAngle, false, vScale); + + if(series.pie.fill){ + ctx.fillStyle = Flotr.parseColor(color).scale(null, null, null, series.pie.fillOpacity).toString(); + ctx.fill(); + } + ctx.lineWidth = lw; + ctx.strokeStyle = color; + ctx.stroke(); + + /*ctx.save(); + ctx.scale(1, vScale); + + ctx.moveTo(xOffset, yOffset); + ctx.beginPath(); + ctx.lineTo(xOffset, yOffset+plotTickness); + ctx.lineTo(xOffset+Math.cos(slice.startAngle)*radius, yOffset+Math.sin(slice.startAngle)*radius+plotTickness); + ctx.lineTo(xOffset+Math.cos(slice.startAngle)*radius, yOffset+Math.sin(slice.startAngle)*radius); + ctx.lineTo(xOffset, yOffset); + ctx.closePath(); + ctx.fill();ctx.stroke(); + + ctx.moveTo(xOffset, yOffset); + ctx.beginPath(); + ctx.lineTo(xOffset, yOffset+plotTickness); + ctx.lineTo(xOffset+Math.cos(slice.endAngle)*radius, yOffset+Math.sin(slice.endAngle)*radius+plotTickness); + ctx.lineTo(xOffset+Math.cos(slice.endAngle)*radius, yOffset+Math.sin(slice.endAngle)*radius); + ctx.lineTo(xOffset, yOffset); + ctx.closePath(); + ctx.fill();ctx.stroke(); + + ctx.moveTo(xOffset+Math.cos(slice.startAngle)*radius, yOffset+Math.sin(slice.startAngle)*radius); + ctx.beginPath(); + ctx.lineTo(xOffset+Math.cos(slice.startAngle)*radius, yOffset+Math.sin(slice.startAngle)*radius+plotTickness); + ctx.arc(xOffset, yOffset+plotTickness, radius, slice.startAngle, slice.endAngle, false); + ctx.lineTo(xOffset+Math.cos(slice.endAngle)*radius, yOffset+Math.sin(slice.endAngle)*radius); + ctx.arc(xOffset, yOffset, radius, slice.endAngle, slice.startAngle, true); + ctx.closePath(); + ctx.fill();ctx.stroke(); + + ctx.scale(1, 1/vScale); + this.plotSlice(xOffset, yOffset+plotTickness, radius, slice.startAngle, slice.endAngle, false, vScale); + ctx.stroke(); + if(series.pie.fill){ + ctx.fillStyle = Flotr.parseColor(color).scale(null, null, null, series.pie.fillOpacity).toString(); + ctx.fill(); + } + + ctx.restore();*/ + + var label = options.pie.labelFormatter(slice); + + var textAlignRight = (Math.cos(bisection) < 0); + var distX = xOffset + Math.cos(bisection) * (series.pie.explode + radius); + var distY = yOffset + Math.sin(bisection) * (series.pie.explode + radius); + + if (slice.fraction && label) { + if (options.HtmlText) { + var divStyle = 'position:absolute;top:' + (distY - 5) + 'px;'; //@todo: change + if (textAlignRight) { + divStyle += 'right:'+(this.canvasWidth - distX)+'px;text-align:right;'; + } + else { + divStyle += 'left:'+distX+'px;text-align:left;'; + } + html.push('<div style="' + divStyle + '" class="flotr-grid-label">' + label + '</div>'); + } + else { + style.halign = textAlignRight ? 'r' : 'l'; + ctx.drawText( + label, + distX, + distY + style.size / 2, + style + ); + } + } + }, this); + + if (options.HtmlText) { + html.push('</div>'); + this.el.insert(html.join('')); + } + + ctx.restore(); + options.pie.drawn = true; + } + }, + plotSlice: function(x, y, radius, startAngle, endAngle, fill, vScale) { + var ctx = this.ctx; + vScale = vScale || 1; + + ctx.save(); + ctx.scale(1, vScale); + ctx.beginPath(); + ctx.moveTo(x, y); + ctx.arc (x, y, radius, startAngle, endAngle, fill); + ctx.lineTo(x, y); + ctx.closePath(); + ctx.restore(); + }, + plotPie: function() {}, + /** + * Function: insertLegend + * + * Function adds a legend div to the canvas container or draws it on the canvas. + * + * Parameters: + * none + * + * Returns: + * void + */ + insertLegend: function(){ + if(!this.options.legend.show) + return; + + var series = this.series, + plotOffset = this.plotOffset, + options = this.options, + fragments = [], + rowStarted = false, + ctx = this.ctx, + i; + + var noLegendItems = series.findAll(function(s) {return (s.label && !s.hide)}).size(); + + if (noLegendItems) { + if (!options.HtmlText && this.textEnabled) { + var style = { + size: options.fontSize*1.1, + color: options.grid.color + }; + + // @todo: take css into account + //var dummyDiv = this.el.insert('<div class="flotr-legend" style="position:absolute;top:-10000px;"></div>'); + + var p = options.legend.position, + m = options.legend.margin, + lbw = options.legend.labelBoxWidth, + lbh = options.legend.labelBoxHeight, + lbm = options.legend.labelBoxMargin, + offsetX = plotOffset.left + m, + offsetY = plotOffset.top + m; + + // We calculate the labels' max width + var labelMaxWidth = 0; + for(i = series.length - 1; i > -1; --i){ + if(!series[i].label || series[i].hide) continue; + var label = options.legend.labelFormatter(series[i].label); + labelMaxWidth = Math.max(labelMaxWidth, ctx.measureText(label, style)); + } + + var legendWidth = Math.round(lbw + lbm*3 + labelMaxWidth), + legendHeight = Math.round(noLegendItems*(lbm+lbh) + lbm); + + if(p.charAt(0) == 's') offsetY = plotOffset.top + this.plotHeight - (m + legendHeight); + if(p.charAt(1) == 'e') offsetX = plotOffset.left + this.plotWidth - (m + legendWidth); + + // Legend box + var color = Flotr.parseColor(options.legend.backgroundColor || 'rgb(240,240,240)').scale(null, null, null, options.legend.backgroundOpacity || 0.1).toString(); + + ctx.fillStyle = color; + ctx.fillRect(offsetX, offsetY, legendWidth, legendHeight); + ctx.strokeStyle = options.legend.labelBoxBorderColor; + ctx.strokeRect(Flotr.toPixel(offsetX), Flotr.toPixel(offsetY), legendWidth, legendHeight); + + // Legend labels + var x = offsetX + lbm; + var y = offsetY + lbm; + for(i = 0; i < series.length; i++){ + if(!series[i].label || series[i].hide) continue; + var label = options.legend.labelFormatter(series[i].label); + + ctx.fillStyle = series[i].color; + ctx.fillRect(x, y, lbw-1, lbh-1); + + ctx.strokeStyle = options.legend.labelBoxBorderColor; + ctx.lineWidth = 1; + ctx.strokeRect(Math.ceil(x)-1.5, Math.ceil(y)-1.5, lbw+2, lbh+2); + + // Legend text + ctx.drawText( + label, + x + lbw + lbm, + y + (lbh + style.size - ctx.fontDescent(style))/2, + style + ); + + y += lbh + lbm; + } + } + else { + for(i = 0; i < series.length; ++i){ + if(!series[i].label || series[i].hide) continue; + + if(i % options.legend.noColumns == 0){ + fragments.push(rowStarted ? '</tr><tr>' : '<tr>'); + rowStarted = true; + } + + var label = options.legend.labelFormatter(series[i].label); + + fragments.push('<td class="flotr-legend-color-box"><div style="border:1px solid ' + options.legend.labelBoxBorderColor + ';padding:1px"><div style="width:' + options.legend.labelBoxWidth + 'px;height:' + options.legend.labelBoxHeight + 'px;background-color:' + series[i].color + '"></div></div></td>' + + '<td class="flotr-legend-label">' + label + '</td>'); + } + if(rowStarted) fragments.push('</tr>'); + + if(fragments.length > 0){ + var table = '<table style="font-size:smaller;color:' + options.grid.color + '">' + fragments.join("") + '</table>'; + if(options.legend.container != null){ + $(options.legend.container).update(table); + }else{ + var pos = ''; + var p = options.legend.position, m = options.legend.margin; + + if(p.charAt(0) == 'n') pos += 'top:' + (m + plotOffset.top) + 'px;'; + else if(p.charAt(0) == 's') pos += 'bottom:' + (m + plotOffset.bottom) + 'px;'; + if(p.charAt(1) == 'e') pos += 'right:' + (m + plotOffset.right) + 'px;'; + else if(p.charAt(1) == 'w') pos += 'left:' + (m + plotOffset.left) + 'px;'; + + var div = this.el.insert('<div class="flotr-legend" style="position:absolute;z-index:2;' + pos +'">' + table + '</div>').select('div.flotr-legend').first(); + + if(options.legend.backgroundOpacity != 0.0){ + /** + * Put in the transparent background separately to avoid blended labels and + * label boxes. + */ + var c = options.legend.backgroundColor; + if(c == null){ + var tmp = (options.grid.backgroundColor != null) ? options.grid.backgroundColor : Flotr.extractColor(div); + c = Flotr.parseColor(tmp).adjust(null, null, null, 1).toString(); + } + this.el.insert('<div class="flotr-legend-bg" style="position:absolute;width:' + div.getWidth() + 'px;height:' + div.getHeight() + 'px;' + pos +'background-color:' + c + ';"> </div>').select('div.flotr-legend-bg').first().setStyle({ + 'opacity': options.legend.backgroundOpacity + }); + } + } + } + } + } + }, + /** + * Function: getEventPosition + * + * Calculates the coordinates from a mouse event object. + * + * Parameters: + * event - Mouse Event object. + * + * Returns: + * Object with x and y coordinates of the mouse. + */ + getEventPosition: function (event){ + var offset = this.overlay.cumulativeOffset(), + rx = (event.pageX - offset.left - this.plotOffset.left), + ry = (event.pageY - offset.top - this.plotOffset.top), + ax = 0, ay = 0 + + if(event.pageX == null && event.clientX != null){ + var de = document.documentElement, b = document.body; + ax = event.clientX + (de && de.scrollLeft || b.scrollLeft || 0); + ay = event.clientY + (de && de.scrollTop || b.scrollTop || 0); + }else{ + ax = event.pageX; + ay = event.pageY; + } + + return { + x: this.axes.x.min + rx / this.axes.x.scale, + x2: this.axes.x2.min + rx / this.axes.x2.scale, + y: this.axes.y.max - ry / this.axes.y.scale, + y2: this.axes.y2.max - ry / this.axes.y2.scale, + relX: rx, + relY: ry, + absX: ax, + absY: ay + }; + }, + /** + * Function: clickHandler + * + * Handler observes the 'click' event and fires the 'flotr:click' event. + * + * Parameters: + * event - 'click' Event object. + * + * Returns: + * void + */ + clickHandler: function(event){ + if(this.ignoreClick){ + this.ignoreClick = false; + return; + } + this.el.fire('flotr:click', [this.getEventPosition(event), this]); + }, + /** + * Function: mouseMoveHandler + * + * Handler observes mouse movement over the graph area. Fires the + * 'flotr:mousemove' event. + * + * Parameters: + * event - 'mousemove' Event object. + * + * Returns: + * void + */ + mouseMoveHandler: function(event){ + var pos = this.getEventPosition(event); + + this.lastMousePos.pageX = pos.absX; + this.lastMousePos.pageY = pos.absY; + if(this.selectionInterval == null && (this.options.mouse.track || this.series.any(function(s){return s.mouse && s.mouse.track;}))){ + this.hit(pos); + } + + this.el.fire('flotr:mousemove', [event, pos, this]); + }, + /** + * Function: mouseDownHandler + * + * Handler observes the 'mousedown' event. + * + * Parameters: + * event - 'mousedown' Event object. + * + * Returns: + * void + */ + mouseDownHandler: function (event){ + if(event.isRightClick()) { + event.stop(); + var overlay = this.overlay; + overlay.hide(); + + function cancelContextMenu () { + overlay.show(); + $(document).stopObserving('mousemove', cancelContextMenu); [... 567 lines stripped ...] |
«
Return to OFBiz - Commits
|
1 view|%1 views
| Free forum by Nabble | Edit this page |