CODEWITHSUNDEEP
jqueryflotlinechart
Kamilius
Kamilius

Reputation: 587

JQuery Flotcharts Line chart - highlight particular series

Is there a possibility to highlight particular lines (not points, but whole series) on jQuery Flotchart? If no direct possibility, maybe someone has it's own snippets on this?

Would be much appreciated.

Edit1: Under "Highlight" i mean at least - changing thickness of a line.

Upvotes: 1

Views: 978

Answers (1)

Mark
Mark

Reputation: 108512

Here's how I did it on a recent project. This will "dim" the lines not clicked on (set opacity to 0.1). Clicking on nothing will bring all series back to 1.0 opacity:

$("#container").bind("plotclick", function (event, pos, item) {
    var re = re = /\(([0-9]+,[0-9]+,[0-9]+)/;
    var opacity = 1;
    var seriesIdx = -1;
    // note which item is clicked on
    if (item) {
        seriesIdx = item.seriesIndex;
        opacity = 0.1;
    }
    // loop all the series and adjust the opacity 
    var modSeries = 
    $.map(somePlot.getData(),function(series,idx){
        if (idx == seriesIdx){
           series.color = 'rgba(' + re.exec(series.color )[1] + ',' + 1 + ')';
        } else {
            series.color = 'rgba(' + re.exec(series.color )[1] + ',' + opacity + ')';
        }
       return series;
    });
    // reload the series and redraw
    somePlot.setData(modSeries);
    somePlot.draw();
});

This produces (fiddle here):

enter image description here

This should be pretty easy to extend to lineWidth if desired.

Upvotes: 3

Related Questions