Date in dygraph (using R and xts) shows one day earlier than data

Question

This is my first stackoverflow question, so apologies in advance for any lapses in etiquette or presentation.

I am using the dygraphs() package in R (3.3.3 on a Mac running Mavericks, using RStudio) to graph a time series of box-office receipts from an 18th-century theater. The dates run from 1789-04-14 to 1791-03-07. I'm using the newest version of the xts package (0.10-0), but the problem was identical in the previous version. As an xts object the data looks like this:

head(receipts.xts)
              kr
1789-04-14 15454
1789-04-20  6985
1789-04-22  4545
1789-04-24  5342
1789-04-26  5791
1789-04-28 25139

The dates imported for the index are of type date. ('kr' stands for 'kreuzer,' a subdivision of the monetary unit of account at the time.)

The code to create the dygraph is:

dygraph(receipts.xts, 
        main = "Opera Receipts, Burgtheater, 1789-1791") %>%
  dySeries("kr", label = "Receipts (kr)") %>% 
  dyLegend(show="always", hideOnMouseOut =FALSE) %>% dyRangeSelector()

All dates in the legend show one day earlier than the corresponding date in the xts object. This is shown in the attached screenshot, where the first datapoint is 1789-04-14, but shows in the RStudio viewer in the legend as "Apr, 13, 1789" (I have not been able to find a way to get rid of the unwanted comma after the month abbreviation.)

sample dygraph showing incorrect date in legend

Oddly, when I save this graph as html, the legend on the webpage shows the correct date!

I've tried a very wide variety of possible solutions, but nothing so far has worked. This looks like a bug, but it's not clear to me where the bug is (in the dygraphs package? in RStudio? in xts?). My question seems similar to this one:

Date bug in dygraph in dygraphs package (using JavaScript) in R

But that question seems never to have had a definitive answer. The only way I can get the proper dates to display in the legends in the RStudio viewer is to add one day to all the dates (using lubridate) that are used as the index of the xts object, but then the dates are incorrect in the html.

**** Edit on 7/10/17 in response to Dirk's reply ****

I'd already been aware of the potential of the "hidden" timezone problem with the dates, and had tried a number of other approaches to fix that, although not yet setting the timezone with Sys.setenv() as Dirk suggested. I just tried that, and it doesn't fix the problem either. My steps this time were:

operas$Date <- as.character(operas$Date)
Sys.setenv(tz="UTC")
receipts.xts <- xts(operas$Receipts, as.Date(operas$Date))
colnames(receipts.xts) <- "kr"

(In the originating dataframe the dates are already of date type, but I wanted to start from scratch in showing this problem.) The dygraphs code is then the same as in my original example.

The results are identical: dates in the legend are one day too early when examined in the RStudio viewer, but are correct in the exported html when viewed in a browser.

So it looks like the problem is probably somewhere else.

The use of lubridate's as_date() in my original example only reflected one of my more recent attempts at a fix. My original code had used as.Date(). But thanks for the pointer.

**** Some sample data ****

> dput(receipts.test)
structure(list(Date = c("1789-04-14", "1789-04-20", "1789-04-22", 
"1789-04-24", "1789-04-26", "1789-04-28", "1789-04-30", "1789-05-02", 
"1789-05-04", "1789-05-06"), Receipts = c(15454L, 6985L, 4545L, 
5342L, 5791L, 25139L, 6897L, 4268L, 2400L, 4515L)), .Names = c("Date", 
"Receipts"), row.names = c(NA, 10L), class = c("tbl_df", "tbl", 
"data.frame"))

