dyLimit for limited time in Dygraphs

Question

I'm trying to draw a dygraph plot (barplot thanks to the answer to Create a barplot in R using dygraphs package) with two horizontal lines, but not ranging the whole OX axis.

What I have now is:

And what I would like to have is:

The only think I know how to get is (but that is not what I want):

Does anybody know is it possible to obtain my goal? I'd be greatfull for any help!

My code to reproduce the plot:

library("dplyr")
library("data.table")
library("dygraphs")
library("htmlwidgets")

# data:

graph_data <- structure(c(0, 584.5, 528.5, 601.3, 336.8, 0), .Dim = c(6L, 1L
), index = structure(c(1448928000, 1451606400, 1454284800, 1456790400, 
                       1459468800, 1462060800), 
                     tzone = "UTC", tclass = c("POSIXct", "POSIXt")), 
.indexCLASS = c("POSIXct", "POSIXt"), tclass = c("POSIXct", "POSIXt"), 
.indexTZ = "UTC", tzone = "UTC", 
.Dimnames = list(NULL, "ile"), class = c("xts", "zoo"))

# > graph_data
#              ile
# 2015-12-01   0.0
# 2016-01-01 584.5
# 2016-02-01 528.5
# 2016-03-01 601.3
# 2016-04-01 336.8
# 2016-05-01   0.0

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

getMonthDay <- 'function(d) {
var monthNames = ["Sty", "Luty", "Mar", "Kwi", "Maj", "Cze","Lip", "Sie", "Wrz", "Paź", "Lis", "Gru"];
date = new Date(d);
return monthNames[date.getMonth()]+ \" \" +date.getFullYear(); }'

# set limit:

limit <- 600

# drow a plot:

dygraph(graph_data) %>%
    dyOptions(useDataTimezone = TRUE, plotter =
                  "function barChartPlotter(e) {
              var ctx = e.drawingContext;
              var points = e.points;
              var y_bottom = e.dygraph.toDomYCoord(0);  // see     http://dygraphs.com/jsdoc/symbols/Dygraph.html#toDomYCoord

              // This should really be based on the minimum gap
              var bar_width = 2/3 * (points[1].canvasx - points[0].canvasx);
              ctx.fillStyle = \"blue\";

              // Do the actual plotting.
              for (var i = 0; i < points.length; i++) {
              var p = points[i];
              var center_x = p.canvasx;  // center of the bar

              ctx.fillRect(center_x - bar_width / 2, p.canvasy,
              bar_width, y_bottom - p.canvasy);
              ctx.strokeRect(center_x - bar_width / 2, p.canvasy,
              bar_width, y_bottom - p.canvasy);
              }
              }"
        ) %>%
    dyLimit(limit, color = "red") %>%
    dyRangeSelector() %>%
    dyAxis("y", valueRange = c(0, limit),
           label = "ile") %>%
    dyAxis("x", axisLabelFormatter = JS(getMonthDay),
           valueFormatter=JS(getMonthDay))

Answer 1

You can add lines to your dygraph within the plotter function, by using e.dygraph.toDomYCoord() and e.dygraph.toDomXCoord() to project the points coordinates, ctx.fillStyle to select color and ctx.fillRect() to draw the lines :

dygraph(graph_data) %>%
        dyOptions(useDataTimezone = TRUE, plotter =
                          "function barChartPlotter(e) {
                  var ctx = e.drawingContext;
                  var points = e.points;
                  var y_bottom = e.dygraph.toDomYCoord(0);  // see     http://dygraphs.com/jsdoc/symbols/Dygraph.html#toDomYCoord

                  // This should really be based on the minimum gap
                  var bar_width = 2/3 * (points[1].canvasx - points[0].canvasx);
                  ctx.fillStyle = \"blue\";

                  // Do the actual plotting.
                  for (var i = 0; i < points.length; i++) {
                  var p = points[i];
                  var center_x = p.canvasx;  // center of the bar

                  ctx.fillRect(center_x - bar_width / 2, p.canvasy,
                  bar_width, y_bottom - p.canvasy);
                  ctx.strokeRect(center_x - bar_width / 2, p.canvasy,
                  bar_width, y_bottom - p.canvasy);
                  }

                  // Lines
                  var yHi=600;
                  var yLow=400;
                  var xRange=e.dygraph.xAxisRange();
                  var xSwitch=points[3].canvasx+bar_width/2;

                  ctx.fillStyle = \"red\";
                  ctx.fillRect(e.dygraph.toDomXCoord(xRange[0]),
                               e.dygraph.toDomYCoord(yHi),
                               xSwitch-e.dygraph.toDomXCoord(xRange[0]),
                               5);

                  ctx.fillStyle = \"green\";
                  ctx.fillRect(xSwitch,
                               e.dygraph.toDomYCoord(yLow),
                               e.dygraph.toDomXCoord(xRange[1])-xSwitch,
                               5);
                  }"
        ) %>%
        dyLimit(limit, color = "red") %>%
        dyRangeSelector() %>%
        dyAxis("y", valueRange = c(0, limit),
               label = "ile") %>%
        dyAxis("x", axisLabelFormatter = JS(getMonthDay),
               valueFormatter=JS(getMonthDay))

Then you get: