Is it possible to use box() element in classic shiny app? As classic app I mean not shiny dashboard.
Yes it's possible - you can use useShinydashboard() from library(shinyWidgets)
Here is an example:
library(shiny)
library(shinyWidgets)
library(shinydashboard)
ui <- fluidPage(
useShinydashboard(),
titlePanel("Old Faithful Geyser Data"),
sidebarLayout(
sidebarPanel(
sliderInput("bins",
"Number of bins:",
min = 1,
max = 50,
value = 30)
),
mainPanel(
box(plotOutput("distPlot"), title = "My box title", footer = "My box footer", collapsible = TRUE, status = "success")
)
)
)
server <- function(input, output) {
output$distPlot <- renderPlot({
x <- faithful[, 2]
bins <- seq(min(x), max(x), length.out = input$bins + 1)
hist(x, breaks = bins, col = 'darkgray', border = 'white')
})
}
shinyApp(ui = ui, server = server)
Related
I am attempting to add the Google Translate toolbar to a Shiny app, but I can't quite seem to get the syntax correct leveraging the code found at https://www.w3schools.com/howto/howto_google_translate.asp.
library(shiny)
ui <- fluidPage(
# tags$head(
tags$div(id="google_translate_element"),
HTML("<script type='text/javascript'>, function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');} </script>" ),
HTML("<script type='text/javascript', src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'></script>"),
# ),
HTML("<html lang='en'></html>"),
titlePanel("Old Faithful Geyser Data"),
sidebarLayout(
sidebarPanel(
sliderInput("bins",
"Number of bins:",
min = 1,
max = 50,
value = 30)
),
mainPanel(
plotOutput("distPlot")
)
)
)
server <- function(input, output) {
output$distPlot <- renderPlot({
x <- faithful[, 2]
bins <- seq(min(x), max(x), length.out = input$bins + 1)
hist(x, breaks = bins, col = 'darkgray', border = 'white')
})
}
shinyApp(ui = ui, server = server)
I have tried wrapping in tags$head() and I have tried calling the javascript from a .js file in my www folder with the project.
I appreciate any supports. Thank you!
Cool idea. This seems to work.
library(shiny)
ui <- fluidPage(
HTML("<!DOCTYPE html><html lang='en-US'><body><h1>My Web Page</h1><p>Hello everybody!</p><p>Translate this page:</p><div id='google_translate_element'></div><script type='text/javascript'>function googleTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');}</script><script type='text/javascript' src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'></script></body></html>"),
titlePanel("Old Faithful Geyser Data"),
sidebarPanel(
sliderInput("bins",
"Number of bins:",
min = 1,
max = 50,
value = 30
)
),
mainPanel(
plotOutput("distPlot")
)
)
server <- function(input, output) {
output$distPlot <- renderPlot({
x <- faithful[, 2]
bins <- seq(min(x), max(x), length.out = input$bins + 1)
hist(x, breaks = bins, col = 'darkgray', border = 'white')
})
}
shinyApp(ui = ui, server = server)
Friends, I would like to add a brief explanation about each filter used. Then, whenever you click on the filter name, a small window appears with a brief informative text about the meaning of that filter. I left an image attached to illustrate.
So, for example, if I click on "Number of bins" the description of the meaning of this filter appears. Obviously, if you click outside that info window, the info text will exit.
How can I do this in shiny?
library(shiny)
ui <- fluidPage(
titlePanel("Old Faithful Geyser Data"),
sidebarLayout(
sidebarPanel(
sliderInput("bins",
"Number of bins:",
min = 1,
max = 50,
value = 30)
),
sidebarLayout(
sidebarPanel(
sliderInput("bins",
"Number of bins:",
min = 1,
max = 20,
value = 30),
),
mainPanel(
plotOutput("distPlot")
)
)
))
server <- function(input, output) {
output$distPlot <- renderPlot({
# generate bins based on input$bins from ui.R
x <- faithful[, 2]
bins <- seq(min(x), max(x), length.out = input$bins + 1)
# draw the histogram with the specified number of bins
hist(x, breaks = bins, col = 'darkgray', border = 'white')
})
}
# Run the application
shinyApp(ui = ui, server = server)
Thank you very much!
You could use shinyBS for that - either bsTooltip, popify, or tipify. Example:
Edit:
Switched to popify.
library(shinyBS)
library(shiny)
ui <- fluidPage(
titlePanel("Old Faithful Geyser Data"),
sidebarLayout(
sidebarPanel(
popify(
sliderInput("bins",
"Number of bins:",
min = 1,
max = 20,
value = 30),
title = "Number of bins",
content = paste0("Number of bins refers to.....")
)
),
mainPanel(
plotOutput("distPlot")
)
)
)
server <- function(input, output) {
output$distPlot <- renderPlot({
# generate bins based on input$bins from ui.R
x <- faithful[, 2]
bins <- seq(min(x), max(x), length.out = input$bins + 1)
# draw the histogram with the specified number of bins
hist(x, breaks = bins, col = 'darkgray', border = 'white')
})
}
# Run the application
shinyApp(ui = ui, server = server)
How to make a menutem badge to align differently than default?
in the shinyUI.:
menuItem("Test", tabName = "test", icon = icon("line-chart"),badgeLabel = "2nd", badgeColor = "green")
Full example:
library(shiny)
library(shinydashboard)
# Default shiny
ui <- dashboardPage(
dashboardHeader(title = "Example"),
dashboardSidebar(
sidebarMenu(
menuItem("Test", tabName = "test", icon = icon("line-chart"),
badgeLabel = "2nd", badgeColor = "green")
)),
dashboardBody(
tabItems(
tabItem(tabName = "test",
box(title = "How-to",status = "primary",solidHeader = TRUE,collapsible=TRUE, width = 8,
sliderInput("bins",
"Number of bins:",
min = 1,
max = 50,
value = 30),
# Show a plot of the generated distribution
plotOutput("distPlot")
)
)
)))
# Define server logic required to draw a histogram
server <- function(input, output) {
output$distPlot <- renderPlot({
# generate bins based on input$bins from ui.R
x <- faithful[, 2]
bins <- seq(min(x), max(x), length.out = input$bins + 1)
# draw the histogram with the specified number of bins
hist(x, breaks = bins, col = 'darkgray', border = 'white')
})
}
# Run the application
shinyApp(ui = ui, server = server)
In the browser inspecting it shows the following code/:
<small class="badge pull-right bg-green">2nd</small>
test pic
I need:
<small class="badge center-block bg-green">2nd</small>
desired pic
Any idea?
You can use css as follows:
tags$style(type = 'text/css',".badge{min-width: 200px;}")
In your code it would come something like this:
library(shiny)
library(shinydashboard)
# Default shiny
ui <- dashboardPage(
dashboardHeader(title = "Example"),
dashboardSidebar(
##The added css
tags$style(type = 'text/css',".badge{min-width: 200px;}"),
sidebarMenu(
menuItem("Test", tabName = "test", icon = icon("line-chart"),
badgeLabel = "2nd", badgeColor = "green")
)),
dashboardBody(
tabItems(
tabItem(tabName = "test",
box(title = "How-to",status = "primary",solidHeader = TRUE,collapsible=TRUE, width = 8,
sliderInput("bins",
"Number of bins:",
min = 1,
max = 50,
value = 30),
# Show a plot of the generated distribution
plotOutput("distPlot")
)
)
)))
# Define server logic required to draw a histogram
server <- function(input, output) {
output$distPlot <- renderPlot({
# generate bins based on input$bins from ui.R
x <- faithful[, 2]
bins <- seq(min(x), max(x), length.out = input$bins + 1)
# draw the histogram with the specified number of bins
hist(x, breaks = bins, col = 'darkgray', border = 'white')
})
}
# Run the application
shinyApp(ui = ui, server = server)
You get something like this:
Hope it helps!
library(shiny)
# Define UI for application that draws a histogram
ui <- fluidPage(
includeCSS(path = "AdminLTE.css"), #added
includeCSS(path = "shinydashboard.css"), #added
# Application title
titlePanel("Old Faithful Geyser Data"),
# Sidebar with a slider input for number of bins
sidebarLayout(
sidebarPanel(
sliderInput("bins",
"Number of bins:",
min = 1,
max = 50,
value = 30)
),
# Show a plot of the generated distribution
mainPanel(
box(plotOutput("distPlot"), solidHeader = T, collapsible = T, title = "collapsible box not collapsing", status = "primary")
)
)
)
# Define server logic required to draw a histogram
server <- function(input, output) {
output$distPlot <- renderPlot({
# generate bins based on input$bins from ui.R
x <- faithful[, 2]
bins <- seq(min(x), max(x), length.out = input$bins + 1)
# draw the histogram with the specified number of bins
hist(x, breaks = bins, col = 'darkgray', border = 'white')
})
}
# Run the application
shinyApp(ui = ui, server = server)
This result is
In the above image the collpasible box is not getting collapsed when clicked on mininize button.
I have added the addtional AdminLTE.css and shinydashboard.css file in working directory, but still problem persists.
To use a collapsible box within shiny only. We need to add the required javascript. Just after adding css we add this file as well.
includeCSS(path = "AdminLTE.css"), #added
includeCSS(path = "shinydashboard.css"), #added
#add this file and collapsible nature should work.
includeScript(path = "app.js"), #
If you don't have a restriction to use shinydashboard, just create a dash board page without the header and the sidebar. It will enable all the features of shinydashboard and it will looks like a basic shiny app. In the code below the box collapse/uncollapse when you click on the minimize/maximize button.
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(disable = TRUE),
dashboardSidebar(disable = TRUE),
dashboardBody(
# Application title
titlePanel("Old Faithful Geyser Data"),
# Sidebar with a slider input for number of bins
sidebarLayout(
sidebarPanel(
sliderInput("bins", "Number of bins:", min = 1, max = 50, value = 30)
),
# Show a plot of the generated distribution
mainPanel(
box(plotOutput("distPlot"), solidHeader = T, collapsible = T,
title = "collapsible box not collapsing", status = "primary")
)
)
)
)
# Define server logic required to draw a histogram
server <- function(input, output) {
output$distPlot <- renderPlot({
# generate bins based on input$bins from ui.R
x <- faithful[, 2]
bins <- seq(min(x), max(x), length.out = input$bins + 1)
# draw the histogram with the specified number of bins
hist(x, breaks = bins, col = 'darkgray', border = 'white')
})
}
# Run the application
shinyApp(ui = ui, server = server)
This is my ui.R. This is an example provided in Shiny tutorial. I just edited it.
library(shiny)
library(markdown)
# Define UI for application that draws a histogram
shinyUI(fluidPage(
# Application title
titlePanel("Hello Shiny!"),
# Sidebar with a slider input for the number of bins
sidebarLayout(
sidebarPanel(
sliderInput("bins",
"Number of bins:",
min = 1,
max = 50,
value = 30)
),
# Show a plot of the generated distribution
mainPanel(
plotOutput("distPlot"),
absolutePanel(
bottom = 0, left=420, width = 800,
draggable = TRUE,
wellPanel(
em("This panel can be moved")
)
)
))
))
and my server. R
library(shiny)
# Define server logic required to draw a histogram
shinyServer(function(input, output) {
# Expression that generates a histogram. The expression is
# wrapped in a call to renderPlot to indicate that:
#
# 1) It is "reactive" and therefore should be automatically
# re-executed when inputs change
# 2) Its output type is a plot
output$distPlot <- renderPlot({
x <- faithful[, 2] # Old Faithful Geyser data
bins <- seq(min(x), max(x), length.out = input$bins + 1)
# draw the histogram with the specified number of bins
hist(x, breaks = bins, col = 'darkgray', border = 'white')
})
})**
In this case, sliderInput is not working. If i remove absolute panel, sliderInput is ok. What may be the problem? Many thanks
The absolutePanel uses the jqueryui javascript library. It has its own slider. This results in a conflict with sliderInput which uses jslider library. You can see this as follows:
library(shiny)
runApp(
list(ui = fluidPage(
titlePanel("Hello Shiny!"),
sidebarLayout(
sidebarPanel(
sliderInput("bins",
"Number of bins:",
min = 1,
max = 50,
value = 30)
),
mainPanel(
plotOutput("distPlot")
, tags$head(tags$script(src = "shared/jqueryui/1.10.3/jquery-ui.min.js"))
)
)
),
server = function(input, output) {
output$distPlot <- renderPlot({
x <- faithful[, 2] # Old Faithful Geyser data
bins <- seq(min(x), max(x), length.out = input$bins + 1)
hist(x, breaks = bins, col = 'darkgray', border = 'white')
})
}
)
)
EDIT: This has been fixed in the latest dev version of shiny. The slider component has been removed from the jqueryui inc. https://github.com/rstudio/shiny/commit/7e12a281f51e047336ba2c501fcac43af5253225