R shiny refreshing “Rangeslider” and “rangeselector” of Plotly, while updating the “real time data”

[avijit mallick]

I have also raised this question at stack overflow but could not get the answer. the link is https://stackoverflow.com/questions/51914510/r-shiny-refreshing-rangeslider-and-rangeselector-of-plotly-while-updating-t  

0down votefavorite

I am making my first shiny app. with plotly on real-time stock data from the sitehttps://finance.yahoo.com/lookup. I have done my data cleaning as per the following code.

url<-("http://finance.yahoo.com/quote/")

stock_pt<-read_html(url)%>%html_nodes(xpath = '//*[@id = "market-summary"]/li')%>%html_nodes(xpath = ".//text()[normalize-space()]")%>%html_text()%>%
    as.matrix()%>%as.data.frame()%>%split(1:3)%>%as.data.frame()%>%t()%>%as.data.frame()

    names(stock_pt)<-lapply(stock_pt[1,], as.character)
    stock_pt<-(stock_pt[-1,])

    #change row name
    rownames(stock_pt)<-c(1:2)

    #two data frame formed
    stock_point<-stock_pt[1,]


    stock_point<-as.matrix(stock_point)

    stock_point[1:15]<-as.numeric(gsub(",", "", stock_point[1:15]))

    stock_point<-as.data.frame(lapply(stock_point[1,], function(x) as.numeric(as.character(x))))


   stock_point<- stock_point%>%mutate(timestamp=as.POSIXct(format(Sys.time(), "%Y-%m-%d %H:%M:%S")))%>%as.data.frame()%>%
      select(timestamp, everything())%>%rename_all(funs(make.names(.)))

Here is the final Result after data cleaning.
stock_point
            timestamp S.P.500   Dow.30  Nasdaq Russell.2000 Crude.Oil   Gold Silver EUR.USD X10.Yr.Bond   Vix GBP.USD USD.JPY
1 2018-08-19 08:59:19 2850.13 25669.32 7816.33      1692.95     65.92 1191.8  14.77    1.15        2.87 12.64    1.27  110.49
  Bitcoin.USD FTSE.100 Nikkei.225
1     6361.88  7558.59   22270.38

str(stock_point)
'data.frame':   1 obs. of  16 variables:
 $ timestamp   : POSIXct, format: "2018-08-19 08:59:19"
 $ S.P.500     : num 2850
 $ Dow.30      : num 25669
 $ Nasdaq      : num 7816
 $ Russell.2000: num 1693
 $ Crude.Oil   : num 65.9
 $ Gold        : num 1192
 $ Silver      : num 14.8
 $ EUR.USD     : num 1.15
 $ X10.Yr.Bond : num 2.87
 $ Vix         : num 12.6
 $ GBP.USD     : num 1.27
 $ USD.JPY     : num 110
 $ Bitcoin.USD : num 6362
 $ FTSE.100    : num 7559
 $ Nikkei.225  : num 22270

class(stock_point)
[1] "data.frame"
Now lets make shiny app by integraing in
Shiny UI server
library(shiny)
library(magrittr)


