Dygraphs: JS function working for axisLabelFormatter but not for valueFormatter

Question

I am working on a Shiny app for visualizing a manufacturing proccess data with Dygraphs package. My data look like this (Time in seconds):

       Time                     Var1                    Var2
       0.05                0.2199809                180.2101
       0.10                0.2199809                180.1942
       0.15                0.2358754                180.1465
       0.20                0.2222697                180.1306       
       0.25                0.2222697                180.1306
       0.30                0.1768748                180.1465

First of all I transform my data into xts format (I multiply by 1000 because Dygraphs collapses the observations inside the same second when plotting and I cannot solve this problem):

  data_xts<-xts(data, as.POSIXct(1000*data[,"Time"], origin = "1970-01-01"))

This produces a xts object like this:

                             Time                  Var1                    Var2
1970-01-01 00:00:50          0.05             0.2199809                180.2101
1970-01-01 00:01:40          0.10             0.2199809                180.1942
1970-01-01 00:02:30          0.15             0.2358754                180.1465
1970-01-01 00:03:20          0.20             0.2222697                180.1306
1970-01-01 00:04:10          0.25             0.2222697                180.1306
1970-01-01 00:05:00          0.30             0.1768748                180.1465

Now I would like to get a Dygraph plot with x axis labels in seconds (like in Time variable) and also with legend x values -the ones which appear with mouseover- in seconds. For that purpose I have declared a JS function in my server.R script to extract seconds passed since time origin:

  getsecs<- 'function(d) {
            var day=d.getDate();
            var hour=d.getHours();
            var minute=d.getMinutes();
            var second=d.getSeconds();
            var secs=84600*(day - 1)+3600*hour+60*minute +second;
            return 0.001*secs;}'

Then I use this function when consrtucting the Dygraph for Shiny output:

 output$mygraph <- renderDygraph({
    VAR<-data_xts()[,c('Var1','Var2')]
    dygraph(VAR) %>%
    dySeries(colnames(VAR)[2], axis = 'y2') %>%
    dyAxis("x",axisLabelFormatter=JS(getsecs), valueFormatter=JS(getsecs)) %>%
    dyAxis("y", label = colnames(VAR)[1]) %>%
    dyAxis("y2", label = colnames(VAR)[2], independentTicks = TRUE) %>%
    dyOptions(drawGrid = input$showgrid) %>%             
    dyOptions(drawPoints = TRUE, pointSize = 2) %>%
    dyHighlight(highlightCircleSize = 3, highlightSeriesOpts = list(strokeWidth = 3)) %>%  
    dyLegend(width = 800) %>%
    dyRangeSelector()

})

Doing this I get the x axis labels as I wanted but the mouseover does not work (the series does not highlight and so the x legend is blank). When I search in Console (F12) it appears this error:

 d.getDate is not a function

It seems that the error has something to do with the format of getsecs function output but I do not understand why it works with labelFormatter but not with valueFormatter.

Any help will be appreciated. Thanks in advance.

Answer 1

I was also having this problem and now I finally figured it out.

valueFormatter - returns the valueOf the date

axisLabelFormatter - returns the actual date itself

So in order to make them the same, you will have to modify your function slightly for valueFormatter:

getsecs2 <- 'function(e) {
            var d = new Date(e);
            var day=d.getDate();
            var hour=d.getHours();
            var minute=d.getMinutes();
            var second=d.getSeconds();
            var secs=84600*(day - 1)+3600*hour+60*minute +second;
            return 0.001*secs;}'

And the change valueFormatter=JS(getsecs) to valueFormatter=JS(getsecs2)

You could also probably just add an if-else statement to the getsec function, but I will leave that to you as I am very new to javascript.