How to display all the months (axis ticks/breaks) on the following dygraph? (R)

Question

Following R code and data provided, uses the dygraph library (R interface for the js dygraph)

library(xts)
library(htmlwidgets)
library(dygraphs)

date <- c("2015-01-01", "2015-02-01", "2015-03-01", "2015-04-01", "2015-05-01", "2015-06-01", "2015-07-01", "2015-08-01", "2015-09-01", "2015-10-01","2015-11-01", "2015-12-01")

revenue <- c(81920, 75240, 70840, 66560, 72140, 71160, 73880, 73900, 69160, 75940, 76100, 76020)

rate <- c(5.10, 5.15, 4.41, 4.33, 4.39, 4.62, 4.58, 4.67, 4.40, 4.85, 4.83, 4.76)

data <- data.frame(date, revenue, rate)
data$date <- as.Date(data$date, format="%Y-%m-%d")

#convert data to xts object
data <- xts(x=data, order.by = data$date)

getMonth <- 'function(d){
               var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
               return monthNames[d.getMonth()];
               }'

customTicker <- 'function(min, max, pixels, opts) {
            return Dygraph.getDateAxis(min, max, Dygraph.Granularity.MONTHLY, opts, this);
          }'

dygraph(data, main = "Revenue & Rate") %>%
  dyAxis("x", rangePad = 40, drawGrid = FALSE, axisLabelFormatter=JS(getMonth)) %>%
  dyAxis("y", label = "Revenue", valueRange = c(0, 100000), independentTicks = TRUE)%>%
  dyAxis("y2", label = "Rate ", valueRange = c(0, 10), independentTicks = TRUE) %>%
  dyBarSeries('revenue', label="revenue",color = "#0099F9") %>% 
  dySeries('rcrate', label="rate",color = "#15354A", axis=('y2'), strokeWidth=4, pointSize=3, drawPoints=TRUE)

how do I get all months to show on the date axis, instead of just a select few (at max plot size, all months appear. I want all the months to always appear irrespective of the plot size).

ticker=JS(customTicker) argument in dyAxis("x" ...) doesn't seem to work. Probs has to do with Dygraph.getDateAxis ... (im not referencing the current dygraph object properly?)

Another user asked about this using the js version, How to show all months with dygraphs?

Here is the fiddle: https://jsfiddle.net/wvsj8toc/3/

Update:

According to the docs, ticker argument takes an array of (value, label) pairs. I tried running the fiddle for 2015-01-01 - 2015-12-01 and got the below array using console.log (for the ticker's return value). I put this value for the ticker argument in dyAxis and it works.

[{ v: 1420059600000, label: "Jan"}, { v: 1422738000000, label: "Feb"}, { v: 1425157200000, label: "Mar"}, { v: 1427835600000, label: "Apr"}, { v: 1430427600000, label: "May"}, { v: 1433106000000, label: "Jun"}, { v: 1435698000000, label: "Jul"}, { v: 1438376400000, label: "Aug"}, { v: 1441054800000, label: "Sep"}, { v: 1443646800000, label: "Oct"}, { v: 1446325200000, label: "Nov"}, { v: 1448917200000, label: "Dec"}];

customTicker <- 'function(a, b, pixels, opts) {
return [{    v: 1420059600000, label: "Jan"}, {    v: 1422738000000, label: "Feb"}, {    v: 1425157200000, label: "Mar"}, {    v: 1427835600000, label: "Apr"}, {    v: 1430427600000, label: "May"}, {    v: 1433106000000, label: "Jun"}, {    v: 1435698000000, label: "Jul"}, {    v: 1438376400000, label: "Aug"}, {    v: 1441054800000, label: "Sep"}, {    v: 1443646800000, label: "Oct"}, {    v: 1446325200000, label: "Nov"}, {    v: 1448917200000, label: "Dec"}];}
'
  
dygraph(data, main = "Revenue & Rate") %>%
  dyAxis("x", rangePad = 40, drawGrid = FALSE, ticker= JS(customTicker), axisLabelFormatter=JS(getMonth)) %>%

How do I generate this array though?

References:

https://dygraphs.com/options.html#ticker https://www.rdocumentation.org/packages/dygraphs/versions/1.1.1.6/topics/dyAxis

score 2 · Accepted Answer · answered May 15 '22 at 00:55

Assuming you have a vector of dates (like you do in your question), you can create the name-value paired array like this. Just keep in mind that Javascript is a bit prickly about dates! So a small change can make it all fall apart.

If you have any questions, let me know.

ticker = "function(a, b) {
          cDts = ['2015-01-01', '2015-02-01', '2015-03-01', '2015-04-01', 
                  '2015-05-01', '2015-06-01', '2015-07-01', '2015-08-01',
                  '2015-09-01', '2015-10-01','2015-11-01', '2015-12-01'];
          x = [];
          for(i = 0; i < cDts.length; i++) {
            d = Date.parse(cDts[i]);
            e = new Date(cDts[i]);
            e.setDate(e.getDate() + 1); /*assuming you're not in Greenwich, England*/
            lab = e.toLocaleString('default', {month: 'short'});
            x[i] = {'v': d, 'label': lab};
          }
          return x
         }"

Now the ticker with the whole function:

dygraph(data, main = "Revenue & Rate") %>%
  dyAxis("x", rangePad = 40, drawGrid = FALSE, 
         axisLabelFormatter=JS(getMonth),
         ticker = "function(a, b) {
          cDts = ['2015-01-01', '2015-02-01', '2015-03-01', '2015-04-01', 
                  '2015-05-01', '2015-06-01', '2015-07-01', '2015-08-01',
                  '2015-09-01', '2015-10-01','2015-11-01', '2015-12-01'];
          x = [];
          for(i = 0; i < cDts.length; i++) {
            d = Date.parse(cDts[i]);
            e = new Date(cDts[i]);
            e.setDate(e.getDate() + 1); /*assuming you're not in Greenwich, England*/
            lab = e.toLocaleString('default', {month: 'short'});
            x[i] = {'v': d, 'label': lab};
          }
          return x
         }") %>%
  dyAxis("y", label = "Revenue", 
         valueRange = c(0, 100000), independentTicks = TRUE)%>%
  dyAxis("y2", label = "Rate ",
         valueRange = c(0, 10), independentTicks = TRUE) %>%
  dyBarSeries('revenue', label="revenue",color = "#0099F9") %>% 
  dySeries('rate', label="rate", color = "#15354A", axis=('y2'), 
           strokeWidth=4, pointSize=3, drawPoints=TRUE)

This is the result of this R and JS call for dygraph:

Cheers for the help! I used argument a, b from the ticker to get the start and end dates for the x-axis and then generated the corresponding array (month wise as shown in this example or datewise). As I recall the start and end dates from the dygraph ticker is 1 month lagged or something (no idea why!), so will need to take care of that. — vorkatht11, May 17 '22 at 05:42
Javascript assumes an entered date is in Zulu time (Greenwich, England). However, when it presents the date, it assumes you want the date displayed in your local time. That's the purpose the of the line `e.setDate(e.getDate() + 1);` This adds a day, because I'm in central time. If I didn't include this line, the months would be December through November, because the date Jan 1 in Zulu gave me Dec 31 in my local time. — Kat, May 17 '22 at 12:34

How to display all the months (axis ticks/breaks) on the following dygraph? (R)

Update:

References:

1 Answers1