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.
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.