Flot Legend - Interactive - flot

Question

Was wondering if there is a plug-in already available for FLOT chart legend to be interactive like in highcharts
Providing the example out here
http://jsfiddle.net/yohanrobert/T3Dpf/1/
However, in a turn of event I tried my hand on mouseover event through jquery
$(".legendLabel").mouseover(function(){
// Unhighlight all points
console.log($(this))
plot.unhighlight();
// The X value to highlight
var value = parseInt($(this).context.innerText.replace('Series ',''))-1;
// Retrieve the data the plot is currently using
var data = plot.getData();
// Iterate over each series and all points
for (var s=0; s<data.length; s++) {
var series = data[s];
if(s==value){
for (var p=0; p<series.data.length; p++) {
plot.highlight(s, p);
}
}
}
});
Can anyone help me achieve the interactivity like in the example?

Answer 1

Extended togglePlot function for different plot types (we save the original plot type in the hidden property):
togglePlot = function (seriesIdx) {
var plotTypes = ['lines', 'points', 'bars'];
var someData = somePlot.getData();
var series = someData[seriesIdx];
$.each(plotTypes, function (index, plotType) {
if (series[plotType]) {
if (series[plotType].show) {
series[plotType].show = false;
series[plotType].hidden = true;
}
else if (series[plotType].hidden) {
series[plotType].show = true;
series[plotType].hidden = false;
}
}
});
somePlot.setData(someData);
somePlot.draw();
}
For highlighting a data series like in highcharts add a highlightPlot function like this (here only for line series):
highlightPlot = function (seriesIdx) {
var someData = somePlot.getData();
$.each(someData, function (index, series) {
someData[index].lines.lineWidth = (index == seriesIdx ? 4 : 2);
});
somePlot.setData(someData);
somePlot.draw();
}
I also changed the inline event handlers to jQuery event handling to make it cleaner:
$(document).on({
click: function () {
togglePlot($(this).data('index'));
return false;
},
mouseover: function () {
highlightPlot($(this).data('index'));
},
mouseout: function () {
highlightPlot(-1);
},
}, 'a.legend');
See this updated fiddle for the full example.