Flot - set line vertical order (z-index)

Question

I have a line chart with ~30 series in different colours with an html table below where each table row represents a series, I have created a .hover() handler on the table rows so that when you hover on a row all of the series on the graph turn grey except for the corresponding row

So with no hover the graph looks like this...

And with the table hor hovered it looks like...

Problem is, that I also want to make this selected series display on top of all the others (its z-index) and I cannot see any options to do this

I have tried re-ordering the series array to put the selected series at the front of the array then calling plot.draw() but this doesn't have any effect on the order (see below)

Any ideas on how this can be achieved?

                                    for(var i=0;i<_st_usage_json.length;i++){
                                        var json = _st_usage_json[i];
                                        var row = jQuery("<tr></tr>")
                                            .data("index",i)
                                            .hover(function(){

                                                if(selectedSeriesIndex!=jQuery(this).data("index")){
                                                    selectedSeriesIndex = jQuery(this).data("index");
                                                    var plot = jQuery("#poolUsagePlot").data("plot")
                                                    var series = plot.getData();
                                                    for (var i = 0; i < series.length; ++i) {
                                                        series[i].color = "rgb(100,100,100)";
                                                    }
                                                    var selectedSeries = series[selectedSeriesIndex];
                                                    selectedSeries.color = 'rgb(0,183,255)';
                                                    series.splice(selectedSeriesIndex,1);
                                                    series.unshift(selectedSeries);
                                                    console.log(series)
                                                    plot.draw();
                                                }


                                            })

Answer 1

You have the right idea, but need to put the selected series at the end, not the beginning, of the array.

The series are drawn in order, and for the selected one to cover the others it needs to be drawn last.