0

When I am using grow for animation on my bar graph the show hide does not work.

var d1 = [];
for (var i = 0; i <= 10; i += 1) {
  d1.push([i, parseInt(Math.random() * 30)]);
}

var d2 = [];
for (var i = 0; i <= 10; i += 1) {
  d2.push([i, parseInt(Math.random() * 30)]);
}

var d3 = [];
for (var i = 0; i <= 10; i += 1) {
  d3.push([i, parseInt(Math.random() * 30)]);
}

var stack = 0,
  bars = true,
  lines = false,
  steps = false;

togglePlot = function(seriesIdx) {
  var someData = somePlot.getData();
  someData[seriesIdx].bars.show = !someData[seriesIdx].bars.show;
  if (someData[seriesIdx].stack == 1)
    someData[seriesIdx].stack = 0;
  else if (someData[seriesIdx].stack == 0)
    someData[seriesIdx].stack = 1;

  somePlot.setData(someData);
  somePlot.setupGrid();
  somePlot.draw();
}
var somePlot;
var data = [{
  label: "d1",
  data: d1,
  color: 0,
  idx: 0,
  grow: {
    growings: [{
      stepMode: "maximum"
    }]
  }
}, {
  label: "d2",
  data: d2,
  color: 1,
  idx: 1,
  grow: {
    growings: [{
      stepMode: "maximum"
    }]
  }
}, {
  label: "d3",
  data: d3,
  color: 2,
  idx: 2,
  grow: {
    growings: [{
      stepMode: "maximum"
    }]
  }
}];

function plotWithOptions() {
  somePlot = $.plot("#placeholder", data, {
    series: {
      stack: stack,
      lines: {
        show: lines,
        fill: true,
        steps: steps
      },
      bars: {
        show: bars,
        barWidth: 0.6
      },
      grow: {
        active: true,
        duration: 2000
      }
    },
    legend: {
      labelFormatter: function(label, series) {
        return '<a href="#" onClick="togglePlot(' + series.idx + '); return false;">' + label + '</a>';
      },
      noColumns: 4,

    }
  });
}

plotWithOptions();


var somePlotIncidents = null,
  somePlotMttr = null,
  somePlotRepeat = null;
var stack = 0,
  bars = true,
  lines = false,
  steps = false,
  timeOut = false;