ui<-shinyServer(fluidPage(
  titlePanel("Real Time market stock from Yahoo"),



**##side bar and sidepanel**

sidebarLayout(


    column(8, selectInput("select", label = h3("Select Box"),
                          choices = list("S.P.500",  "Dow.30", "Nasdaq", "Russell.2000", "Crude.Oil","Gold",
                                         "Silver", "EUR.USD", "X10.Yr.Bond",  "Vix",  "GBP.USD", "USD.JPY", "Bitcoin.USD",
                                         "FTSE.100","Nikkei.225")
    ))

     ),
  mainPanel(

   column(8, plotlyOutput(outputId = "timeseries", width = "800px")),
   column(8, plotlyOutput(outputId = "percentage", width = "800px")))
)


))
server
server<-shinyServer(function(input, output, session){
# Function to get new observations
 stock_point_new<-function(stock_point){

stock_pt<-read_html(url)%>%html_nodes(xpath = '//*[@id = "market-summary"]/li')%>%html_nodes(xpath = ".//text()[normalize-space()]")%>%html_text()%>%
as.matrix()%>%as.data.frame()%>%split(1:3)%>%as.data.frame()%>%t()%>%as.data.frame()

names(stock_pt)<-lapply(stock_pt[1,], as.character)
stock_pt<-(stock_pt[-1,])

**#change row name**
rownames(stock_pt)<-c(1:2)

**#two data frame formed**
stock_point<-stock_pt[1,]


stock_point<-as.matrix(stock_point)

stock_point[1:15]<-as.numeric(gsub(",", "", stock_point[1:15]))



 stock_point<-as.data.frame(lapply(stock_point[1,], function(x) as.numeric(as.character(x))))




 stock_point<- stock_point%>%mutate(timestamp=as.POSIXct(format(Sys.time(), "%Y-%m-%d %H:%M:%S")))%>%as.data.frame()%>%
      select(timestamp, everything())%>%rename_all(funs(make.names(.)))

return(stock_point) 
}
# Initialize my_data
 my_point_data <<- stock_point_new()
# Function to update my_data
 update_point_data <- function(){
    my_point_data <<- rbind(stock_point_new(), my_point_data)

  }
##set some color
 plotcolor <- "#F5F1DA"
  papercolor <- "#E3DFC8"
# # Plot time series chart
 output$timeseries <- renderPlotly({
    print("Render")
    invalidateLater(15000, session)
    update_point_data()
    print(my_point_data)

    if(input$select == "S.P.500"){

      plot_ly(source = "source")%>%add_lines(data = my_point_data, x = my_point_data$timestamp,
                    y = my_point_data$S.P.500, color ="red", line = list(width = 3))%>%

    layout(title = "stock price of different market",

     xaxis =(list(title = "time",

             gridcolor = "#bfbfbf", 

             rangeslider = list(type = "date"),

               rangeselector = list(
                  buttons = list(
               list(
                 count = 3,
                 label = "3 mo",
                 step = "month",
                 stepmode = "backward"),
               list(
                 count = 1,
                 label = "1 yr",
                 step = "year",
                 stepmode = "backward"),
               list(
                 count = 1,
                 label = "YTD",
                 step = "year",
                 stepmode = "todate"),
               list(step = "all")))
             )),

           yaxis = list(title = "S.P.500", side = "left", overlaying = "y"),

           plot_bgcolor = plotcolor,

           paper_bgcolor = papercolor

      )
    }

    else if(input$select == "Bitcoin.USD"){

      plot_ly(source = "source")%>%add_lines(data = my_point_data, x = my_point_data$timestamp,
                                             y = my_point_data$Bitcoin.USD, color ="blue", line = list(width = 3), 
                                             mode = "markers", marker = list(sizemode = "area", size = my_point_data$timestamp ))%>%


        layout(title = "stock price of different market",

               xaxis =(list(title = "time",

                            gridcolor = "#bfbfbf", 

                            rangeslider = list(type = "date"),

                            rangeselector = list(
                              buttons = list(
                                list(
                                  count = 3,
                                  label = "3 mo",
                                  step = "month",
                                  stepmode = "backward"),
                                list(
                                  count = 1,
                                  label = "1 yr",
                                  step = "year",
                                  stepmode = "backward"),
                                list(
                                  count = 1,
                                  label = "YTD",
                                  step = "year",
                                  stepmode = "todate"),
                                list(step = "all")))
               )),

               yaxis = list(title = "Bitcoin.USD", side = "left", overlaying = "y"),

               plot_bgcolor = plotcolor,

               paper_bgcolor = papercolor

        )

    }

  })
})



shinyApp(ui = ui, server = server)
I am getting the following graph. 
I am trying to make a similar graph like this yahoo link: Bitcon.USD from Yahoo
Now my question are.
Whenever the new data is getting an update in the plot after every 15 sec, it is refreshing the whole plot, thus making data updating is slow. And if I select the period for "3 months" or select the "range selector", then also after each update of new data, the selection comes to the initial starting position.
I could not fix the x-axis scale length say for "5 minutes" similar to the line graph this scale, rather the x-axis scale length going on additive nature.
Any suggestion is always appreciated.