How can I get the date from the draggable vertical bar in timevis? - r

Question

I found the timevis package to be very useful for displaying time periods, and it is working as expected to display my data.
I have used the addCustomTime() function to add a draggable vertical line, which also works great, however, I find that I can't get the current value of that line.
The underlying js widget exposes functions to interact with the elements, but I haven't been able to access them successfully. I have attempted to use shinyjs to catch the events emitted by the timeline, but I wasn't able to get that to work either.
I am fairly comfortable in R and shiny, but very much a newb in terms of the js, so I suspect I am just missing a trick on this.
In my ui.R, I create a timevisOutput object:
fluidPage(
timevisOutput("timeline")
)
I am trying to listen to the "timechanged" event: http://visjs.org/docs/timeline/#Events
When I add listeners with shinyjs in my server.R, I am able to see "mouseenter" events, but the "timechanged" handler doesn't seem to fire:
onevent("mouseenter", "timeline", print("timeline: mouseenter"))
onevent("timechanged", "timeline", print("Saw timechanged!"))
The visjs documentation has this snippet on "how to listen for a select event":
timeline.on('select', function (properties) {
alert('selected items: ' + properties.items);
});
I tried adding that in a shinyjs::extendShinyjs() call, but that doesn't work either. I added an example to listen for keydown events that did work:
$(document).keypress(function(e) { alert('Key pressed: ' + e.which); });
So that makes me think that I'm not referencing the timeline object correctly. The $(document) in there makes me think that I'm not aware of a way to properly get at the timeline element.
Since I can see mouseenter events for the timeline, but can't see its timechanged events, I think I need the .on() call, however, I don't think I'm referencing the timeline element properly/.
After #timelyportfolio's first response:
That was a great write up, thanks! I was able to confirm what the event looks; I have already been able to listen to the _selected event, but it's nice to see.
I am trying to get a custom time value, which uses a draggable line in the chart, it's added like this:
addCustomTime("mytimevis", Sys.Date(), "CustomTimeId")
The doc for the underlying javascript widget (http://visjs.org/docs/timeline), shows an event ("timechanged"), and a method ("getCustomTime()") to get access to its value, but I don't see the event in the trace, nor can I figure out how to make the method call work.
The "timechanged" event does not show up in the trace, which makes me think I need to make the .on() call from the widget's doc in order to enable that event:
timeline.on('select', function (properties) {
alert('selected items: ' + properties.items);
});
I have been working to get that method call to work, since ideally I'd like to capture its change, and also if I can get that working, I should be able to get the getCustomTime() method working as well!

Answer 1

assumption
I will answer assuming that you would like to get the data in R. If I assumed incorrectly, let me know and I will adjust.
message with shiny.trace
If you are not aware, one trick I often use is options(shiny.trace=TRUE) which will fill your screen with all the messages sent over the websocket. Here is what I see when I run the following code.
library(timevis)
data <- data.frame(
id = 1:4,
content = c("Item one" , "Item two" ,"Ranged item", "Item four"),
start = c("2016-01-10", "2016-01-11", "2016-01-20", "2016-02-14 15:00:00"),
end = c(NA , NA, "2016-02-04", NA)
)
tv <- timevis(data)
# now let's see what messages we get in Shiny
library(shiny)
options(shiny.trace=TRUE)
ui <- timevisOutput("mytimevis")
server <- function(input,output,session) {
output$mytimevis <- renderTimevis({tv})
}
shinyApp(ui,server)
I highlighted the messages pertaining to select. This tells us we can observe or react to mytimevis_selected.
observe select event
Now, let's turn off options(shiny.trace=FALSE) and print in the R console when we receive a selected message.
options(shiny.trace=FALSE)
ui <- timevisOutput("mytimevis")
server <- function(input,output,session) {
output$mytimevis <- renderTimevis({tv})
observeEvent(
input$mytimevis_selected,
{
print(input$mytimevis_selected)
}
)
}
shinyApp(ui,server)
add timechanged handler
Based on comments and re-reading your question, I now understand that you would like to add an event handler for timechanged. I think this code will help you over the hump.
library(timevis)
library(shiny)
library(htmltools)
library(htmlwidgets)
library(magrittr)
tv <- timevis() %>%
addCustomTime(Sys.Date() - 1, "yesterday") %>%
# add an event handler since this is not one
# timevis provides
htmlwidgets::onRender(
"
function(el,x) {
// this will be our instance
var tv = this.timeline;
tv.on('timechanged', function(id, time) {
//uncomment debugger if you want to stop here
//debugger;
Shiny.onInputChange(el.id + '_timechanged', {id:id, time:time})
});
}
"
)
shinyApp(
ui = fluidPage(
timevisOutput("timeline"),
actionButton("btn", "Add time bar 24 hours ago")
),
server = function(input, output) {
output$timeline <- renderTimevis(
tv
)
observeEvent(input$timeline_timechanged, {
str(input$timeline_timechanged)
})
}
)
follow up
Please let me know if I headed down the wrong path or if none of this makes any sense. I feel your pain, and troubleshooting this blend of technology can be very tricky.

Answer 2

(Disclaimer: I wrote the timevis package)
First of all: Kenton's answer is excellent, and OP's attempts were great as well.
This is more of an informational post.
Why what you tried didn't work
The reason onevent("timechanged", ...) doesn't work is because the onevent() function works for any standard javascript events, but it doesn't work for specific events that different plugins provide.
To bind a custom event such as that one, you'd have write some short custom javascript code. So looking at the visjs documentation and finding the timeline.on('select', ...) code is the correct path, but (as you suspected) you weren't referencing the timeline object correctly.
I made sure to export the actual underlying object just for this reason, so that people like you could manipulate it in its raw format. To access the timeline object from timevis, you use $(id)[0].widget.timeline. Since the id of your timeline is timeline and you wanted to call the on() function, then you can do something like $("#timeline")[0].widget.timeline.on('select', ...).
Why this functionality doesn't exist
When I looked at the documentation of visjs I decided to have 4 events that the widget would export to shiny automatically whenever they changed: the data, the selected items, the IDs of all items, and the currently visible time window. I decided not to use the on('timechanged') event because it behaved differently from all the rest: it would only return one item at a time.
What do I mean by that? For example, input$timeline_data always returns the entire data in this moment; input$timeline_select always tells you what are all the selected items at this moment; input$timeline_timechanged would get fired every time a different vertical bar gets dragged, and therefore will contain only the last dragged bar, not all of them, and it wouldn't give you a way to ask for the time in one specific bar. Does that make sense?
Of course it's possible to write some code that keeps track of all the bars, but that gets very messy very quickly (for example, it'd have to make sure to get updated when a bar is added/removed). So I chose to not go down that rabbithole.