ダイナミックフロートグラフ - グラフ上の凡例のテキストまたはボックスをクリックして系列を表示する

Question

私は3系列のダイナミックフロートグラフに取り組んでいます。私の必要性は、凡例をクリックするとシリーズを非表示/表示することです。私は静的グラフではうまくいく異なる例を見てきましたが、動的グラフでは最初のものであってもグラフは新しいデータ値で更新され、すべてがデフォルトオプションで表示されます。一度シリーズを非表示にすると、再びクリックするまで表示されなくなります。

Answer 1

ここにはquick exampleがあります。

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

ここは私のコードです。基本的には、JSONからデータを取得し、10秒間隔でフローグラフを動的に更新しています。 10秒ごとに新しいデータが表示され、これがシリーズが再び表示される場所です。

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