Please provide a sample of your data using `dput`, and see the other suggestions in [How to make a great R reproducible example?](https://stackoverflow.com/q/5963269/271616). — Joshua Ulrich, Jul 08 '17 at 22:47

Dirk Eddelbuettel · Answer 1 · 2017-07-11T02:37:35.297

2

So let's do a little tutorial. Start with a date, convert to a POSIXct and then format:

R> format(as.POSIXct(as.Date("2017-07-08")))
[1] "2017-07-07 19:00:00"
R>

See what happens? I am in Chicago, and the five hours subtracted from midnight are my offset to UTC. One possible fix is to set the timezone to UTC:

R> Sys.setenv(TZ="UTC")
R> format(as.POSIXct(as.Date("2017-07-08")))
[1] "2017-07-08"
R>

Now the same input data is correctly "printed" as the same date.

Lesson: Be wary of Date to POSIXct conversions. All you needed here is the proper timezone (for the context of the formatting).

Lastly, you really do not need the lubridate package to adjust a date. R itself does that just fine:

R> as.Date("2017-07-08")
[1] "2017-07-08"
R> as.Date("2017-07-08") + 1:3
[1] "2017-07-09" "2017-07-10" "2017-07-11"
R>

Dates and times are challenging for programmers and users. R has great support. Take your time and learn it, one issue at a time.

Edit: Ok, after I got dragged into this again, here are code and a chart.

Code

d <- structure(list(Date = c("1789-04-14", "1789-04-20", "1789-04-22", 
                             "1789-04-24", "1789-04-26", "1789-04-28", 
                             "1789-04-30", "1789-05-02", 
                             "1789-05-04", "1789-05-06"), 
                   Receipts = c(15454L, 6985L, 4545L, 5342L, 5791L, 25139L, 
                                6897L, 4268L, 2400L, 4515L)), 
            .Names = c("Date", "Receipts"), 
            row.names = c(NA, 10L), 
            class = c("tbl_df", "tbl", "data.frame"))

library(xts)
x <- xts(d[,2, drop=FALSE], order.by=as.Date(d[,1]))

library(dygraphs)
dygraph(x)

This is the structure as posted, quickly converted to an xts using Date as the index type.

And we're done. As the chart shows, the first observation is shown as April 14 just as it should.

Hope this helps.

Chart

Data

edited Jul 11 '17 at 02:37

answered Jul 09 '17 at 01:34

Dirk Eddelbuettel

360,940
56
644
725

Welcome to StackOverflow. Glad to hear this helped -- you can now "upvote" (click on up-arrow) and/or "accept" (click on tick-mark only you as the person asking the question see). – Dirk Eddelbuettel Jul 11 '17 at 01:20
Many thanks for your comment! I've added a bit to my original question as a replay. The bottom line: setting the timezone with Sys.setenv() doesn't fix the problem. – Dexter Jul 11 '17 at 01:38
Please provide a data sample, see e.g. [how to provide a minimally reproducible example](https://stackoverflow.com/questions/5963269/how-to-make-a-great-r-reproducible-example). – Dirk Eddelbuettel Jul 11 '17 at 01:39
I haven't used dput() before. I've done it locally, but how do I put that on stackoverflow? Do I just copy & paste what dput() puts out? (Sorry for the newby question.) – Dexter Jul 11 '17 at 01:44
That is the common usage. – Dirk Eddelbuettel Jul 11 '17 at 01:46
Thanks! dput() output added. – Dexter Jul 11 '17 at 01:50
You claimed it was an xts object. A tibble is something different. – Dirk Eddelbuettel Jul 11 '17 at 01:51
The code I gave in my original question produces the xts object. dygraph() requires one. – Dexter Jul 11 '17 at 02:02
I am not sure sure I care anymore. I am not your personal tutor. – Dirk Eddelbuettel Jul 11 '17 at 02:03
Yes, the date displays correctly in the html file, as I wrote in my original question. It is incorrect in the RStudio viewer. – Dexter Jul 11 '17 at 02:05
Not for my `xts` object. – Dirk Eddelbuettel Jul 11 '17 at 02:06

Dexter · Answer 2 · 2021-02-17T21:29:55.740

I just recently returned to this question when I began working on this app again last week, and I've finally been able solve it. In my code as I had originally written it, the problem had to do specifically with the JavaScript function in the valueFormatter attribute of the dyAxis() function that I used for constructing a legend for the dygraph time series (this code was not shown in my original question). In my code from 2017, I had:

dyAxis("x", valueFormatter = "function(ms) {
                                 return new Date(ms).toDateString()}",
        rangePad=5
)

where ms is "the number of milliseconds that have elapsed since midnight on January 1, 1970, UTC" (as described here). This number was derived from the row index (the date) of the xts object. As I understand it, Chrome (and Opera) automatically interpret the function toDateString() according to the local timezone (regardless of whether the xts index and the number of milliseconds derived from it is explicitly UTC), whereas Firefox and Safari interpret the number according to UTC. (I learned of the different behavior between Chrome and Firefox here.)

My solution is to build the date for the dygraph legend explicitly in the function for valueFormatter (which also allows me control over the date format of the output):

dyAxis("x", valueFormatter = "function(ms) {
         dow = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
         months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
         temp = new Date(ms);
         day = dow[temp.getUTCDay()];
         date = temp.getUTCDate().toString();
         month = months[temp.getUTCMonth()];
         year = temp.getUTCFullYear().toString();
         legend = day + ', ' + date + ' ' + month + ' ' + year;
         return legend
   }",
          rangePad=5
          )

Using getUTCDay() and getUTCMonth() makes sure that the day and month numbers derived from ms are UTC, regardless of browser.

This solution works, so far as I've been able to test, in Chrome, Opera, Firefox, Safari, and the RStudio browser. I hope others may find this useful. My apologies to Dirk Eddelbuettel for not having understood his answer in 2017!

Date in dygraph (using R and xts) shows one day earlier than data

2 Answers2

Code

Chart

Data

Linked