several graph has the same legend in flot

Question

I am using JQuery Flot graph plugin to plot some bar charts in a page. when I plot a graph by datas and option below:

 
        var chartData = [{
              label: 'success',
              data: [[0,1],[1,1]],
              bars: {
                  order: 0,
                  fillColor: '#fff'
              },
              color: '#fff'
            }, {
              label: 'fail',
              data: [[0,3],[2,1]],
              bars: {
                order: 1,
                fillColor: 'rgba(255,255,255,0.5)'
              },
              color: 'rgba(255,255,255,0.5)'
            }];

 
        var barChartOptions = {
        ...
        legend:{
            container: '.flot-chart-legends--bar',
            backgroundOpacity: 0.5,
            noColumns: 0,
            lineWidth: 0,
            labelBoxBorderColor: 'rgba(255,255,255,0)'
        }
    };
  $.plot($('.flot-bar'), chartData, barChartOptions);

It works for my bar chart, however, the other charts which hasn't label attached the same label. How can I do for it? Please help!

Answer 1

I sovled it! Check the source code in flot.js and found the incorrect code as follow:

$(options.legend.container).html(table);

which makes all the selectors of container contained the same html. I corrected it like this:

placeholder.parent().find(options.legend.container).html(table);

and the html is only attahced to the right chart I want.