96 lines
2.9 KiB
JavaScript
96 lines
2.9 KiB
JavaScript
(function($) {
|
|
|
|
var options = {
|
|
multihighlight: {
|
|
mode: null, // null, x or y.
|
|
linkedPlots: null, // null or array of plots.
|
|
hoverMode: null // null, point or bar.
|
|
}
|
|
};
|
|
|
|
function init(plot) {
|
|
|
|
// Builds an array of plots to highlight - the current plot and all the linked plots if any.
|
|
function getPlotsToHighlight() {
|
|
var plotsToHighlight = [ plot ];
|
|
if (plot.getOptions().multihighlight.linkedPlots != null) {
|
|
$.each(plot.getOptions().multihighlight.linkedPlots, function(index, linkedPlot){
|
|
plotsToHighlight.push(linkedPlot);
|
|
});
|
|
}
|
|
return plotsToHighlight;
|
|
}
|
|
|
|
function onPlotHover(event, position, item) {
|
|
$.each(getPlotsToHighlight(), function(index, plotToHighlight) {
|
|
if (!plotToHighlight.getOptions().multihighlight.mode != null) {
|
|
plotToHighlight.unhighlight();
|
|
|
|
var axisPosition = plotToHighlight.getOptions().multihighlight.mode == 'x' ? position.x : position.y;
|
|
var dataIndex = plotToHighlight.getOptions().multihighlight.mode == 'x' ? 0 : 1;
|
|
|
|
var highlightedItems = new Array();
|
|
$.each(plotToHighlight.getData(), function(i, serie) {
|
|
var j;
|
|
|
|
for (j = 0; j < serie.data.length; j++) {
|
|
if (serie.data[j] == null || serie.data[j][dataIndex] > axisPosition) {
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (j != 0) {
|
|
var highlighted = j-1;
|
|
// Checking which one is closer if it is not a bar graph.
|
|
if (plotToHighlight.getOptions().multihighlight.hoverMode !== 'bar' && serie.data[j] != null) {
|
|
if (axisPosition-serie.data[j-1][dataIndex] > Math.abs(axisPosition-serie.data[j][dataIndex])) {
|
|
highlighted = j;
|
|
}
|
|
}
|
|
|
|
plotToHighlight.highlight(i, highlighted);
|
|
highlightedItems.push({ serieIndex: i, dataIndex: highlighted });
|
|
}
|
|
});
|
|
|
|
if (highlightedItems.length > 0) {
|
|
plotToHighlight.getPlaceholder().trigger("multihighlighted", [ position, highlightedItems ]);
|
|
}
|
|
else {
|
|
plotToHighlight.getPlaceholder().trigger("unmultihighlighted");
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function onMouseOut(event) {
|
|
$.each(getPlotsToHighlight(), function(index, plotToHighlight) {
|
|
if (!plotToHighlight.getOptions().multihighlight.mode != null) {
|
|
plotToHighlight.unhighlight();
|
|
plotToHighlight.getPlaceholder().trigger("unmultihighlighted");
|
|
}
|
|
});
|
|
}
|
|
|
|
// Hook up the events.
|
|
plot.hooks.bindEvents.push(function(plot, eventHolder) {
|
|
if (!plot.getOptions().multihighlight.mode)
|
|
return;
|
|
|
|
plot.getPlaceholder().bind('plothover', onPlotHover);
|
|
plot.getPlaceholder().bind('mouseout', onMouseOut);
|
|
});
|
|
plot.hooks.shutdown.push(function(plot, eventHolder) {
|
|
plot.getPlaceholder().unbind('plothover', onPlotHover);
|
|
plot.getPlaceholder().unbind('mouseout', onMouseOut);
|
|
});
|
|
}
|
|
|
|
$.plot.plugins.push({
|
|
init: init,
|
|
options: options,
|
|
name: 'multihighlight',
|
|
version: '1.0'
|
|
});
|
|
})(jQuery);
|