Implement option `visibility` to toggle series visibility on/off

[danielkrizian]

This is just an enhancement/feature request to implement existing JavaScript visibility option:

From http://dygraphs.com/tests/visibility.html :

new Dygraph(
            document.getElementById("div_g"),
            NoisyDataABC, {
              rollPeriod: 7,
              errorBars: true,
              visibility: [false, true, true]
            }
          );

In R dygraphs it doesn't work yet:

library(dygraphs)

lungDeaths <- cbind(ldeaths, mdeaths, fdeaths)
dygraph(lungDeaths, main = "Deaths from Lung Disease (UK)") %>%
  dyOptions(visibility=c(TRUE,FALSE, TRUE))

Should be also a per-series option:

dygraph(lungDeaths, main = "Deaths from Lung Disease (UK)") %>%
  dySeries(name='mdeaths", visibility=FALSE)

Thank you

[daltonhance]

This should be fairly easy to implement, no? (I'm new to package development/github but happy to help if I can.)

Looking at the dyOptions function for inspiration, I was able to get this to work:

 library(dygraphs)

 lungDeaths <- cbind(ldeaths, mdeaths, fdeaths)

 dyVisibility <- function (dygraph, visibility = TRUE){
   dygraph$x$attrs$visibility <- visibility
   dygraph
 }

dygraph(lungDeaths, main = "Deaths from Lung Disease (UK)") %>%
   dyVisibility(visibility=c(TRUE,FALSE, TRUE))

Should be easy enough to modify the dyOptions function to implement this.

[hiasel]

Since I was looking for exact this feature and currently couldn't find any implementation for the R package I've created a very simple plugin called "hide". (See my pull-request here: https://github.com/rstudio/dygraphs/pull/160/commits/a4e3553005a021fbf597b97ed5b9170f37bb611c) The plugin simply adds checkboxes above the graph and allows to hide/show specific time series.

To use the plugin download the hide.js file from the link and place it in the installed package folder of dygraphs under dygrahps/plugins/. (To find out where R stores installed packages simply call: .libPaths()) You can then use the plugin as usual:

dyHide <-function(dygraph) {
  dyPlugin(
    dygraph = dygraph,
    name = "Hide",
    path = system.file("plugins/hide.js", package = "dygraphs")
  )
}

dygraph(cbind(ldeaths, mdeaths, fdeaths)) %>% 
  dyRangeSelector() %>% 
  dyHide()

[CttCJim]

I put together an implementation of this for my own JS, thought others might be interested.

In my case, I'm displaying historical data for a device (voltage, current, etc). Part of that involves building a readable title for the graph, such as "Generator 1: Voltage, Current". the data array contains all my results, and the property of each dataset is the readable title. When I am looping through to build my main title I do this:

var thistitle = data[i].property;
var thislink = `<a href="#" onclick="HV3_toggleVis(${i})">${thistitle}</a>`

var visArray = [];        
for(var i=0;i<data.length;i++) { //for each requested dataset
  visArray.push(true); //build out boolean visibility array
}

When I build my graph, i do:

window.dygraphs.history_output = new Dygraph([...]);

window.dygraphs.history_output.visArray = visArray;

Now my array of booleans for each dataset is stored as a property of my graph object.

When I build my title, I do:

var thistitle = data[i].property;
var thislink = `<a href="#" onclick="HV3_toggleVis(${i})">${thistitle}</a>`

titles[data[i].name].titlestring += thislink;

Now I have an array of links for running my visibility toggles. For my function, i have:

function HV3_toggleVis(seriesIndex) {
    var visArray = window.dygraphs.history_output.visArray; //i like short working names for vars.
    
    visArray[seriesIndex] = !visArray[seriesIndex]; //toggle boolean
    window.dygraphs.history_output.setVisibility(seriesIndex,visArray[seriesIndex]); //toggle the selected dataset

    window.dygraphs.history_output.visArray = visArray; //save the changes to the object
}

In future I might try to put it in the legend instead, but for now this is lovely. Here's an example of it in action. I haven't copied it over to my live unit yet, so the dataset is just a line, but you get the idea:

https://i.imgur.com/K3mq0oA.png