/** * 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.Cursor * Plugin class representing the cursor as displayed on the plot. */ $.jqplot.Cursor = function(options) { // Group: Properties // // prop: style // CSS spec for cursor style this.style = 'crosshair'; this.previousCursor = 'auto'; // prop: show // whether to show the cursor or not. this.show = $.jqplot.config.enablePlugins; // prop: showTooltip // show a cursor position tooltip. Location of the tooltip // will be controlled by followMouse and tooltipLocation. this.showTooltip = true; // prop: followMouse // Tooltip follows the mouse, it is not at a fixed location. // Tooltip will show on the grid at the location given by // tooltipLocation, offset from the grid edge by tooltipOffset. this.followMouse = false; // prop: tooltipLocation // Where to position tooltip. If followMouse is true, this is // relative to the cursor, otherwise, it is relative to the grid. // One of 'n', 'ne', 'e', 'se', 's', 'sw', 'w', 'nw' this.tooltipLocation = 'se'; // prop: tooltipOffset // Pixel offset of tooltip from the grid boudaries or cursor center. this.tooltipOffset = 6; // prop: showTooltipGridPosition // show the grid pixel coordinates of the mouse. this.showTooltipGridPosition = false; // prop: showTooltipUnitPosition // show the unit (data) coordinates of the mouse. this.showTooltipUnitPosition = true; // prop: showTooltipDataPosition // Used with showVerticalLine to show intersecting data points in the tooltip. this.showTooltipDataPosition = false; // prop: tooltipFormatString // sprintf format string for the tooltip. // Uses Ash Searle's javascript sprintf implementation // found here: http://hexmen.com/blog/2007/03/printf-sprintf/ // See http://perldoc.perl.org/functions/sprintf.html for reference // Note, if showTooltipDataPosition is true, the default tooltipFormatString // will be set to the cursorLegendFormatString, not the default given here. this.tooltipFormatString = '%.4P, %.4P'; // prop: useAxesFormatters // Use the x and y axes formatters to format the text in the tooltip. this.useAxesFormatters = true; // prop: tooltipAxisGroups // Show position for the specified axes. // This is an array like [['xaxis', 'yaxis'], ['xaxis', 'y2axis']] // Default is to compute automatically for all visible axes. this.tooltipAxisGroups = []; // prop: zoom // Enable plot zooming. this.zoom = false; // zoomProxy and zoomTarget properties are not directly set by user. // They Will be set through call to zoomProxy method. this.zoomProxy = false; this.zoomTarget = false; // prop: looseZoom // Will expand zoom range to provide more rounded tick values. // Works only with linear, log and date axes. this.looseZoom = true; // prop: clickReset // Will reset plot zoom if single click on plot without drag. this.clickReset = false; // prop: dblClickReset // Will reset plot zoom if double click on plot without drag. this.dblClickReset = true; // prop: showVerticalLine // draw a vertical line across the plot which follows the cursor. // When the line is near a data point, a special legend and/or tooltip can // be updated with the data values. this.showVerticalLine = false; // prop: showHorizontalLine // draw a horizontal line across the plot which follows the cursor. this.showHorizontalLine = false; // prop: constrainZoomTo // 'none', 'x' or 'y' this.constrainZoomTo = 'none'; // // prop: autoscaleConstraint // // when a constrained axis is specified, true will // // auatoscale the adjacent axis. // this.autoscaleConstraint = true; this.shapeRenderer = new $.jqplot.ShapeRenderer(); this._zoom = {start:[], end:[], started: false, zooming:false, isZoomed:false, axes:{start:{}, end:{}}, gridpos:{}, datapos:{}}; this._tooltipElem; this.zoomCanvas; this.cursorCanvas; // prop: intersectionThreshold // pixel distance from data point or marker to consider cursor lines intersecting with point. // If data point markers are not shown, this should be >= 1 or will often miss point intersections. this.intersectionThreshold = 2; // prop: showCursorLegend // Replace the plot legend with an enhanced legend displaying intersection information. this.showCursorLegend = false; // prop: cursorLegendFormatString // Format string used in the cursor legend. If showTooltipDataPosition is true, // this will also be the default format string used by tooltipFormatString. this.cursorLegendFormatString = $.jqplot.Cursor.cursorLegendFormatString; // whether the cursor is over the grid or not. this._oldHandlers = {onselectstart: null, ondrag: null, onmousedown: null}; // prop: constrainOutsideZoom // True to limit actual zoom area to edges of grid, even when zooming // outside of plot area. That is, can't zoom out by mousing outside plot. this.constrainOutsideZoom = true; // prop: showTooltipOutsideZoom // True will keep updating the tooltip when zooming of the grid. this.showTooltipOutsideZoom = false; // true if mouse is over grid, false if not. this.onGrid = false; $.extend(true, this, options); }; $.jqplot.Cursor.cursorLegendFormatString = '%s x:%s, y:%s'; // called with scope of plot $.jqplot.Cursor.init = function (target, data, opts){ // add a cursor attribute to the plot var options = opts || {}; this.plugins.cursor = new $.jqplot.Cursor(options.cursor); var c = this.plugins.cursor; if (c.show) { $.jqplot.eventListenerHooks.push(['jqplotMouseEnter', handleMouseEnter]); $.jqplot.eventListenerHooks.push(['jqplotMouseLeave', handleMouseLeave]); $.jqplot.eventListenerHooks.push(['jqplotMouseMove', handleMouseMove]); if (c.showCursorLegend) { opts.legend = opts.legend || {}; opts.legend.renderer = $.jqplot.CursorLegendRenderer; opts.legend.formatString = this.plugins.cursor.cursorLegendFormatString; opts.legend.show = true; } if (c.zoom) { $.jqplot.eventListenerHooks.push(['jqplotMouseDown', handleMouseDown]); if (c.clickReset) { $.jqplot.eventListenerHooks.push(['jqplotClick', handleClick]); } if (c.dblClickReset) { $.jqplot.eventListenerHooks.push(['jqplotDblClick', handleDblClick]); } } this.resetZoom = function() { var axes = this.axes; if (!c.zoomProxy) { for (var ax in axes) { axes[ax].reset(); axes[ax]._ticks = []; // fake out tick creation algorithm to make sure original auto // computed format string is used if _overrideFormatString is true if (c._zoom.axes[ax] !== undefined) { axes[ax]._autoFormatString = c._zoom.axes[ax].tickFormatString; } } this.redraw(); } else { var ctx = this.plugins.cursor.zoomCanvas._ctx; ctx.clearRect(0,0,ctx.canvas.width, ctx.canvas.height); ctx = null; } this.plugins.cursor._zoom.isZoomed = false; this.target.trigger('jqplotResetZoom', [this, this.plugins.cursor]); }; if (c.showTooltipDataPosition) { c.showTooltipUnitPosition = false; c.showTooltipGridPosition = false; if (options.cursor.tooltipFormatString == undefined) { c.tooltipFormatString = $.jqplot.Cursor.cursorLegendFormatString; } } } }; // called with context of plot $.jqplot.Cursor.postDraw = function() { var c = this.plugins.cursor; // Memory Leaks patch if (c.zoomCanvas) { c.zoomCanvas.resetCanvas(); c.zoomCanvas = null; } if (c.cursorCanvas) { c.cursorCanvas.resetCanvas(); c.cursorCanvas = null; } if (c._tooltipElem) { c._tooltipElem.emptyForce(); c._tooltipElem = null; } if (c.zoom) { c.zoomCanvas = new $.jqplot.GenericCanvas(); this.eventCanvas._elem.before(c.zoomCanvas.createElement(this._gridPadding, 'jqplot-zoom-canvas', this._plotDimensions, this)); c.zoomCanvas.setContext(); } var elem = document.createElement('div'); c._tooltipElem = $(elem); elem = null; c._tooltipElem.addClass('jqplot-cursor-tooltip'); c._tooltipElem.css({position:'absolute', display:'none'}); if (c.zoomCanvas) { c.zoomCanvas._elem.before(c._tooltipElem); } else { this.eventCanvas._elem.before(c._tooltipElem); } if (c.showVerticalLine || c.showHorizontalLine) { c.cursorCanvas = new $.jqplot.GenericCanvas(); this.eventCanvas._elem.before(c.cursorCanvas.createElement(this._gridPadding, 'jqplot-cursor-canvas', this._plotDimensions, this)); c.cursorCanvas.setContext(); } // if we are showing the positions in unit coordinates, and no axes groups // were specified, create a default set. if (c.showTooltipUnitPosition){ if (c.tooltipAxisGroups.length === 0) { var series = this.series; var s; var temp = []; for (var i=0; i 6 && Math.abs(gridpos.y - c._zoom.start[1]) > 6) || (c.constrainZoomTo == 'x' && Math.abs(gridpos.x - c._zoom.start[0]) > 6) || (c.constrainZoomTo == 'y' && Math.abs(gridpos.y - c._zoom.start[1]) > 6)) { if (!plot.plugins.cursor.zoomProxy) { for (var ax in datapos) { // make a copy of the original axes to revert back. if (c._zoom.axes[ax] == undefined) { c._zoom.axes[ax] = {}; c._zoom.axes[ax].numberTicks = axes[ax].numberTicks; c._zoom.axes[ax].tickInterval = axes[ax].tickInterval; // for date axes... c._zoom.axes[ax].daTickInterval = axes[ax].daTickInterval; c._zoom.axes[ax].min = axes[ax].min; c._zoom.axes[ax].max = axes[ax].max; c._zoom.axes[ax].tickFormatString = (axes[ax].tickOptions != null) ? axes[ax].tickOptions.formatString : ''; } if ((c.constrainZoomTo == 'none') || (c.constrainZoomTo == 'x' && ax.charAt(0) == 'x') || (c.constrainZoomTo == 'y' && ax.charAt(0) == 'y')) { dp = datapos[ax]; if (dp != null) { if (dp > start[ax]) { newmin = start[ax]; newmax = dp; } else { span = start[ax] - dp; newmin = dp; newmax = start[ax]; } curax = axes[ax]; _numberTicks = null; // if aligning this axis, use number of ticks from previous axis. // Do I need to reset somehow if alignTicks is changed and then graph is replotted?? if (curax.alignTicks) { if (curax.name === 'x2axis' && plot.axes.xaxis.show) { _numberTicks = plot.axes.xaxis.numberTicks; } else if (curax.name.charAt(0) === 'y' && curax.name !== 'yaxis' && curax.name !== 'yMidAxis' && plot.axes.yaxis.show) { _numberTicks = plot.axes.yaxis.numberTicks; } } if (this.looseZoom && (axes[ax].renderer.constructor === $.jqplot.LinearAxisRenderer || axes[ax].renderer.constructor === $.jqplot.LogAxisRenderer )) { //} || axes[ax].renderer.constructor === $.jqplot.DateAxisRenderer)) { ret = $.jqplot.LinearTickGenerator(newmin, newmax, curax._scalefact, _numberTicks); // if new minimum is less than "true" minimum of axis display, adjust it if (axes[ax].tickInset && ret[0] < axes[ax].min + axes[ax].tickInset * axes[ax].tickInterval) { ret[0] += ret[4]; ret[2] -= 1; } // if new maximum is greater than "true" max of axis display, adjust it if (axes[ax].tickInset && ret[1] > axes[ax].max - axes[ax].tickInset * axes[ax].tickInterval) { ret[1] -= ret[4]; ret[2] -= 1; } // for log axes, don't fall below current minimum, this will look bad and can't have 0 in range anyway. if (axes[ax].renderer.constructor === $.jqplot.LogAxisRenderer && ret[0] < axes[ax].min) { // remove a tick and shift min up ret[0] += ret[4]; ret[2] -= 1; } axes[ax].min = ret[0]; axes[ax].max = ret[1]; axes[ax]._autoFormatString = ret[3]; axes[ax].numberTicks = ret[2]; axes[ax].tickInterval = ret[4]; // for date axes... axes[ax].daTickInterval = [ret[4]/1000, 'seconds']; } else { axes[ax].min = newmin; axes[ax].max = newmax; axes[ax].tickInterval = null; axes[ax].numberTicks = null; // for date axes... axes[ax].daTickInterval = null; } axes[ax]._ticks = []; } } // if ((c.constrainZoomTo == 'x' && ax.charAt(0) == 'y' && c.autoscaleConstraint) || (c.constrainZoomTo == 'y' && ax.charAt(0) == 'x' && c.autoscaleConstraint)) { // dp = datapos[ax]; // if (dp != null) { // axes[ax].max == null; // axes[ax].min = null; // } // } } ctx.clearRect(0,0,ctx.canvas.width, ctx.canvas.height); plot.redraw(); c._zoom.isZoomed = true; ctx = null; } plot.target.trigger('jqplotZoom', [gridpos, datapos, plot, cursor]); } }; $.jqplot.preInitHooks.push($.jqplot.Cursor.init); $.jqplot.postDrawHooks.push($.jqplot.Cursor.postDraw); function updateTooltip(gridpos, datapos, plot) { var c = plot.plugins.cursor; var s = ''; var addbr = false; if (c.showTooltipGridPosition) { s = gridpos.x+', '+gridpos.y; addbr = true; } if (c.showTooltipUnitPosition) { var g; for (var i=0; i0; n--) { axis = an[n-1]; if (ax[axis].show) { dataPos[axis] = ax[axis].series_p2u(gridPos[axis.charAt(0)]); } } return {offsets:go, gridPos:gridPos, dataPos:dataPos}; } function handleZoomMove(ev) { var plot = ev.data.plot; var c = plot.plugins.cursor; // don't do anything if not on grid. if (c.show && c.zoom && c._zoom.started && !c.zoomTarget) { ev.preventDefault(); var ctx = c.zoomCanvas._ctx; var positions = getEventPosition(ev); var gridpos = positions.gridPos; var datapos = positions.dataPos; c._zoom.gridpos = gridpos; c._zoom.datapos = datapos; c._zoom.zooming = true; var xpos = gridpos.x; var ypos = gridpos.y; var height = ctx.canvas.height; var width = ctx.canvas.width; if (c.showTooltip && !c.onGrid && c.showTooltipOutsideZoom) { updateTooltip(gridpos, datapos, plot); if (c.followMouse) { moveTooltip(gridpos, plot); } } if (c.constrainZoomTo == 'x') { c._zoom.end = [xpos, height]; } else if (c.constrainZoomTo == 'y') { c._zoom.end = [width, ypos]; } else { c._zoom.end = [xpos, ypos]; } var sel = window.getSelection; if (document.selection && document.selection.empty) { document.selection.empty(); } else if (sel && !sel().isCollapsed) { sel().collapse(); } drawZoomBox.call(c); ctx = null; } } function handleMouseDown(ev, gridpos, datapos, neighbor, plot) { var c = plot.plugins.cursor; if(plot.plugins.mobile){ $(document).one('vmouseup.jqplot_cursor', {plot:plot}, handleMouseUp); } else { $(document).one('mouseup.jqplot_cursor', {plot:plot}, handleMouseUp); } var axes = plot.axes; if (document.onselectstart != undefined) { c._oldHandlers.onselectstart = document.onselectstart; document.onselectstart = function () { return false; }; } if (document.ondrag != undefined) { c._oldHandlers.ondrag = document.ondrag; document.ondrag = function () { return false; }; } if (document.onmousedown != undefined) { c._oldHandlers.onmousedown = document.onmousedown; document.onmousedown = function () { return false; }; } if (c.zoom) { if (!c.zoomProxy) { var ctx = c.zoomCanvas._ctx; ctx.clearRect(0,0,ctx.canvas.width, ctx.canvas.height); ctx = null; } if (c.constrainZoomTo == 'x') { c._zoom.start = [gridpos.x, 0]; } else if (c.constrainZoomTo == 'y') { c._zoom.start = [0, gridpos.y]; } else { c._zoom.start = [gridpos.x, gridpos.y]; } c._zoom.started = true; for (var ax in datapos) { // get zoom starting position. c._zoom.axes.start[ax] = datapos[ax]; } if(plot.plugins.mobile){ $(document).bind('vmousemove.jqplotCursor', {plot:plot}, handleZoomMove); } else { $(document).bind('mousemove.jqplotCursor', {plot:plot}, handleZoomMove); } } } function handleMouseUp(ev) { var plot = ev.data.plot; var c = plot.plugins.cursor; if (c.zoom && c._zoom.zooming && !c.zoomTarget) { var xpos = c._zoom.gridpos.x; var ypos = c._zoom.gridpos.y; var datapos = c._zoom.datapos; var height = c.zoomCanvas._ctx.canvas.height; var width = c.zoomCanvas._ctx.canvas.width; var axes = plot.axes; if (c.constrainOutsideZoom && !c.onGrid) { if (xpos < 0) { xpos = 0; } else if (xpos > width) { xpos = width; } if (ypos < 0) { ypos = 0; } else if (ypos > height) { ypos = height; } for (var axis in datapos) { if (datapos[axis]) { if (axis.charAt(0) == 'x') { datapos[axis] = axes[axis].series_p2u(xpos); } else { datapos[axis] = axes[axis].series_p2u(ypos); } } } } if (c.constrainZoomTo == 'x') { ypos = height; } else if (c.constrainZoomTo == 'y') { xpos = width; } c._zoom.end = [xpos, ypos]; c._zoom.gridpos = {x:xpos, y:ypos}; c.doZoom(c._zoom.gridpos, datapos, plot, c); } c._zoom.started = false; c._zoom.zooming = false; $(document).unbind('mousemove.jqplotCursor', handleZoomMove); if (document.onselectstart != undefined && c._oldHandlers.onselectstart != null){ document.onselectstart = c._oldHandlers.onselectstart; c._oldHandlers.onselectstart = null; } if (document.ondrag != undefined && c._oldHandlers.ondrag != null){ document.ondrag = c._oldHandlers.ondrag; c._oldHandlers.ondrag = null; } if (document.onmousedown != undefined && c._oldHandlers.onmousedown != null){ document.onmousedown = c._oldHandlers.onmousedown; c._oldHandlers.onmousedown = null; } } function drawZoomBox() { var start = this._zoom.start; var end = this._zoom.end; var ctx = this.zoomCanvas._ctx; var l, t, h, w; if (end[0] > start[0]) { l = start[0]; w = end[0] - start[0]; } else { l = end[0]; w = start[0] - end[0]; } if (end[1] > start[1]) { t = start[1]; h = end[1] - start[1]; } else { t = end[1]; h = start[1] - end[1]; } ctx.fillStyle = 'rgba(0,0,0,0.2)'; ctx.strokeStyle = '#999999'; ctx.lineWidth = 1.0; ctx.clearRect(0,0,ctx.canvas.width, ctx.canvas.height); ctx.fillRect(0,0,ctx.canvas.width, ctx.canvas.height); ctx.clearRect(l, t, w, h); // IE won't show transparent fill rect, so stroke a rect also. ctx.strokeRect(l,t,w,h); ctx = null; } $.jqplot.CursorLegendRenderer = function(options) { $.jqplot.TableLegendRenderer.call(this, options); this.formatString = '%s'; }; $.jqplot.CursorLegendRenderer.prototype = new $.jqplot.TableLegendRenderer(); $.jqplot.CursorLegendRenderer.prototype.constructor = $.jqplot.CursorLegendRenderer; // called in context of a Legend $.jqplot.CursorLegendRenderer.prototype.draw = function() { if (this._elem) { this._elem.emptyForce(); this._elem = null; } if (this.show) { var series = this._series, s; // make a table. one line label per row. var elem = document.createElement('table'); this._elem = $(elem); elem = null; this._elem.addClass('jqplot-legend jqplot-cursor-legend'); this._elem.css('position', 'absolute'); var pad = false; for (var i = 0; i< series.length; i++) { s = series[i]; if (s.show && s.showLabel) { var lt = $.jqplot.sprintf(this.formatString, s.label.toString()); if (lt) { var color = s.color; if (s._stack && !s.fill) { color = ''; } addrow.call(this, lt, color, pad, i); pad = true; } // let plugins add more rows to legend. Used by trend line plugin. for (var j=0; j<$.jqplot.addLegendRowHooks.length; j++) { var item = $.jqplot.addLegendRowHooks[j].call(this, s); if (item) { addrow.call(this, item.label, item.color, pad); pad = true; } } } } series = s = null; delete series; delete s; } function addrow(label, color, pad, idx) { var rs = (pad) ? this.rowSpacing : '0'; var tr = $('').appendTo(this._elem); tr.data('seriesIndex', idx); $(''+ '
'+ '
'+ '
').appendTo(tr); var td = $(''); td.appendTo(tr); td.data('seriesIndex', idx); if (this.escapeHtml) { td.text(label); } else { td.html(label); } tr = null; td = null; } return this._elem; }; })(jQuery);