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)) 1 Answers
Answers 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:
0 comments:
Post a Comment