Dynamic Flot graph - show hide series by clicking on legend text or box on graph

Question

I am working on dynamic flot graph with 3 series. My need is to hide/show series when clicked on legend. I have seen different examples that will work fine for static graphs but for dynamic graph, even it works first time but when graph is updated with new data values then everything is displaying with default options. once I hide the series, I want it to be hided until I click again to show it.

Here is my code. Basically, I am fetching data from JSON and updating the flot graph dynamically in 10 sec intervals. so new data will be shown every 10 sec and this is where the series is showing back again.

 <div id="placeholder4" style="width:1000px;height:300px;background:#C89175"></div>

 <script type="text/javascript">
     $(function() {
         somePlot = null;

         togglePlot = function(seriesIdx)
         {
              var someData = somePlot.getData();
              someData[seriesIdx].lines.show = !someData[seriesIdx].lines.show;
              somePlot.setData(someData);
              somePlot.draw();

         }


// Initilizaiton of Series and Counter
         var i = 0;
         var data_Total = [[], [], []];
         // data_Total[0] : Stip Data
         // data_Total[1] : Decline Data
         // data_Total[2] : Volume Data
//Setting Options for Graph Display
         var options = {

             points: { show: true },
             //legend: {toggle: true },
             series: {
        lines: { show: true }
                 },
              legend: {
        labelFormatter: function(label, series){
          return '<a href="#" onClick="togglePlot('+series.idx+'); return false;">'+label+'</a>';
        }
    },

            grid: {backgroundColor: "#FCFCFC", labelMargin:12,hoverable: true,tickColor:"#AD5C5C" },
              xaxis: { mode: "categories", show:true,color:"white",axisLabel:'Time Series' },
                         yaxis:{show:true,color:"white",min:0,max:10000,axisLabel:'Total/ Stip/ Decline'}


         }

//Function that will be called recursively with specified Time Interval
         function fetchData() {
//Function that will push data in to Series1 thru an ajax call
             function getDPSStipData(series) {
                 var stipItem = [series.data[i][0], series.data[i][1]];
                 data_Total[0].push(stipItem);
             }
             $.ajax({
                 url: "./JSon/stipdpssec.json",
                 method: 'GET',
                 dataType: 'json',
                 success: getDPSStipData
             });
//Function that will push data in to Series2 thru an ajax call
             function getDPSDeclineData(series) {
                 var declineItem = [series.data[i][0], series.data[i][1]];
                 data_Total[1].push(declineItem);
             }
             $.ajax({
                 url: "./JSon/declinedpssec.json",
                 method: 'GET',
                 dataType: 'json',
                 success: getDPSDeclineData
             });
//Function that will push data in to Series3 thru an ajax call
             function getDPSTotalVolumeData(series) {
                 var totalVolItem = [series.data[i][0], series.data[i][1]];
                 data_Total[2].push(totalVolItem);
             }
             $.ajax({
                 url: "./JSon/totaldpssec.json",
                 method: 'GET',
                 dataType: 'json',
                 success: getDPSTotalVolumeData
             });
//Moving forward the ticks if size > 10
             if (data_Total[0].length > 10)
             {
                 data_Total[0] = data_Total[0].splice(1,10);
                 data_Total[1] = data_Total[1].splice(1,10);
                 data_Total[2] = data_Total[2].splice(1,10);
             }

// Plotting of Graph
             //$.plot($("#placeholder4"), [{ data: data_Total[2], label: "TotalVolume"},{ data: data_Total[0], label: "Stip",yaxis:2 }, { data: data_Total[1], label: "Decline",yaxis:2 }], options);
 somePlot=$.plot($("#placeholder4"), [{ data: data_Total[2], label: "TotalVolume",idx:0},{ data: data_Total[0], label: "Stip",color: "green",idx:1 }, { data: data_Total[1], label: "Decline",color:"red",idx:2 }], options);

             i++;
 } 

//fetchData

setInterval(fetchData, 10000);



     });
</script>

Answer 1

Here's a quick example I put together for you.

somePlot = null;

togglePlot = function(seriesIdx)
{
  var someData = somePlot.getData();
  someData[seriesIdx].lines.show = !someData[seriesIdx].lines.show;
  somePlot.setData(someData);
  somePlot.draw();
}

var data = [
    {
    label: 'foo',
    color: 'red',
    data: [[1, 300], [2, 300], [3, 300], [4, 300], [5, 300]],
      idx: 0},
{
    label: 'bar',
    color: 'blue',
    data: [[1, 800], [2, 600], [3, 400], [4, 200], [5, 0]],
      idx: 1},
{
    label: 'baz',
    color: 'yellow',
    data: [[1, 100], [2, 200], [3, 300], [4, 400], [5, 500]],
      idx: 2},
{
    label: 'dart',
    color: 'green',
    data: [[1, 500], [2, 350], [3, 400], [4, 700], [5, 50]],
      idx: 3}
    ];

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