/** * jqPlot * Pure JavaScript plotting plugin using jQuery * * Version: 1.0.9 * Revision: dff2f04 * * Copyright (c) 2009-2016 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<series.length; i++) { s = series[i]; var ax = s.xaxis+','+s.yaxis; if ($.inArray(ax, temp) == -1) { temp.push(ax); } } for (var i=0; i<temp.length; i++) { c.tooltipAxisGroups.push(temp[i].split(',')); } } } }; // Group: methods // // method: $.jqplot.Cursor.zoomProxy // links targetPlot to controllerPlot so that plot zooming of // targetPlot will be controlled by zooming on the controllerPlot. // controllerPlot will not actually zoom, but acts as an // overview plot. Note, the zoom options must be set to true for // zoomProxy to work. $.jqplot.Cursor.zoomProxy = function(targetPlot, controllerPlot) { var tc = targetPlot.plugins.cursor; var cc = controllerPlot.plugins.cursor; tc.zoomTarget = true; tc.zoom = true; tc.style = 'auto'; tc.dblClickReset = false; cc.zoom = true; cc.zoomProxy = true; controllerPlot.target.bind('jqplotZoom', plotZoom); controllerPlot.target.bind('jqplotResetZoom', plotReset); function plotZoom(ev, gridpos, datapos, plot, cursor) { tc.doZoom(gridpos, datapos, targetPlot, cursor); } function plotReset(ev, plot, cursor) { targetPlot.resetZoom(); } }; $.jqplot.Cursor.prototype.resetZoom = function(plot, cursor) { var axes = plot.axes; var cax = cursor._zoom.axes; if (!plot.plugins.cursor.zoomProxy && cursor._zoom.isZoomed) { for (var ax in axes) { // axes[ax]._ticks = []; // axes[ax].min = cax[ax].min; // axes[ax].max = cax[ax].max; // axes[ax].numberTicks = cax[ax].numberTicks; // axes[ax].tickInterval = cax[ax].tickInterval; // // for date axes // axes[ax].daTickInterval = cax[ax].daTickInterval; 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 axes[ax]._autoFormatString = cax[ax].tickFormatString; } plot.redraw(); cursor._zoom.isZoomed = false; } else { var ctx = cursor.zoomCanvas._ctx; ctx.clearRect(0,0,ctx.canvas.width, ctx.canvas.height); ctx = null; } plot.target.trigger('jqplotResetZoom', [plot, cursor]); }; $.jqplot.Cursor.resetZoom = function(plot) { plot.resetZoom(); }; $.jqplot.Cursor.prototype.doZoom = function (gridpos, datapos, plot, cursor) { var c = cursor; var axes = plot.axes; var zaxes = c._zoom.axes; var start = zaxes.start; var end = zaxes.end; var min, max, dp, span, newmin, newmax, curax, _numberTicks, ret; var ctx = plot.plugins.cursor.zoomCanvas._ctx; // don't zoom if zoom area is too small (in pixels) if ((c.constrainZoomTo == 'none' && Math.abs(gridpos.x - c._zoom.start[0]) > 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 = []; } } } for (var ax in datapos) { if ((c.constrainZoomTo == 'x' && ax.charAt(0) == 'y' && c.autoscaleConstraint)) { dp = datapos[ax]; if (dp != null) { curax = axes[ax]; curax.min = axes[ax]._options.min; curax.max = axes[ax]._options.max; if (axes[ax]._options.min == null || axes[ax]._options.max == null) { var seriesMin = null; var seriesMax = null; $.each(plot.series, function(seriesIdx, seriesObj) { if (seriesObj.yaxis == ax) { var xaxis = axes[seriesObj.xaxis]; var i; var d = seriesObj._plotData; for (i = 0; i < d.length; i++) { var point = d[i]; if (point[0] >= xaxis.min && point[0] <= xaxis.max) { if (seriesMin == null || point[1] < seriesMin) { seriesMin = point[1]; } if (seriesMax == null || point[1] > seriesMax) { seriesMax = point[1]; } } } } }); if (axes[ax]._options.min != null) { seriesMin = axes[ax]._options.min; } if (axes[ax]._options.max != null) { seriesMax = axes[ax]._options.max; } var r = $.jqplot.LinearTickGenerator(seriesMin, seriesMax, null, null, (axes[ax]._options.min != null), (axes[ax]._options.max != null)); curax.min = r[0]; curax.max = r[1]; curax.tickInterval = null; curax.numberTicks = 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; i<c.tooltipAxisGroups.length; i++) { g = c.tooltipAxisGroups[i]; if (addbr) { s += '<br />'; } if (c.useAxesFormatters) { for (var j=0; j<g.length; j++) { if (j) { s += ', '; } var af = plot.axes[g[j]]._ticks[0].formatter; var afstr = plot.axes[g[j]]._ticks[0].formatString; s += af(afstr, datapos[g[j]]); } } else { s += $.jqplot.sprintf(c.tooltipFormatString, datapos[g[0]], datapos[g[1]]); } addbr = true; } } if (c.showTooltipDataPosition) { var series = plot.series; var ret = getIntersectingPoints(plot, gridpos.x, gridpos.y); var addbr = false; for (var i = 0; i< series.length; i++) { if (series[i].show) { var idx = series[i].index; var label = series[i].label.toString(); var cellid = $.inArray(idx, ret.indices); var sx = undefined; var sy = undefined; if (cellid != -1) { var data = ret.data[cellid].data; if (c.useAxesFormatters) { var xf = series[i]._xaxis._ticks[0].formatter; var yf = series[i]._yaxis._ticks[0].formatter; var xfstr = series[i]._xaxis._ticks[0].formatString; var yfstr = series[i]._yaxis._ticks[0].formatString; sx = xf(xfstr, data[0]); sy = yf(yfstr, data[1]); } else { sx = data[0]; sy = data[1]; } if (addbr) { s += '<br />'; } s += $.jqplot.sprintf(c.tooltipFormatString, label, sx, sy); addbr = true; } } } } c._tooltipElem.html(s); } function moveLine(gridpos, plot) { var c = plot.plugins.cursor; var ctx = c.cursorCanvas._ctx; ctx.clearRect(0,0,ctx.canvas.width, ctx.canvas.height); if (c.showVerticalLine) { c.shapeRenderer.draw(ctx, [[gridpos.x, 0], [gridpos.x, ctx.canvas.height]]); } if (c.showHorizontalLine) { c.shapeRenderer.draw(ctx, [[0, gridpos.y], [ctx.canvas.width, gridpos.y]]); } var ret = getIntersectingPoints(plot, gridpos.x, gridpos.y); if (c.showCursorLegend) { var cells = $(plot.targetId + ' td.jqplot-cursor-legend-label'); for (var i=0; i<cells.length; i++) { var idx = $(cells[i]).data('seriesIndex'); var series = plot.series[idx]; var label = series.label.toString(); var cellid = $.inArray(idx, ret.indices); var sx = undefined; var sy = undefined; if (cellid != -1) { var data = ret.data[cellid].data; if (c.useAxesFormatters) { var xf = series._xaxis._ticks[0].formatter; var yf = series._yaxis._ticks[0].formatter; var xfstr = series._xaxis._ticks[0].formatString; var yfstr = series._yaxis._ticks[0].formatString; sx = xf(xfstr, data[0]); sy = yf(yfstr, data[1]); } else { sx = data[0]; sy = data[1]; } } if (plot.legend.escapeHtml) { $(cells[i]).text($.jqplot.sprintf(c.cursorLegendFormatString, label, sx, sy)); } else { $(cells[i]).html($.jqplot.sprintf(c.cursorLegendFormatString, label, sx, sy)); } } } ctx = null; } function getIntersectingPoints(plot, x, y) { var ret = {indices:[], data:[]}; var s, i, d0, d, j, r, p; var threshold; var c = plot.plugins.cursor; for (var i=0; i<plot.series.length; i++) { s = plot.series[i]; r = s.renderer; if (s.show) { threshold = c.intersectionThreshold; if (s.showMarker) { threshold += s.markerRenderer.size/2; } for (var j=0; j<s.gridData.length; j++) { p = s.gridData[j]; // check vertical line if (c.showVerticalLine) { if (Math.abs(x-p[0]) <= threshold) { ret.indices.push(i); ret.data.push({seriesIndex: i, pointIndex:j, gridData:p, data:s.data[j]}); } } } } } return ret; } function moveTooltip(gridpos, plot) { var c = plot.plugins.cursor; var elem = c._tooltipElem; switch (c.tooltipLocation) { case 'nw': var x = gridpos.x + plot._gridPadding.left - elem.outerWidth(true) - c.tooltipOffset; var y = gridpos.y + plot._gridPadding.top - c.tooltipOffset - elem.outerHeight(true); break; case 'n': var x = gridpos.x + plot._gridPadding.left - elem.outerWidth(true)/2; var y = gridpos.y + plot._gridPadding.top - c.tooltipOffset - elem.outerHeight(true); break; case 'ne': var x = gridpos.x + plot._gridPadding.left + c.tooltipOffset; var y = gridpos.y + plot._gridPadding.top - c.tooltipOffset - elem.outerHeight(true); break; case 'e': var x = gridpos.x + plot._gridPadding.left + c.tooltipOffset; var y = gridpos.y + plot._gridPadding.top - elem.outerHeight(true)/2; break; case 'se': var x = gridpos.x + plot._gridPadding.left + c.tooltipOffset; var y = gridpos.y + plot._gridPadding.top + c.tooltipOffset; break; case 's': var x = gridpos.x + plot._gridPadding.left - elem.outerWidth(true)/2; var y = gridpos.y + plot._gridPadding.top + c.tooltipOffset; break; case 'sw': var x = gridpos.x + plot._gridPadding.left - elem.outerWidth(true) - c.tooltipOffset; var y = gridpos.y + plot._gridPadding.top + c.tooltipOffset; break; case 'w': var x = gridpos.x + plot._gridPadding.left - elem.outerWidth(true) - c.tooltipOffset; var y = gridpos.y + plot._gridPadding.top - elem.outerHeight(true)/2; break; default: var x = gridpos.x + plot._gridPadding.left + c.tooltipOffset; var y = gridpos.y + plot._gridPadding.top + c.tooltipOffset; break; } elem.css('left', x); elem.css('top', y); elem = null; } function positionTooltip(plot) { // fake a grid for positioning var grid = plot._gridPadding; var c = plot.plugins.cursor; var elem = c._tooltipElem; switch (c.tooltipLocation) { case 'nw': var a = grid.left + c.tooltipOffset; var b = grid.top + c.tooltipOffset; elem.css('left', a); elem.css('top', b); break; case 'n': var a = (grid.left + (plot._plotDimensions.width - grid.right))/2 - elem.outerWidth(true)/2; var b = grid.top + c.tooltipOffset; elem.css('left', a); elem.css('top', b); break; case 'ne': var a = grid.right + c.tooltipOffset; var b = grid.top + c.tooltipOffset; elem.css({right:a, top:b}); break; case 'e': var a = grid.right + c.tooltipOffset; var b = (grid.top + (plot._plotDimensions.height - grid.bottom))/2 - elem.outerHeight(true)/2; elem.css({right:a, top:b}); break; case 'se': var a = grid.right + c.tooltipOffset; var b = grid.bottom + c.tooltipOffset; elem.css({right:a, bottom:b}); break; case 's': var a = (grid.left + (plot._plotDimensions.width - grid.right))/2 - elem.outerWidth(true)/2; var b = grid.bottom + c.tooltipOffset; elem.css({left:a, bottom:b}); break; case 'sw': var a = grid.left + c.tooltipOffset; var b = grid.bottom + c.tooltipOffset; elem.css({left:a, bottom:b}); break; case 'w': var a = grid.left + c.tooltipOffset; var b = (grid.top + (plot._plotDimensions.height - grid.bottom))/2 - elem.outerHeight(true)/2; elem.css({left:a, top:b}); break; default: // same as 'se' var a = grid.right - c.tooltipOffset; var b = grid.bottom + c.tooltipOffset; elem.css({right:a, bottom:b}); break; } elem = null; } function handleClick (ev, gridpos, datapos, neighbor, plot) { ev.preventDefault(); ev.stopImmediatePropagation(); var c = plot.plugins.cursor; if (c.clickReset) { c.resetZoom(plot, c); } var sel = window.getSelection; if (document.selection && document.selection.empty) { document.selection.empty(); } else if (sel && !sel().isCollapsed) { sel().collapse(); } return false; } function handleDblClick (ev, gridpos, datapos, neighbor, plot) { ev.preventDefault(); ev.stopImmediatePropagation(); var c = plot.plugins.cursor; if (c.dblClickReset) { c.resetZoom(plot, c); } var sel = window.getSelection; if (document.selection && document.selection.empty) { document.selection.empty(); } else if (sel && !sel().isCollapsed) { sel().collapse(); } return false; } function handleMouseLeave(ev, gridpos, datapos, neighbor, plot) { var c = plot.plugins.cursor; c.onGrid = false; if (c.show) { $(ev.target).css('cursor', c.previousCursor); if (c.showTooltip && !(c._zoom.zooming && c.showTooltipOutsideZoom && !c.constrainOutsideZoom)) { c._tooltipElem.empty(); c._tooltipElem.hide(); } if (c.zoom) { c._zoom.gridpos = gridpos; c._zoom.datapos = datapos; } if (c.showVerticalLine || c.showHorizontalLine) { var ctx = c.cursorCanvas._ctx; ctx.clearRect(0,0,ctx.canvas.width, ctx.canvas.height); ctx = null; } if (c.showCursorLegend) { var cells = $(plot.targetId + ' td.jqplot-cursor-legend-label'); for (var i=0; i<cells.length; i++) { var idx = $(cells[i]).data('seriesIndex'); var series = plot.series[idx]; var label = series.label.toString(); if (plot.legend.escapeHtml) { $(cells[i]).text($.jqplot.sprintf(c.cursorLegendFormatString, label, undefined, undefined)); } else { $(cells[i]).html($.jqplot.sprintf(c.cursorLegendFormatString, label, undefined, undefined)); } } } } } function handleMouseEnter(ev, gridpos, datapos, neighbor, plot) { var c = plot.plugins.cursor; c.onGrid = true; if (c.show) { c.previousCursor = ev.target.style.cursor; ev.target.style.cursor = c.style; if (c.showTooltip) { updateTooltip(gridpos, datapos, plot); if (c.followMouse) { moveTooltip(gridpos, plot); } else { positionTooltip(plot); } c._tooltipElem.show(); } if (c.showVerticalLine || c.showHorizontalLine) { moveLine(gridpos, plot); } } } function handleMouseMove(ev, gridpos, datapos, neighbor, plot) { var c = plot.plugins.cursor; if (c.show) { if (c.showTooltip) { updateTooltip(gridpos, datapos, plot); if (c.followMouse) { moveTooltip(gridpos, plot); } } if (c.showVerticalLine || c.showHorizontalLine) { moveLine(gridpos, plot); } } } function getEventPosition(ev) { var plot = ev.data.plot; var go = plot.eventCanvas._elem.offset(); var gridPos = {x:ev.pageX - go.left, y:ev.pageY - go.top}; ////// // TO DO: handle yMidAxis ////// var dataPos = {xaxis:null, yaxis:null, x2axis:null, y2axis:null, y3axis:null, y4axis:null, y5axis:null, y6axis:null, y7axis:null, y8axis:null, y9axis:null, yMidAxis:null}; var an = ['xaxis', 'yaxis', 'x2axis', 'y2axis', 'y3axis', 'y4axis', 'y5axis', 'y6axis', 'y7axis', 'y8axis', 'y9axis', 'yMidAxis']; var ax = plot.axes; var n, axis; for (n=11; n>0; 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 = $('<tr class="jqplot-legend jqplot-cursor-legend"></tr>').appendTo(this._elem); tr.data('seriesIndex', idx); $('<td class="jqplot-legend jqplot-cursor-legend-swatch" style="padding-top:'+rs+';">'+ '<div style="border:1px solid #cccccc;padding:0.2em;">'+ '<div class="jqplot-cursor-legend-swatch" style="background-color:'+color+';"></div>'+ '</div></td>').appendTo(tr); var td = $('<td class="jqplot-legend jqplot-cursor-legend-label" style="vertical-align:middle;padding-top:'+rs+';"></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);