stacked bar with show/hide

HTML

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.stack.min.js"></script>
<div id="placeholder" class="demo-placeholder" style="width:650px;height:400px"></div>

JavaScript

var d1 = [];
for (var i = 0; i <= 10; i += 1) {
  d1.push([i, parseInt(Math.random() * 30)]);
}

var d2 = [];
for (var i = 0; i <= 10; i += 1) {
  d2.push([i, parseInt(Math.random() * 30)]);
}

var d3 = [];
for (var i = 0; i <= 10; i += 1) {
  d3.push([i, parseInt(Math.random() * 30)]);
}

var stack = 1,
  bars = false,
  lines = true,
  steps = false;
  
togglePlot = function(seriesIdx) {
  var someData = somePlot.getData();
  someData[seriesIdx].bars.show = !someData[seriesIdx].bars.show;
  if (someData[seriesIdx].stack == 1)
    someData[seriesIdx].stack = 0;
  else if (someData[seriesIdx].stack == 0)
    someData[seriesIdx].stack = 1;

  somePlot.setData(someData);
  somePlot.setupGrid();
  somePlot.draw();
}
var somePlot;
var data = [{
  label: "d1",
  data: d1,
  color:0,
  idx:0
}, {
  label: "d2",
  data: d2,
  color:1,
  idx:1
}, {
  label: "d3",
  data: d3,
  color:2,
  idx:2
}];

function plotWithOptions() {
  somePlot = $.plot("#placeholder", data, {
    series: {
     
      lines: {
        show: lines,
        fill: true,
        steps: steps
      },
      bars: {
        show: bars,
        barWidth: 0.6
      }
    },
    legend: {
      labelFormatter: function(label, series) {
        return '<a href="#" onClick="togglePlot(' + series.idx + '); return false;">' + label + '</a>';
      },
      noColumns: 4,

    }
  });
}

plotWithOptions();