Grafico Flot dinamico - mostra le serie di nascondigli cliccando sul legenda testo o casella sul grafico

Question

Sto lavorando su un grafico di flottaggio dinamico con 3 serie. Il mio bisogno è quello di nascondere/mostrare serie quando si fa clic sulla legenda. Ho visto diversi esempi che funzioneranno bene per i grafici statici ma per il grafico dinamico, anche se funziona per la prima volta, ma quando il grafico viene aggiornato con nuovi valori di dati, tutto viene visualizzato con le opzioni predefinite. una volta nascosta la serie, voglio che venga nascosta finché non faccio di nuovo clic per visualizzarla.

Answer 1

Ecco un quick example Ho messo insieme per voi.

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>'; 
     } 
    } 
}); 

Answer 2

Ecco il mio codice. Fondamentalmente, sto recuperando i dati da JSON e aggiornando il grafico flottante in modo dinamico a intervalli di 10 secondi. così i nuovi dati verranno mostrati ogni 10 secondi ed è qui che la serie viene mostrata di nuovo.

<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>