title: Dynamic Flot graph - show hide series by clicking on legend text or box on graph
body: <p>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.</p>
  <p>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.</p>
  <pre><code> &lt;div id=&quot;placeholder4&quot; style=&quot;width:1000px;height:300px;background:#C89175&quot;&gt;&lt;/div&gt;
  
   &lt;script type=&quot;text/javascript&quot;&gt;
       $(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 '&lt;a href=&quot;#&quot; onClick=&quot;togglePlot('+series.idx+'); return false;&quot;&gt;'+label+'&lt;/a&gt;';
          }
      },
  
              grid: {backgroundColor: &quot;#FCFCFC&quot;, labelMargin:12,hoverable: true,tickColor:&quot;#AD5C5C&quot; },
                xaxis: { mode: &quot;categories&quot;, show:true,color:&quot;white&quot;,axisLabel:'Time Series' },
                           yaxis:{show:true,color:&quot;white&quot;,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: &quot;./JSon/stipdpssec.json&quot;,
                   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: &quot;./JSon/declinedpssec.json&quot;,
                   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: &quot;./JSon/totaldpssec.json&quot;,
                   method: 'GET',
                   dataType: 'json',
                   success: getDPSTotalVolumeData
               });
  //Moving forward the ticks if size &gt; 10
               if (data_Total[0].length &gt; 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($(&quot;#placeholder4&quot;), [{ data: data_Total[2], label: &quot;TotalVolume&quot;},{ data: data_Total[0], label: &quot;Stip&quot;,yaxis:2 }, { data: data_Total[1], label: &quot;Decline&quot;,yaxis:2 }], options);
   somePlot=$.plot($(&quot;#placeholder4&quot;), [{ data: data_Total[2], label: &quot;TotalVolume&quot;,idx:0},{ data: data_Total[0], label: &quot;Stip&quot;,color: &quot;green&quot;,idx:1 }, { data: data_Total[1], label: &quot;Decline&quot;,color:&quot;red&quot;,idx:2 }], options);
  
               i++;
   } 
  
  //fetchData
  
  setInterval(fetchData, 10000);
  
  
  
       });
  &lt;/script&gt;
  </code></pre>