arima forecasting with dygraph

[siddharth_sharma]

I wanna achieve the same with Arima model and I am kinda new to dygraph so could anyone just guide me through to get it done. I have browsed and tried to implement it with the help of documentation but couldn't achieve what was desired. link to the documentation what I referred to implement it with Arima model
https://www.rdocumentation.org/packages/forecast/versions/8.10/topics/forecast.stl

library(shiny)
library(dygraphs)
library(forecast)
library(tseries)
ui<-fluidPage(
  fluidRow(
    dygraphOutput("dychart")
  )
)
server<-function(input,output){
  output$dychart <- renderDygraph({
    qry2<-data.frame(
      mth = c(201301, 201302, 201303, 201304, 201305, 201306, 201307,
              201308, 201309, 201310, 201311, 201312, 201401,
              201402, 201403, 201404, 201405, 201406, 201407, 201408,
              201409, 201410, 201411, 201412, 201501, 201502, 201503,
              201504, 201505, 201506, 201507, 201508, 201509, 201510,
              201511, 201512, 201601, 201602, 201603, 201604, 201605,
              201606, 201607, 201608, 201609, 201610, 201611, 201612,
              201701, 201702, 201703, 201704, 201705, 201706, 201707,
              201708, 201709, 201710, 201711, 201712),
      records= c(148827, 151716, 164724, 175883, 191580, 191669, 205413,
                 183507, 183637, 173416, 167064, 175321, 178653,
                 171442, 201636, 201343, 219955, 214399, 221397, 207020,
                 205056, 179540, 194805, 193129, 190826, 197571, 211577,
                 217646, 243507, 243538, 246186, 231382, 222038, 216701,
                 199640, 220365, 215914, 223213, 234674, 241461, 273451,
                 257091, 269920, 245643, 232261, 206903, 225120, 224078,
                 222615, 224943, 257188, 258229, 297039, 281780, 299307,
                 281528, 258153, 257449, 245311, 240091)
    )
    
    
    interval_value_formatter <- "function(num, opts, seriesName, g, row, col) {
  value = g.getValue(row, col);
  if(value[0] != value[2]) {
    lower = Dygraph.numberValueFormatter(value[0], opts);
    upper = Dygraph.numberValueFormatter(value[2], opts);
    return '[' + lower + ', ' + upper + ']';
  } else {
    return Dygraph.numberValueFormatter(num, opts);
  }
}"
    timetravel<-ts(qry2$records,start = c(2013,1),frequency = 12)
    timetravel %>%
      stlf(lambda = 0, h = 36) %>%
      {cbind(actuals=.$x, forecast_mean=.$mean,
             lower_95=.$lower[,"95%"], upper_95=.$upper[,"95%"],
             lower_80=.$lower[,"80%"], upper_80=.$upper[,"80%"])} %>%
      dygraph(main="Random Records", ylab = "DATA") %>%
      dyAxis("y", valueFormatter = interval_value_formatter) %>%
      dySeries("actuals", color = "black") %>%
      dySeries("forecast_mean", color = "blue", label = "forecast") %>%
      dySeries(c("lower_80", "forecast_mean", "upper_80"),
               label = "80%", color = "blue") %>%
      dySeries(c("lower_95", "forecast_mean", "upper_95"),
               label = "95%", color = "blue") %>%
      dyLegend(labelsSeparateLines=TRUE) %>%
      dyRangeSelector() %>%
      dyOptions(digitsAfterDecimal = 1) %>%
      dyCSS(textConnection(".dygraph-legend {background-color: rgba(255, 255, 255, 0.5) !important; }"))
    
  })
  
}
shinyApp(ui,server)