123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465 |
- (function($) {
- $.jqplot.eventListenerHooks.push(['jqplotMouseMove', handleMove]);
-
-
- $.jqplot.Highlighter = function(options) {
-
-
-
-
- this.show = $.jqplot.config.enablePlugins;
-
-
-
-
-
- this.markerRenderer = new $.jqplot.MarkerRenderer({shadow:false});
-
-
- this.showMarker = true;
-
-
- this.lineWidthAdjust = 2.5;
-
-
- this.sizeAdjust = 5;
-
-
- this.showTooltip = true;
-
-
- this.tooltipLocation = 'nw';
-
-
- this.fadeTooltip = true;
-
-
- this.tooltipFadeSpeed = "fast";
-
-
- this.tooltipOffset = 2;
-
-
-
- this.tooltipAxes = 'both';
-
-
- this.tooltipSeparator = ', ';
-
-
-
-
-
- this.tooltipContentEditor = null;
-
-
- this.useAxesFormatters = true;
-
-
-
-
-
-
- this.tooltipFormatString = '%.5P';
-
-
-
-
-
-
-
-
- this.formatString = null;
-
-
-
-
- this.yvalues = 1;
-
-
-
-
- this.bringSeriesToFront = false;
- this._tooltipElem;
- this.isHighlighting = false;
- this.currentNeighbor = null;
- $.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'];
-
-
-
-
- $.jqplot.Highlighter.init = function (target, data, opts){
- var options = opts || {};
-
- this.plugins.highlighter = new $.jqplot.Highlighter(options.highlighter);
- };
-
-
- $.jqplot.Highlighter.parseOptions = function (defaults, options) {
-
-
- this.showHighlight = true;
- };
-
-
-
-
- $.jqplot.Highlighter.postPlotDraw = function() {
-
- 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) {
-
-
-
- var hl = plot.plugins.highlighter;
- var elem = hl._tooltipElem;
- var serieshl = series.highlighter || {};
- var opts = $.extend(true, {}, hl, serieshl);
- if (opts.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<opts.yvalues+1; i++) {
- ystrs.push(yf(yfstr, neighbor.data[i]));
- }
- if (typeof opts.formatString === 'string') {
- switch (opts.tooltipAxes) {
- case 'both':
- case 'xy':
- ystrs.unshift(xstr);
- ystrs.unshift(opts.formatString);
- str = $.jqplot.sprintf.apply($.jqplot.sprintf, ystrs);
- break;
- case 'yx':
- ystrs.push(xstr);
- ystrs.unshift(opts.formatString);
- str = $.jqplot.sprintf.apply($.jqplot.sprintf, ystrs);
- break;
- case 'x':
- str = $.jqplot.sprintf.apply($.jqplot.sprintf, [opts.formatString, xstr]);
- break;
- case 'y':
- ystrs.unshift(opts.formatString);
- str = $.jqplot.sprintf.apply($.jqplot.sprintf, ystrs);
- break;
- default:
- ystrs.unshift(xstr);
- ystrs.unshift(opts.formatString);
- str = $.jqplot.sprintf.apply($.jqplot.sprintf, ystrs);
- break;
- }
- }
- else {
- switch (opts.tooltipAxes) {
- case 'both':
- case 'xy':
- str = xstr;
- for (var i=0; i<ystrs.length; i++) {
- str += opts.tooltipSeparator + ystrs[i];
- }
- break;
- case 'yx':
- str = '';
- for (var i=0; i<ystrs.length; i++) {
- str += ystrs[i] + opts.tooltipSeparator;
- }
- str += xstr;
- break;
- case 'x':
- str = xstr;
- break;
- case 'y':
- str = ystrs.join(opts.tooltipSeparator);
- break;
- default:
- str = xstr;
- for (var i=0; i<ystrs.length; i++) {
- str += opts.tooltipSeparator + ystrs[i];
- }
- break;
-
- }
- }
- }
- else {
- var str;
- if (typeof opts.formatString === 'string') {
- str = $.jqplot.sprintf.apply($.jqplot.sprintf, [opts.formatString].concat(neighbor.data));
- }
- else {
- if (opts.tooltipAxes == 'both' || opts.tooltipAxes == 'xy') {
- str = $.jqplot.sprintf(opts.tooltipFormatString, neighbor.data[0]) + opts.tooltipSeparator + $.jqplot.sprintf(opts.tooltipFormatString, neighbor.data[1]);
- }
- else if (opts.tooltipAxes == 'yx') {
- str = $.jqplot.sprintf(opts.tooltipFormatString, neighbor.data[1]) + opts.tooltipSeparator + $.jqplot.sprintf(opts.tooltipFormatString, neighbor.data[0]);
- }
- else if (opts.tooltipAxes == 'x') {
- str = $.jqplot.sprintf(opts.tooltipFormatString, neighbor.data[0]);
- }
- else if (opts.tooltipAxes == 'y') {
- str = $.jqplot.sprintf(opts.tooltipFormatString, neighbor.data[1]);
- }
- }
- }
- if ($.isFunction(opts.tooltipContentEditor)) {
-
-
- str = opts.tooltipContentEditor(str, neighbor.seriesIndex, neighbor.pointIndex, plot);
- }
- elem.html(str);
- var gridpos = {x:neighbor.gridData[0], y:neighbor.gridData[1]};
- var ms = 0;
- var fact = 0.707;
- if (series.markerRenderer.show == true) {
- ms = (series.markerRenderer.size + opts.sizeAdjust)/2;
- }
- var loc = locations;
- if (series.fillToZero && series.fill && neighbor.data[1] < 0) {
- loc = oppositeLocations;
- }
- switch (loc[locationIndicies[opts.tooltipLocation]]) {
- case 'nw':
- var x = gridpos.x + plot._gridPadding.left - elem.outerWidth(true) - opts.tooltipOffset - fact * ms;
- var y = gridpos.y + plot._gridPadding.top - opts.tooltipOffset - elem.outerHeight(true) - fact * ms;
- break;
- case 'n':
- var x = gridpos.x + plot._gridPadding.left - elem.outerWidth(true)/2;
- var y = gridpos.y + plot._gridPadding.top - opts.tooltipOffset - elem.outerHeight(true) - ms;
- break;
- case 'ne':
- var x = gridpos.x + plot._gridPadding.left + opts.tooltipOffset + fact * ms;
- var y = gridpos.y + plot._gridPadding.top - opts.tooltipOffset - elem.outerHeight(true) - fact * ms;
- break;
- case 'e':
- var x = gridpos.x + plot._gridPadding.left + opts.tooltipOffset + ms;
- var y = gridpos.y + plot._gridPadding.top - elem.outerHeight(true)/2;
- break;
- case 'se':
- var x = gridpos.x + plot._gridPadding.left + opts.tooltipOffset + fact * ms;
- var y = gridpos.y + plot._gridPadding.top + opts.tooltipOffset + fact * ms;
- break;
- case 's':
- var x = gridpos.x + plot._gridPadding.left - elem.outerWidth(true)/2;
- var y = gridpos.y + plot._gridPadding.top + opts.tooltipOffset + ms;
- break;
- case 'sw':
- var x = gridpos.x + plot._gridPadding.left - elem.outerWidth(true) - opts.tooltipOffset - fact * ms;
- var y = gridpos.y + plot._gridPadding.top + opts.tooltipOffset + fact * ms;
- break;
- case 'w':
- var x = gridpos.x + plot._gridPadding.left - elem.outerWidth(true) - opts.tooltipOffset - ms;
- var y = gridpos.y + plot._gridPadding.top - elem.outerHeight(true)/2;
- break;
- default:
- var x = gridpos.x + plot._gridPadding.left - elem.outerWidth(true) - opts.tooltipOffset - fact * ms;
- var y = gridpos.y + plot._gridPadding.top - opts.tooltipOffset - elem.outerHeight(true) - fact * ms;
- break;
- }
- elem.css('left', x);
- elem.css('top', y);
- if (opts.fadeTooltip) {
-
- elem.stop(true,true).fadeIn(opts.tooltipFadeSpeed);
- }
- else {
- elem.show();
- }
- elem = null;
-
- }
-
- function handleMove(ev, gridpos, datapos, neighbor, plot) {
- var hl = plot.plugins.highlighter;
- var c = plot.plugins.cursor;
- if (hl.show) {
- if (neighbor == null && hl.isHighlighting) {
- var evt = jQuery.Event('jqplotHighlighterUnhighlight');
- plot.target.trigger(evt);
- var ctx = hl.highlightCanvas._ctx;
- ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
- if (hl.fadeTooltip) {
- hl._tooltipElem.fadeOut(hl.tooltipFadeSpeed);
- }
- else {
- hl._tooltipElem.hide();
- }
- if (hl.bringSeriesToFront) {
- plot.restorePreviousSeriesOrder();
- }
- hl.isHighlighting = false;
- hl.currentNeighbor = null;
- ctx = null;
- }
- else if (neighbor != null && plot.series[neighbor.seriesIndex].showHighlight && !hl.isHighlighting) {
- var evt = jQuery.Event('jqplotHighlighterHighlight');
- evt.which = ev.which;
- evt.pageX = ev.pageX;
- evt.pageY = ev.pageY;
- var ins = [neighbor.seriesIndex, neighbor.pointIndex, neighbor.data, plot];
- plot.target.trigger(evt, ins);
- hl.isHighlighting = true;
- hl.currentNeighbor = neighbor;
- if (hl.showMarker) {
- draw(plot, neighbor);
- }
- if (plot.series[neighbor.seriesIndex].show && hl.showTooltip && (!c || !c._zoom.started)) {
- showTooltip(plot, plot.series[neighbor.seriesIndex], neighbor);
- }
- if (hl.bringSeriesToFront) {
- plot.moveSeriesToFront(neighbor.seriesIndex);
- }
- }
-
- else if (neighbor != null && hl.isHighlighting && hl.currentNeighbor != neighbor) {
-
-
- if (plot.series[neighbor.seriesIndex].showHighlight) {
- var ctx = hl.highlightCanvas._ctx;
- ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
- hl.isHighlighting = true;
- hl.currentNeighbor = neighbor;
- if (hl.showMarker) {
- draw(plot, neighbor);
- }
- if (plot.series[neighbor.seriesIndex].show && hl.showTooltip && (!c || !c._zoom.started)) {
- showTooltip(plot, plot.series[neighbor.seriesIndex], neighbor);
- }
- if (hl.bringSeriesToFront) {
- plot.moveSeriesToFront(neighbor.seriesIndex);
- }
- }
- }
- }
- }
- })(jQuery);
|