javascriptrdygraphsr-dygraphs

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

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)

output

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

Solution

  • 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:

    enter image description here