var options = {
  "series": {
    "stack": 0,
    "lines": {
      "show": false,
      "steps": false
    },
    "bars": {
      "show": true,
      "fill": 1,
      "align": "center",
      "lineWidth": 0,
      "barWidth": 25920000.000000007
    },
    "grow": {
      "active": true,
      "duration": 2000
    }
  },
  "xaxis": {
    "mode": "time",
    "autoscaleMargin": null,
    "timeformat": "%d %b",
    "tickSize": [1, "day"]
  },
  "yaxis": {
    "min": 0,
    "minTickSize": 1
  },
  "grid": {
    "clickable": true,
    "hoverable": true
  },
  "legend": {
    "noColumns": 3
  }
};
var datasets = [{"label":"P1","grow":{"growings":[{"stepMode":"maximum"}]},"color":"#808080","idx":0,"data":[{"0":1456704059000,"1":0},{"0":1456617659000,"1":0},{"0":1456531259000,"1":0},{"0":1456444859000,"1":0},{"0":1456358459000,"1":2},{"0":1456272059000,"1":0},{"0":1456185659000,"1":1},{"0":1456099259000,"1":0},{"0":1456012859000,"1":0},{"0":1455926459000,"1":0},{"0":1455840059000,"1":1},{"0":1455753659000,"1":1},{"0":1455667259000,"1":0},{"0":1455580859000,"1":0},{"0":1455494459000,"1":0},{"0":1455408059000,"1":0},{"0":1455321659000,"1":0},{"0":1455235259000,"1":0},{"0":1455148859000,"1":0},{"0":1455062459000,"1":0},{"0":1454976059000,"1":1},{"0":1454889659000,"1":1},{"0":1454803259000,"1":0},{"0":1454716859000,"1":0},{"0":1454630459000,"1":0},{"0":1454544059000,"1":0},{"0":1454457659000,"1":1},{"0":1454371259000,"1":1},{"0":1454284859000,"1":1}]},{"label":"P2","grow":{"growings":[{"stepMode":"maximum"}]},"color":"#f00","idx":1,"data":[{"0":1456704059000,"1":1},{"0":1456617659000,"1":1},{"0":1456531259000,"1":1},{"0":1456444859000,"1":0},{"0":1456358459000,"1":4},{"0":1456272059000,"1":2},{"0":1456185659000,"1":1},{"0":1456099259000,"1":1},{"0":1456012859000,"1":1},{"0":1455926459000,"1":0},{"0":1455840059000,"1":1},{"0":1455753659000,"1":2},{"0":1455667259000,"1":1},{"0":1455580859000,"1":3},{"0":1455494459000,"1":1},{"0":1455408059000,"1":0},{"0":1455321659000,"1":0},{"0":1455235259000,"1":2},{"0":1455148859000,"1":1},{"0":1455062459000,"1":1},{"0":1454976059000,"1":0},{"0":1454889659000,"1":0},{"0":1454803259000,"1":0},{"0":1454716859000,"1":0},{"0":1454630459000,"1":0},{"0":1454544059000,"1":0},{"0":1454457659000,"1":0},{"0":1454371259000,"1":2},{"0":1454284859000,"1":0}]},{"label":"P3","grow":{"growings":[{"stepMode":"maximum"}]},"color":"#ffa500","idx":2,"data":[{"0":1456704059000,"1":2},{"0":1456617659000,"1":1},{"0":1456531259000,"1":1},{"0":1456444859000,"1":1},{"0":1456358459000,"1":0},{"0":1456272059000,"1":1},{"0":1456185659000,"1":0},{"0":1456099259000,"1":1},{"0":1456012859000,"1":1},{"0":1455926459000,"1":0},{"0":1455840059000,"1":3},{"0":1455753659000,"1":0},{"0":1455667259000,"1":0},{"0":1455580859000,"1":0},{"0":1455494459000,"1":2},{"0":1455408059000,"1":1},{"0":1455321659000,"1":0},{"0":1455235259000,"1":1},{"0":1455148859000,"1":0},{"0":1455062459000,"1":1},{"0":1454976059000,"1":2},{"0":1454889659000,"1":0},{"0":1454803259000,"1":1},{"0":1454716859000,"1":0},{"0":1454630459000,"1":1},{"0":1454544059000,"1":0},{"0":1454457659000,"1":0},{"0":1454371259000,"1":1},{"0":1454284859000,"1":0}]}];

togglePlotPie = function(seriesIdx) {
  if (timeOut) {
    return;
  }
  timeOut = true;

  var someData = somePlotIncidents.getData();
  someData[seriesIdx].bars.show = !someData[seriesIdx].bars.show;
  if (someData[seriesIdx].stack == 1)
    someData[seriesIdx].stack = 0;
  else if (someData[seriesIdx].stack == 0)
    someData[seriesIdx].stack = 1;

  data = someData;
  plot_graph(data, "incidents");

  setTimeout(function() {
    timeOut = false;
  }, 2000);
  //somePlotIncidents.setData(someData);
  //somePlotIncidents.setupGrid();
  //somePlotIncidents.draw();
}

function plot_graph(datasets, id) {

  if (id == "incidents") {

    options.legend.labelFormatter = function(label, series) {
      return '<a href="#" onClick="togglePlotPie(' + series.idx + '); return false;">' + label + '</a>';
    };
    console.log(JSON.stringify(datasets));
    console.log(JSON.stringify(options));
    somePlotIncidents = $.plot($("#" + id + "network-graph"), datasets,
      options);

  }
}

plot_graph(datasets, "incidents");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.stack.min.js"></script>
<script src="http://thgreasi.github.io/growraf/javascripts/jquery.flot.growraf.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.js"></script>

