There are several steps you can take to optimize your fleet drawing process. If you do not need points on the chart, turn them off, this will significantly reduce the drawing time. You should also turn off shadows by setting shadowSize to 0 to improve speed.
In addition to these two settings, you will have to change the source code of the fleet to select a series separately. I created a patch that does just that, along with a small plugin that allows you to select a series automatically or manually. The patch and plugin can be up to three times faster than redrawing the entire chart, and also virtually eliminates the time required to unselect the series, since it uses the fleet “overlay” function.
There is a patch for jquery.flot.js and the source code for the highlightSeries plugin below, and I created a demo page that allows you to see the difference between the various settings, as well as the patch / plugin combination.
Patch patch
--- .\jquery.flot.js +++ .\jquery.flot.js @@ -147,6 +147,7 @@ plot.setData = setData; plot.setupGrid = setupGrid; plot.draw = draw; + plot.drawSeries = drawSeries; plot.getPlaceholder = function() { return placeholder; }; plot.getCanvas = function() { return canvas; }; plot.getPlotOffset = function() { return plotOffset; }; @@ -164,6 +165,7 @@ plot.highlight = highlight; plot.unhighlight = unhighlight; plot.triggerRedrawOverlay = triggerRedrawOverlay; + plot.drawOverlay = drawOverlay; plot.pointOffset = function(point) { return { left: parseInt(axisSpecToRealAxis(point, "xaxis").p2c(+point.x) + plotOffset.left), top: parseInt(axisSpecToRealAxis(point, "yaxis").p2c(+point.y) + plotOffset.top) }; @@ -1059,7 +1061,7 @@ drawGrid(); for (var i = 0; i < series.length; ++i) - drawSeries(series[i]); + drawSeries(series[i], ctx); executeHooks(hooks.draw, [ctx]); @@ -1265,16 +1267,16 @@ placeholder.append(html.join("")); } - function drawSeries(series) { + function drawSeries(series, ctx) { if (series.lines.show) - drawSeriesLines(series); + drawSeriesLines(series, ctx); if (series.bars.show) - drawSeriesBars(series); + drawSeriesBars(series, ctx); if (series.points.show) - drawSeriesPoints(series); + drawSeriesPoints(series, ctx); } - function drawSeriesLines(series) { + function drawSeriesLines(series, ctx) { function plotLine(datapoints, xoffset, yoffset, axisx, axisy) { var points = datapoints.points, ps = datapoints.pointsize, @@ -1522,7 +1524,7 @@ ctx.restore(); } - function drawSeriesPoints(series) { + function drawSeriesPoints(series, ctx) { function plotPoints(datapoints, radius, fillStyle, offset, circumference, axisx, axisy) { var points = datapoints.points, ps = datapoints.pointsize; @@ -1675,7 +1677,7 @@ } } - function drawSeriesBars(series) { + function drawSeriesBars(series, ctx) { function plotBars(datapoints, barLeft, barRight, offset, fillStyleCallback, axisx, axisy) { var points = datapoints.points, ps = datapoints.pointsize; @@ -1942,7 +1944,7 @@ if (hi.series.bars.show) drawBarHighlight(hi.series, hi.point); - else + else if (hi.series.points.show) drawPointHighlight(hi.series, hi.point); } octx.restore();
highlightSeries plugin
(function ($) { var log = (function () { var out = $("#out"); return function () { if (!arguments) { return; } var msg = Array.prototype.slice.call(arguments).join(" "); if (!out.length) { out = $("#out"); } if (out.length) { out.text(msg); } }; })(); var options = { highlightSeries: { autoHighlight: true , color: "black" , _optimized: true , _debug: false } }; function init(plot) { var highlightedSeries = {}; var originalColors = {}; function highlightSeries(series, color) { var seriesAndIndex = getSeriesAndIndex(series) , options = plot.getOptions().highlightSeries; series = seriesAndIndex[1]; highlightedSeries[seriesAndIndex[0]] = series; originalColors[seriesAndIndex[0]] = series.color; series.color = color || options.color; if (options._debug) { var start = new Date(); } if (options._optimized) { if (plot.drawOverlay && options._debug) { plot.drawOverlay(); } else { plot.triggerRedrawOverlay(); } } else { plot.draw(); } if (options._debug) { log("Time taken to highlight:", (new Date()).getTime() - start.getTime(), "ms"); } }; plot.highlightSeries = highlightSeries; function unHighlightSeries(series) { var seriesAndIndex = getSeriesAndIndex(series) , options = plot.getOptions().highlightSeries; seriesAndIndex[1].color = originalColors[seriesAndIndex[0]]; if (options._debug) { var start = new Date(); } if (options._optimized) { delete highlightedSeries[seriesAndIndex[0]]; if (plot.drawOverlay && options._debug) { plot.drawOverlay(); } else { plot.triggerRedrawOverlay(); } } else { plot.draw(); } if (options._debug) { log("Time taken to un-highlight:", (new Date()).getTime() - start.getTime(), "ms"); } }; plot.unHighlightSeries = unHighlightSeries; plot.hooks.bindEvents.push(function (plot, eventHolder) { if (!plot.getOptions().highlightSeries.autoHighlight) { return; } var lastHighlighted = null; plot.getPlaceholder().bind("plothover", function (evt, pos, item) { if (item && lastHighlighted !== item.series) { for(var seriesIndex in highlightedSeries) { delete highlightedSeries[seriesIndex]; } if (lastHighlighted) { unHighlightSeries(lastHighlighted); } lastHighlighted = item.series; highlightSeries(item.series); } else if (!item && lastHighlighted) { unHighlightSeries(lastHighlighted); lastHighlighted = null; } }); }); function getSeriesAndIndex(series) { var allPlotSeries = plot.getData(); if (typeof series == "number") { return [series, allPlotSeries[series]]; } else { for (var ii = 0; ii < allPlotSeries.length; ii++) { var plotSeries = allPlotSeries[ii]; if ( plotSeries === series || plotSeries.label === series || plotSeries.label === series.label ) { return [ii, plotSeries]; } } } } plot.hooks.drawOverlay.push(function (plot, ctx) { for(var seriesIndex in highlightedSeries) { plot.drawSeries(highlightedSeries[seriesIndex], ctx); } }); } $.plot.plugins.push({ init: init, options: options, name: "highlightSeries", version: "1.0" }); })(jQuery);