How can I scale points in Dygraphs?

Question

I am using the large dygraphs package for R ( https://rstudio.imtqy.com/dygraphs/ )

My code at the moment is:

james<-mtcars[c("mpg","drat")] james$date<-seq(from=as.Date("2013-05-16"),to=as.Date("2013-06-16"),by="days") x <- xts::xts(james$mpg, order.by = james$date) p <- dygraphs::dygraph(x, main = "mpg over time", xlab = "Date", ylab = "mpg") %>% dygraphs::dyRangeSelector() %>% dyOptions(drawPoints = TRUE, pointSize = 2) p 

I want to scale the size of the points in p to james$drat , rather than fixing it to 2.

How can i do this?

Answer 1

I think the javascript dygraphs library does not have an option to resize points in each series. A simple workaround is to create one series for each point size.
Suppose we want to have 5 different point sizes that change with james$drat . First, we create a binary variable with values ​​of 1-5 depending on the value of drat :

 drat_binned <- cut(james$drat, breaks=5, labels=1:5) 

Then we create 5 copies of the graph of the y variable ( james$mpg ):

 james_new_variables <- matrix(rep(james$mpg, 5), nrow=nrow(james)) 

For column number 1, we only store mpg values, where drat_binned is 1, and accordingly for columns number 2-5. Then the variables are added to the original dataset:

 for (i in 1:5) james_new_variables[drat_binned != i, i] <- NA james <- data.frame(james, james_new_variables) 

Then we create a new dygraph original variable plus new variables (called X1-X5 by default):

 x <- xts::xts(james[,c("mpg","X1","X2","X3","X4","X5")], order.by = james$date) p <- dygraphs::dygraph(x, main = "mpg over time", xlab = "Date", ylab = "mpg") %>% dygraphs::dyRangeSelector() %>% dySeries("mpg") %>% dySeries("X1", color="blue", drawPoints = TRUE, pointSize = 2) %>% dySeries("X2", color="blue", drawPoints = TRUE, pointSize = 3) %>% dySeries("X3", color="blue", drawPoints = TRUE, pointSize = 4) %>% dySeries("X4", color="blue", drawPoints = TRUE, pointSize = 5) %>% dySeries("X5", color="blue", drawPoints = TRUE, pointSize = 6) %>% p 

Not very elegant, but kind of work. The only thing that shows the trick is a legend that gets spoiled by X1-X5 shortcuts.

Answer 2

I know this is an old question, but I found a potential solution using drawPointCallback . I hope this helps someone. You can choose a scale in both R and JavaScript if you don't want to use a raw number.

 library(dygraphs) james<-mtcars[c("mpg","drat")] james$date<-seq(from=as.Date("2013-05-16"),to=as.Date("2013-06-16"),by="days") x <- xts::xts(james$mpg, order.by = james$date) p <- dygraphs::dygraph(x, main = "mpg over time", xlab = "Date", ylab = "mpg") %>% dygraphs::dyRangeSelector() %>% dyOptions(drawPoints = TRUE) p %>% dyCallbacks("drawPointCallback" = sprintf( " function(g, name, ctx, canvasx, canvasy, color, radius, index) { var drat = %s; radius = drat[index]; return Dygraph.Circles.DEFAULT(g, name, ctx, canvasx, canvasy, color, radius) } ", jsonlite::toJSON(mtcars$drat) ) )