flot legend swatch usage

Question

Hello and thanks in advance for the help, guidance and encouragement. I am something of a crack coder... largely self taught and semi successful.

So here is the challenge. I have a flot plot, which has a custom built legend with the color swatches, persistent swatches (they don't turn off), data set toggling and everything. But the swatches only appear if I have the default legend visible. That is, is I set the legend to "show : false" the swatches do not display in my customized legend either.

Is there a way to turn off / hide the default legend yet still access the color pallet / swatches available for the custom legend?

Here is the code chunk... it has a few other things going on, some of which I cut out for clarity...

  var options = {
      yaxis: { min: 0 },
      xaxis: { tickDecimals: 0 },
      xaxes: [{
            axisLabel: 'Frequency (Hz)',
        }],
        yaxes: [{
        position: 'left',
        axisLabel: 'Power (dB)',
        }],
        series: {
                lines: {
                    lineWidth: 2,
                    show: true
                },
                points: {
                    show: false
                }
        },
        legend: {
            container: $("#labeler<?php echo $i ?>"),
            show: true,
            labelFormatter: function(label, series) {

         }
    },
    grid:{
        hoverable: true
       }

     };    

     var track = 0;
    // hard-code color indices to prevent them from shifting as
    // datasets are turned on/off
    var i = 0;
    $.each(datasets, function(key, val) {
        val.color = i;
        ++i;
    });

    // insert checkboxes 
    var choiceContainer = $("#choices<?php echo $i ?>");
     choiceContainer.append('<table><tr>');
    $.each(datasets, function(key, val) {
            track = track + 1;
            if (track == 1){
                choiceContainer.append('<td width=\"100\">Left Channel</td>');
            } else if(track == <?php echo $tracks ?>){
                choiceContainer.append('</tr><tr>');
                choiceContainer.append('<td>Right Channel</td>');
            }
            choiceContainer.append('<td width=\"45\"><input type="checkbox" name="' + key +
                               '" checked="checked" id="id' + key + '">' +
                               '<div style=\"width:18px; white-space:nowrap; float:left\"><bar /></div><label for="id' + key + '">'
                                + val.label + '</label></td>');


    });
    choiceContainer.append('</tr></table>');
    choiceContainer.find("input").change(plotAccordingToChoices);

    function plotAccordingToChoices() {
        var data = [];

        choiceContainer.find("input:checked").each(function () {
            var key = $(this).attr("name");
            if (key && datasets[key])
                data.push(datasets[key]);
        });

         if (data.length > 0){
             $.plot($("#placeholder<?php echo $i ?>"), data, options);
         }
    }
    plotAccordingToChoices();

        $('.legendColorBox > div').each(function(i){
            $(this).clone().prependTo(choiceContainer.find("bar").eq(i));
        });

Answer 1

From your code it looks like you are appending your "custom" legend to a clone of the legend built by flot. If you disable the flot legend then your $('.legendColorBox > div') selector won't find anything to clone. You can hack it and hide the original flot legend after the clone or remove your requirement on the flot legend entirely.

To hide the original legend, simply do:

$('.legend').eq(0).css('display','none');

After your $.plotcall.