/** * Copyright (c) 2009 Chris Leonello * jqPlot is currently available for use in all personal or commercial projects * under both the MIT and GPL version 2.0 licenses. This means that you can * choose the license that best suits your project and use it accordingly. * * The author would appreciate an email letting him know of any substantial * use of jqPlot. You can reach the author at: chris dot leonello at gmail * dot com or see http://www.jqplot.com/info.php . This is, of course, * not required. * * If you are feeling kind and generous, consider supporting the project by * making a donation at: http://www.jqplot.com/donate.php . * * Thanks for using jqPlot! * */ (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 // wether to show the cursor or not. this.show = $.jqplot.config.enablePlugins; // prop: showTooltip // show a cursor position tooltip near the cursor 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: 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:{}}}; 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; $.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]); $.jqplot.eventListenerHooks.push(['jqplotMouseUp', handleMouseUp]); 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(); } this.redraw(); } else { var ctx = this.plugins.cursor.zoomCanvas._ctx; ctx.clearRect(0,0,ctx.canvas.width, ctx.canvas.height); } 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; // if (c.zoom) { c.zoomCanvas = new $.jqplot.GenericCanvas(); this.eventCanvas._elem.before(c.zoomCanvas.createElement(this._gridPadding, 'jqplot-zoom-canvas', this._plotDimensions)); var zctx = c.zoomCanvas.setContext(); // } c._tooltipElem = $('
'); c.zoomCanvas._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)); var zctx = 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