Replicating exact plots from R in basic HTML

Question

the given script creates four plots in four boxes in R shiny dashboard page.I want to replicate the same four plots in the same manner in the following html script below the R code, and then embed the html template to make them available in R using Run App command. I am not able to achieve the plots, please help. Thank you so much.

## app.R ##
library(shiny)
library(shinydashboard)
library(devtools)
library(proto)
library(RColorBrewer)
library(gapminder)
library(broom)
library(mnormt)

ui <- dashboardPage(
dashboardHeader(title = "R to Html"),
dashboardSidebar(
width = 0
),
dashboardBody(
box(title = "Select the Data",selectInput("choice","Select the data", 
choices = c("data1","data2","data3")),
    status = "primary",solidHeader = T, height = "162"),

box(title = "Select the Slider Input",  status = "primary",solidHeader = T, 
    sliderInput("slide","Select the value from slider", min = 1, max = 4, 
value = 1)),

box(title = "Iris Plot", status = "primary",height = "435", solidHeader = T,
    plotOutput("plot1")),

box( title = "Iris Plot", status = "primary", height = "435",solidHeader = 
T, plotOutput("plot2"))
)
)
server <- function(input, output) 
{ 
output$plot1 = renderPlot ({

plot(iris$Sepal.Length)
})
output$plot2  = renderPlot ({
plot(iris$Sepal.Width)
})
}
shinyApp(ui, server)


**# HTML code:**

<html>
<head>
<title>Dashboard Page</title>
<body>
{{box1}}
{{box2}}
{{box3}}
{{box4}}
</body>
</html>

amrrs · Accepted Answer · 2017-09-19T09:55:55.363

0

To help you get started, I've modified a basic bootstrap template from w3schools and modified it to output shiny elements.

Based on our discussion, to include a theme, I've used the bootstrap theme united https://bootswatch.com/united/

HTML template - template1.html

    <!DOCTYPE html>
<html lang="en">
   <head>
      {{ headContent() }}
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://bootswatch.com/united/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </head>
   <body>
      <div class="container">
         <h1>Grid</h1>
         <p>This example demonstrates a 50%/50% split on small, medium and large devices. On extra small devices, it will stack (100% width).</p>
         <p>Resize the browser window to see the effect.</p>
         <div class="row">
            <div class="col-sm-6">
               {{sliderInput("slide","Select the value from slider",min= 1,max = 4,value =1)}}
            </div>
            <div class="col-sm-6" style="background-color:pink;">
               {{choices = c("data1","data2","data3")}}
            </div>
         </div>
         <div class="row">
            <div class="col-sm-6">
               <div class="panel panel-primary">
                  <div class="panel-heading">
                     <h3 class="panel-title">Plot 1</h3>
                  </div>
                  <div class="panel-body">
                     {{plotOutput('plot1')}}
                  </div>
               </div>
            </div>
            <div class="col-sm-6">
               <div class="panel panel-primary">
                  <div class="panel-heading">
                     <h3 class="panel-title">Plot 2</h3>
                  </div>
                  <div class="panel-body">
                     {{plotOutput('plot2')}}
                  </div>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

app.R file:

## app.R ##
library(shiny)
library(shinydashboard)
library(devtools)
#library(proto)
#library(RColorBrewer)
#library(gapminder)
#library(broom)
#library(mnormt)

ui <- shinyUI(
  htmlTemplate("template1.html")
)
server <- function(input, output) 
{ 
  output$plot1 = renderPlot ({

    plot(iris$Sepal.Length)
  })
  output$plot2  = renderPlot ({
    plot(iris$Sepal.Width)
  })
}
shinyApp(ui, server)

Output:

edited Sep 19 '17 at 09:55

answered Sep 19 '17 at 08:50

amrrs

6,215
2
18
27

Great amrrs, thank you so much for replying, c the query is why are we not able to see the the plots in boxes like we do in R shiny above and also proper alignment. Please help. – Ashmin Kaul Sep 19 '17 at 09:30
the reason you couldn't see the plots in boxes is because you're using ```shinydashboard``` which has some css elements to make your shiny project look better or pretty! Any specific reason you're going with html template instead of that? – amrrs Sep 19 '17 at 09:40
Well, I am making another html template in which these four boxes have to be incorporated, I cannot use the standard shinyDashboard Template, that's the reason. – Ashmin Kaul Sep 19 '17 at 09:44
I've updated the code using a bootstrap template, Please check – amrrs Sep 19 '17 at 09:56
This is great, I can't see the same result but.Is it because, I have to put the css file in the css folder in my directory? – Ashmin Kaul Sep 19 '17 at 10:03
Yes, that css must be overwriting the bootstrap one – amrrs Sep 19 '17 at 10:06
Hmm, I am a little confused here, I want the css code such that I can use it in my template. I cannot see the result by running the above codes. – Ashmin Kaul Sep 19 '17 at 10:07
Ideally, you should download this css https://bootswatch.com/united/bootstrap.css and then update your value on top of it! – amrrs Sep 19 '17 at 10:09
1

Very Very awsome. However, I shall try and revert back as I have somewhat understood it. – Ashmin Kaul Sep 19 '17 at 10:21
Hey, I wish to give this colour: #bfa161 to the
so as to change the colour of the header of the box. Is it possible?
– Ashmin Kaul Sep 19 '17 at 11:18
```.panel-warning > .panel-heading { color: #c09853; background-color: #fcf8e3; border-color: #fbeed5; }``` you'd need to change the color in this part of css – amrrs Sep 19 '17 at 11:22
I need your help in integrating the js code within R https://stackoverflow.com/questions/48162029/integrating-the-js-code-in-r-to-make-the-visnetwork-edges-curved – Ashmin Kaul Jan 09 '18 at 07:51

Replicating exact plots from R in basic HTML

1 Answers1