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>

Solution

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

Comments

[user1908522]

This code is working but showing the series back again when this realtime graph refresh after 10 sec with new data point. My need is to hide the series on the graph until I click on the legend again. Please let me know

[Mark]

How are you refreshing your graph? If you want people to help you, you have to supply enough information...

[user1908522]

Hi Mark, I have posted the details and code. Did you get chance to look at it

[Mark]

@user1908522, just looked at it. The problem is you are recreating the plot on each ajax success. This overwrites the "visibility" of the line. You should draw the plot once and then use the getData and setData methods to update the data. If you recreate it each time, you'll have to set the line to visible or not in your $.plot call.

[user1908522]

Hi Mark, You are right, I am calling plot each time with some interval time. You mention about 'set line to visible or not on $.plot' so I selected a series then that line become invisible and I have to make it invisible until I click again on it. Can you let me know how pass the status of series line to the plot when I call it next time

[shorif2000]

I have tried this, seriesIdx is undefined. I have multiple graphs being loading using a function. Only thing that changes between each graph is data and div id

[shorif2000]

@Mark if it is a bar chart how can i get the top bars to drop down?

[Mark]

@bonez, I don't understand the question.

[shorif2000]

@Mark please see jsfiddle.net/shorif2000/8kyz6jr3 Once it is hidden how can the bars be restacked

[shorif2000]

@Mark Thanks.. working now. What if i wanted to make the legend color transparent on show/hide?