/** * jqPlot * Pure JavaScript plotting plugin using jQuery * * Version: 1.0.0b2_r792 * * Copyright (c) 2009-2011 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($) { $.jqplot.eventListenerHooks.push(['jqplotMouseMove', handleMove]); /** * Class: $.jqplot.Highlighter * Plugin which will highlight data points when they are moused over. * * To use this plugin, include the js * file in your source: * * > * * A tooltip providing information about the data point is enabled by default. * To disable the tooltip, set "showTooltip" to false. * * You can control what data is displayed in the tooltip with various * options. The "tooltipAxes" option controls wether the x, y or both * data values are displayed. * * Some chart types (e.g. hi-low-close) have more than one y value per * data point. To display the additional values in the tooltip, set the * "yvalues" option to the desired number of y values present (3 for a hlc chart). * * By default, data values will be formatted with the same formatting * specifiers as used to format the axis ticks. A custom format code * can be supplied with the tooltipFormatString option. This will apply * to all values in the tooltip. * * For more complete control, the "formatString" option can be set. This * Allows conplete control over tooltip formatting. Values are passed to * the format string in an order determined by the "tooltipAxes" and "yvalues" * options. So, if you have a hi-low-close chart and you just want to display * the hi-low-close values in the tooltip, you could set a formatString like: * * > highlighter: { * > tooltipAxes: 'y', * > yvalues: 3, * > formatString:' * > * > * >
hi:%s
low:%s
close:%s
' * > } * */ $.jqplot.Highlighter = function(options) { // Group: Properties // //prop: show // true to show the highlight. this.show = $.jqplot.config.enablePlugins; // prop: markerRenderer // Renderer used to draw the marker of the highlighted point. // Renderer will assimilate attributes from the data point being highlighted, // so no attributes need set on the renderer directly. // Default is to turn off shadow drawing on the highlighted point. this.markerRenderer = new $.jqplot.MarkerRenderer({shadow:false}); // prop: showMarker // true to show the marker this.showMarker = true; // prop: lineWidthAdjust // Pixels to add to the lineWidth of the highlight. this.lineWidthAdjust = 2.5; // prop: sizeAdjust // Pixels to add to the overall size of the highlight. this.sizeAdjust = 5; // prop: showTooltip // Show a tooltip with data point values. this.showTooltip = true; // prop: tooltipLocation // Where to position tooltip, 'n', 'ne', 'e', 'se', 's', 'sw', 'w', 'nw' this.tooltipLocation = 'nw'; // prop: fadeTooltip // true = fade in/out tooltip, flase = show/hide tooltip this.fadeTooltip = true; // prop: tooltipFadeSpeed // 'slow', 'def', 'fast', or number of milliseconds. this.tooltipFadeSpeed = "fast"; // prop: tooltipOffset // Pixel offset of tooltip from the highlight. this.tooltipOffset = 2; // prop: tooltipAxes // Which axes to display in tooltip, 'x', 'y' or 'both', 'xy' or 'yx' // 'both' and 'xy' are equivalent, 'yx' reverses order of labels. this.tooltipAxes = 'both'; // prop; tooltipSeparator // String to use to separate x and y axes in tooltip. this.tooltipSeparator = ', '; // prop; tooltipContentEditor // Function used to edit/augment/replace the formatted tooltip contents. // Called as str = tooltipContentEditor(str, seriesIndex, pointIndex) // where str is the generated tooltip html and seriesIndex and pointIndex identify // the data point being highlighted. Should return the html for the tooltip contents. this.tooltipContentEditor = null; // prop: useAxesFormatters // Use the x and y axes formatters to format the text in the tooltip. this.useAxesFormatters = true; // 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. // Additional "p" and "P" format specifiers added by Chris Leonello. this.tooltipFormatString = '%.5P'; // prop: formatString // alternative to tooltipFormatString // will format the whole tooltip text, populating with x, y values as // indicated by tooltipAxes option. So, you could have a tooltip like: // 'Date: %s, number of cats: %d' to format the whole tooltip at one go. // If useAxesFormatters is true, values will be formatted according to // Axes formatters and you can populate your tooltip string with // %s placeholders. this.formatString = null; // prop: yvalues // Number of y values to expect in the data point array. // Typically this is 1. Certain plots, like OHLC, will // have more y values in each data point array. this.yvalues = 1; // prop: bringSeriesToFront // This option requires jQuery 1.4+ // True to bring the series of the highlighted point to the front // of other series. this.bringSeriesToFront = false; this._tooltipElem; this.isHighlighting = false; $.extend(true, this, options); }; var locations = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w']; var locationIndicies = {'nw':0, 'n':1, 'ne':2, 'e':3, 'se':4, 's':5, 'sw':6, 'w':7}; var oppositeLocations = ['se', 's', 'sw', 'w', 'nw', 'n', 'ne', 'e']; // axis.renderer.tickrenderer.formatter // called with scope of plot $.jqplot.Highlighter.init = function (target, data, opts){ var options = opts || {}; // add a highlighter attribute to the plot this.plugins.highlighter = new $.jqplot.Highlighter(options.highlighter); }; // called within scope of series $.jqplot.Highlighter.parseOptions = function (defaults, options) { // Add a showHighlight option to the series // and set it to true by default. this.showHighlight = true; }; // called within context of plot // create a canvas which we can draw on. // insert it before the eventCanvas, so eventCanvas will still capture events. $.jqplot.Highlighter.postPlotDraw = function() { // Memory Leaks patch if (this.plugins.highlighter && this.plugins.highlighter.highlightCanvas) { this.plugins.highlighter.highlightCanvas.resetCanvas(); this.plugins.highlighter.highlightCanvas = null; } if (this.plugins.highlighter && this.plugins.highlighter._tooltipElem) { this.plugins.highlighter._tooltipElem.emptyForce(); this.plugins.highlighter._tooltipElem = null; } this.plugins.highlighter.highlightCanvas = new $.jqplot.GenericCanvas(); this.eventCanvas._elem.before(this.plugins.highlighter.highlightCanvas.createElement(this._gridPadding, 'jqplot-highlight-canvas', this._plotDimensions, this)); this.plugins.highlighter.highlightCanvas.setContext(); var elem = document.createElement('div'); this.plugins.highlighter._tooltipElem = $(elem); elem = null; this.plugins.highlighter._tooltipElem.addClass('jqplot-highlighter-tooltip'); this.plugins.highlighter._tooltipElem.css({position:'absolute', display:'none'}); this.eventCanvas._elem.before(this.plugins.highlighter._tooltipElem); }; $.jqplot.preInitHooks.push($.jqplot.Highlighter.init); $.jqplot.preParseSeriesOptionsHooks.push($.jqplot.Highlighter.parseOptions); $.jqplot.postDrawHooks.push($.jqplot.Highlighter.postPlotDraw); function draw(plot, neighbor) { var hl = plot.plugins.highlighter; var s = plot.series[neighbor.seriesIndex]; var smr = s.markerRenderer; var mr = hl.markerRenderer; mr.style = smr.style; mr.lineWidth = smr.lineWidth + hl.lineWidthAdjust; mr.size = smr.size + hl.sizeAdjust; var rgba = $.jqplot.getColorComponents(smr.color); var newrgb = [rgba[0], rgba[1], rgba[2]]; var alpha = (rgba[3] >= 0.6) ? rgba[3]*0.6 : rgba[3]*(2-rgba[3]); mr.color = 'rgba('+newrgb[0]+','+newrgb[1]+','+newrgb[2]+','+alpha+')'; mr.init(); mr.draw(s.gridData[neighbor.pointIndex][0], s.gridData[neighbor.pointIndex][1], hl.highlightCanvas._ctx); } function showTooltip(plot, series, neighbor) { // neighbor looks like: {seriesIndex: i, pointIndex:j, gridData:p, data:s.data[j]} // gridData should be x,y pixel coords on the grid. // add the plot._gridPadding to that to get x,y in the target. var hl = plot.plugins.highlighter; var elem = hl._tooltipElem; if (hl.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; var str; var xstr = xf(xfstr, neighbor.data[0]); var ystrs = []; for (var i=1; i