0

Hay alguna forma de que en el gráfico me aparezca el dylimit() por encima del dygraph()? es decir que la linea roja se vea por encima de las barras. He estado buscando y tratando diferentes combinaciones pero no logro realizarlo.

Esto es lo que tengo Esto es lo que tengo

Esto es lo que me gustaría tener Esto es lo que me gustaria tener

El código que estoy usando es el siguiente:

dygraph((base1,"Titulo del grafico") %>% 
      dyAxis("y", label = "Porcentaje de cumplimiento", valueRange = c(0, 110)) %>% 
      dyAxis("x", label = "Mes y año", drawGrid = FALSE) %>% 
      dySeries(drawPoints = TRUE,label="Resultado", pointShape = "square", color = "lightblue",pointSize=2.5) %>%
      dyRangeSelector(dateWindow =     ds1.1.1[c(length(ds1.1.1)-12,length(ds1.1.1))]) %>%
      dyBarChart() %>% 
      dyLimit(95, "Mínimo permitido (95)", strokePattern = "solid", color =     "red")

Edito y agrego un ejemplo reproducible:

library("zoo")

a=c(0,0,0,7,1,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,2,2,0,1,0,0,1,0,3,0,1,1,0,0,2,0,0,0,0,1,2,2,0)
b=c(597,619,639,622,613,591,632,611,596,598,558,542,567,556,595,543,597,617,543,596,636,386,336,349,376,318,329,339,304,309,301,321,308,472,344,292,389,306,282,312,313,376,315,327)
base1.1.1=cbind(a,b)

base1.1.1=ts(frequency = 12, start = c(2015, 10),base1.1.1)
ds1.1.1=as.Date(as.yearmon(index(as.zoo(base1.1.1)),"%mmm %Y"), frac = 0)

dygraph((1-(base1.1.1[,1]/base1.1.1[,2]))*100,"Titulo A") %>% 
  dyAxis("y", label = "Porcentaje de cumplimiento", valueRange = c(0, 110)) %>%  
  dyAxis("x", label = "Mes y año", drawGrid = FALSE) %>% 
  dySeries(drawPoints = TRUE,label="Resultado", pointShape = "square", color = "lightblue",pointSize=2.5) %>% 
  dyRangeSelector(dateWindow = ds1.1.1[c(length(ds1.1.1)-12,length(ds1.1.1))])  %>% 
  dyLimit(95, "Mínimo permitido (95)", strokePattern = "solid", color =     "red") %>% 
  dyBarChart()
0

1 respuesta 1

0

El problema, es la línea punteada y el texto que aparecen debajo de las barras. Hasta el momento no encontré forma de modificar este comportamiento, que en principio es solo para los gráficos tipo barcharts, en los gráficos de linea tipo el dySeries() funciona perfectamente.

Una solución posible, es escribir en javascript nuestra propia función de plot de barras y agregarle a la misma la línea que queremos. La idea es algo así:

library("zoo")
library("dplyr")
library("dygraphs")
library("htmlwidgets")

minimo_permitido <- 95
myPlotter = JS(gsub("<<label>>", paste("Mínimo permitido (",minimo_permitido, ")"), 
                    gsub("<<ypos>>", minimo_permitido, "
            function barChartPlotter(e) {
               var ctx = e.drawingContext;
               var points = e.points;
               var y_bottom = e.dygraph.toDomYCoord(0);

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

              // 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);
              }

              var yPos=<<ypos>>;
              var width=points[points.length-1].canvasx;

              // Text
              ctx.fillStyle = \"red\";
              ctx.font = 'bold 12px sans';
              ctx.fillText('<<label>>', 90, e.dygraph.toDomYCoord(yPos)-5);

              // Dashed line
              ctx.beginPath();
              ctx.strokeStyle = \"red\";
              ctx.lineWidth = 3;
              ctx.setLineDash([15, 5]);

              ctx.moveTo(0, e.dygraph.toDomYCoord(yPos));
              ctx.lineTo(width, e.dygraph.toDomYCoord(yPos));
              ctx.stroke();

            }")))


dygraph((1-(base1.1.1[,1]/base1.1.1[,2]))*100,"Titulo A") %>% 
  dyAxis("y", label = "Porcentaje de cumplimiento", valueRange = c(0, 110)) %>%  
  dyAxis("x", label = "Mes y año", drawGrid = FALSE) %>% 
  dySeries(drawPoints = TRUE,label="Resultado", pointShape = "square", color = "lightblue",pointSize=2.5) %>% 
  dyRangeSelector(dateWindow = ds1.1.1[c(length(ds1.1.1)-12,length(ds1.1.1))])  %>% 
  dyOptions(plotter =  myPlotter)

Básicamente, generamos una función en js que se va a encargar de realizar todo el gráfico, barras y la línea punteada que queremos. La salida final es algo así:

introducir la descripción de la imagen aquí

Nota: El código está basado en las respuestas de esta pregunta

5
  • Gracias por su respuesta, una consulta ya utilice la informacion que me dejaste en el comentario sin embargo no me grafica la linea, que puede ser?
    – JRN
    Commented el 6 ago. 2019 a las 16:32
  • Lamentablemente no tengo forma de saberlo, tendrías que crear un ejemplo con datos y código que sea reproducible como para poder analizarlo. Commented el 6 ago. 2019 a las 16:35
  • Amigo, agregue al final del post el codigo para que sea reproducible. Le agradezco profundamente su tiempo y la ayuda que me ha estado dando. @Patricio-Moracho
    – JRN
    Commented el 6 ago. 2019 a las 16:58
  • @JRN, ahí edité tu pregunto y mi respuesta con algunos ajustes al código JS. Recuerda que debes configurar previamente la variable minimo_permitido al valor deseeado. Commented el 6 ago. 2019 a las 17:27
  • Excelente!!! Funciona y se ve como lo ocupaba, muchisimas gracias!
    – JRN
    Commented el 6 ago. 2019 a las 18:19

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.