CODEWITHSUNDEEP
javascriptdygraphs
sdsuper
sdsuper

Reputation: 65

Changing series visibility of multiple dygraphs charts

UPDATED 7-10-15

I'm trying to control the visibility of data series across multiple plots using a set of check boxes. I have looked at a couple of the examples using the visibility option on the dygraphs website and other questions here but what I have found so far either focuses on a single chart or is limited in the details I need.

My first thought was to have the check boxes change the visibility values and then re-draw the charts, however I quickly realized that the visibility just reverts back to the initial conditions I set when creating the charts.

Now I'm wondering if I can create a function using the 'setVisibility' within its own loop to change the visibility of each chart as desired. Below is what I have recently tried, however it is not working. I'm not sure if this is the right way to accomplish this or not.

 function change(el) {
   for (i=0; i<23; i++) {
     chart[i].setVisibility(el.id, el.checked);
   }
 }

My HTML code for check boxes:

<input type=checkbox id="0" checked onClick="change(this)"> <label for="0"> data1</label>
<input type=checkbox id="1" checked onClick="change(this)"> <label for="1"> data2</label>
<input type=checkbox id="2" checked onClick="change(this)"> <label for="2"> data3</label>

JS code to create plots:

var chart = [];
for (i=0; i<23; i++){
    chart.push( 
      new Dygraph(
        document.getElementById("div"+i), 
        csv[i],{
          rollPeriod: 1, errorBars: true,
          colors: ['#006600', '#993300', '#003399'],
          title: name, connectSeparatedPoints: true,
          drawPoints: true, sigFigs: 4, legend: 'always',
          labelsSeparateLines: true, labelsDivWidth: 250,
          visibility: [true, true, true]
        }
      )
   );
}

I don't have much Javascript experience so I apologize if this is a simple problem, but it has been giving me fits.

Upvotes: 0

Views: 1647

Answers (1)

sdsuper
sdsuper

Reputation: 65

I was able to find a solution to my problem. The issue was primarily rooted in the scope of my 'chart' variable, as it needed to be a global variable, which was not evident in my original post. By moving it outside of the containing function which fixed that issue.

<input type=checkbox id="acheck" index=0 checked onClick="change('acheck',0)"> <label for="0"> data1</label>
<input type=checkbox id="bcheck" index=1 checked onClick="change('bcheck',1)"> <label for="1"> data2</label>
<input type=checkbox id="ccheck" index=2 checked onClick="change('ccheck',2)"> <label for="2"> data3</label>

and the Javascript code I used:

for (i=0; i<23; i++) {
  chart[i] = new Dygraph(
    document.getElementById("div"+i), csv[i], {
      rollPeriod: 1,
      errorBars: true,
      colors: ['#006600', '#993300', '#003399'],
      connectSeparatedPoints: true,
      drawPoints: true,
      sigFigs: 4,
      legend: 'always',
      labelsSeparateLines: true,
      labelsDivWidth: 250,
      animatedZooms: false,
      visibility: [vis2[0], vis2[1], vis2[2]],
    }
  );
}

function change(element,ind) {
  var x=document.getElementById(element);
  for (i=0; i<=22; i++) {
    chart[i].setVisibility(ind, x.checked);
  }
}

Upvotes: 2

Related Questions