Turn long list of items in Highcharts legend into dropdown

Question

I have a graph with some 40 items as separate lines. Now, I need to add the functionality of turning on/off or highlighting any of these via legend/menu/dropdown list.

Normally, when the legend is turned on, I can click on any item and turn it on/off there. However, the very long legend really skews (the beauty of) my graph. Is there any way to achieve the same thing (turning on/off) with a drop-down menu? That could be visually much more attractive.

Otherwise, last resort, a simple button "turn on/off" legend need to suffice then (like this example, although the "turn on" doesn't work).

// turn legend on/off with HTML button
function(chart){
    $('#updateLegend').click(function (e) {
        var legend = chart.legend; 

        if(legend.display) {
            legend.group.hide();
            legend.box.hide();
            legend.display = false;
        } else {

            legend.group.show();
            legend.box.show();
            legend.display = true;
        }
    });
}

Answer 1

You can prepare dynamic dropdown legend, based on series. Only what you need is loop over each of serie and push as option to select. Then add event change, where you show/hide serie.

var $customLegend = $('#customLegend').append('<select id="customSelect"></select>').find('select'),
        $option,
        serie;

    $customLegend.append('<option>Select serie</option>');

    $.each(chart.series, function(i, serie){
        $customLegend.append('<option>' + serie.name + '</option>');
    });

    $customLegend.change(function(){

        $option = $(this).val();

        serie = chart.get($option);

        if(serie.visible) {
            serie.hide();
        } else {
            serie.show();
        }
    });

Example: http://jsfiddle.net/b8chchjo/