<div id="placeholder" class="demo-placeholder" style="width:650px;height:400px"></div>

<div id="incidentsnetwork-graph" class="demo-placeholder" style="width:650px;height:400px"></div>

UPDATE

I have added my code snippet which i need it to work with. I have to click legend twice for it to reappear

shorif2000
  • 2,582
  • 12
  • 65
  • 137

1 Answers1

2

Two issues:

1) You need to do a full replot with all options, replace 

somePlot.setData(someData);
somePlot.setupGrid();
somePlot.draw();

with

data = someData;
plotWithOptions();

inside the togglePlot() function.

2) If you toggle again before the animation has finished, you get corrupted data. (Because the call to somePlot.getData(); gets the currently animated data which is not the final data.) You can prevent this by deactivating the toggle with a timeout:

togglePlot = function(seriesIdx) {

  if (timeOut) {
    return;
  }
  timeOut = true;

  ... // rest of the code

  setTimeout(function() {
    timeOut = false;
  }, 2000);
}

See the updated code snippet below for the full code:

var d1 = [];
for (var i = 0; i <= 10; i += 1) {
  d1.push([i, parseInt(Math.random() * 30)]);
}

var d2 = [];
for (var i = 0; i <= 10; i += 1) {
  d2.push([i, parseInt(Math.random() * 30)]);
}

var d3 = [];
for (var i = 0; i <= 10; i += 1) {
  d3.push([i, parseInt(Math.random() * 30)]);
}

var stack = 0,
  bars = true,
  lines = false,
  steps = false,
  timeOut = false;

togglePlot = function(seriesIdx) {

  if (timeOut) {
    return;
  }
  timeOut = true;

  var someData = somePlot.getData();
  someData[seriesIdx].bars.show = !someData[seriesIdx].bars.show;

  if (someData[seriesIdx].stack == 1)
    someData[seriesIdx].stack = 0;
  else if (someData[seriesIdx].stack == 0)
    someData[seriesIdx].stack = 1;

  data = someData;
  plotWithOptions();

  setTimeout(function() {
    timeOut = false;
  }, 2000);
}

var somePlot;
var data = [{
  label: "d1",
  data: d1,
  color: 0,
  idx: 0,
  grow: {
    growings: [{
      stepMode: "maximum"
    }]
  }
}, {
  label: "d2",
  data: d2,
  color: 1,
  idx: 1,
  grow: {
    growings: [{
      stepMode: "maximum"
    }]
  }
}, {
  label: "d3",
  data: d3,
  color: 2,
  idx: 2,
  grow: {
    growings: [{
      stepMode: "maximum"
    }]
  }
}];

function plotWithOptions() {
  somePlot = $.plot("#placeholder", data, {
    series: {
      stack: stack,
      lines: {
        show: lines,
        fill: true,
        steps: steps
      },
      bars: {
        show: bars,
        barWidth: 0.6
      },
      grow: {
        active: true,
        duration: 2000
      }
    },
    legend: {
      labelFormatter: function(label, series) {
        return '<a href="#" onClick="togglePlot(' + series.idx + '); return false;">' + label + '</a>';
      },
      noColumns: 4,

    }
  });
}

plotWithOptions();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.stack.min.js"></script>
<script src="http://thgreasi.github.io/growraf/javascripts/jquery.flot.growraf.js"></script>

<div id="placeholder" class="demo-placeholder" style="width:650px;height:400px"></div>
Raidri
  • 17,258
  • 9
  • 62
  • 65
  • Updated question with extra snippet – shorif2000 Mar 09 '16 at 16:42
  • Works for me, you only have to click twice if you click too early. The timeout is 2000 ms, the same as the duration for the grow animation, but the animation finishes faster then the timeout for the toggle. You could try to reduce the timeout duration a little. – Raidri Mar 09 '16 at 16:56
  • if i reduce animation timeout, i should reduce timeout duration? – shorif2000 Mar 10 '16 at 10:42