Hopefully someone can guide me on this
I am using an HTMLtemplate in a shiny App that I had already made before. The problem arises when implementing action buttons and dates, since I do not get any output when activating them, although when putting graphics of the same package with a
they do appear. I have to add commands to the htmltemplate or the css for the buttons to work?
The code is the following:
App
library(shiny)
library(echarts4r)
library(dplyr)
library(zoo)
library(quantmod)
library(leaflet)
ui <- fluidPage(
htmlTemplate(filename = "www/index.html",
explorer = fluidPage(
column(width = 4, tags$style('.input-sm {font-size: 12px; } label {font-weight: 300; margin-bottom: 10px; }'),
dateInput("fecha1", "Fecha inicial", value = "2015-01-01"),
dateInput("fecha2", "Fecha final", value = "2017-01-01"),
textInput("Stock","Ingresa un stock"),
actionButton("GO","Obtener info") ),
column(width = 8,
echarts4rOutput("graf1")
)
),
graf = fluidPage(
leaflet() |>
addTiles() |>
setView(-93.65, 42.0285, zoom = 4)
)
)
)
server <- function(input, output) {
data <- eventReactive(input$GO,{
req(input$Stock)
getSymbols(input$Stock,src = "yahoo", from= input$fecha1 ,to= input$fecha2 ,auto.assign=F)
})
datos <- reactive({data.frame(Fecha = as.Date(index(data())), data() ) |>
na.omit()
})
grafico <- reactive({
datos() |>
rename( simbolo = names(datos()[5]) )
})
grafico1 <- reactive({
grafico() |>
filter(simbolo == max(simbolo) | simbolo == min(simbolo) )
})
output$graf1 <- renderEcharts4r({
grafico() |>
e_charts(Fecha) |>
e_line(simbolo, symbol = "none", name = input$Stock) |>
e_tooltip(trigger = "axis") |>
#e_datazoom() |>
e_y_axis(min = min(grafico()$simbolo)) |>
e_color(color = "#8a3333") |>
e_toolbox_feature(
feature = "magicType",
type = list("line", "bar")
) |>
e_brush() |>
e_toolbox_feature(feature = "saveAsImage") |>
e_toolbox_feature(feature = "restore")
})
}
shinyApp(ui = ui, server = server)
Template
<!DOCTYPE html>
<html lang="en">
<head>
<title>Snipp - Free Bootstrap 4 Template by Colorlib</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,700,800" rel="stylesheet">
<link rel="stylesheet" href="css/open-iconic-bootstrap.min.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/aos.css">
<link rel="stylesheet" href="css/ionicons.min.css">
<link rel="stylesheet" href="css/bootstrap-datepicker.css">
<link rel="stylesheet" href="css/jquery.timepicker.css">
<link rel="stylesheet" href="css/flaticon.css">
<link rel="stylesheet" href="css/icomoon.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light" id="ftco-navbar">
<div class="container">
<a class="navbar-brand" href="index.html">R-conomics.</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="oi oi-menu"></span> Menu
</button>
<div class="collapse navbar-collapse" id="ftco-nav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active"><a href="index.html" class="nav-link">Home</a></li>
<li class="nav-item"><a href="about.html" class="nav-link">About</a></li>
<li class="nav-item"><a href="services.html" class="nav-link">Services</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="portfolio.html" id="dropdown04" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Portfolio</a>
<div class="dropdown-menu" aria-labelledby="dropdown04">
<a class="dropdown-item" href="portfolio.html">Portfolio</a>
<a class="dropdown-item" href="portfolio-single.html">Portfolio Single</a>
</div>
</li>
<li class="nav-item"><a href="blog.html" class="nav-link">Case Studies</a></li>
<li class="nav-item"><a href="contact.html" class="nav-link">Contact</a></li>
<li class="nav-item cta"><a href="contact.html" class="nav-link"><span>R-conomics</span></a></li>
</ul>
</div>
</div>
</nav>
<!-- END nav -->
<!-- <div class="js-fullheight"> -->
<div class="hero-wrap js-fullheight">
<div class="overlay"></div>
<div id="particles-js"></div>
<div class="container">
<div class="row no-gutters slider-text align-items-center justify-content-center" data-scrollax-parent="true">
<div class="col-md-6 ftco-animate text-center" data-scrollax=" properties: { translateY: '50%' }">
<h1 class="mb-4" data-scrollax="properties: { translateY: '30%', opacity: 1.6 }">Explorador <strong>apps</strong> justo aquí</h1>
<p data-scrollax="properties: { translateY: '30%', opacity: 1.6 }"><a href="https://r-conomics.netlify.app/course/" class="btn btn-primary btn-outline-white px-5 py-3">Mira otras apps</a></p>
</div>
</div>
</div>
</div>
<div class="bg-light">
<section class="ftco-section-featured ftco-animate">
<div class="container-fluid" data-scrollax-parent="true">
<div class="row no-gutters d-flex align-items-center" data-scrollax=" properties: { translateY: '-30%'}">
<div class="col-md-3 mb-3">
<a href="#" class="featured-img">
<div class="text-1 p-4 d-flex align-items-center">
<h3>The Verge<br><span class="tag">Website</span></h3>
</div>
<img src="images/image_1.jpg" class="img-fluid" alt="">
<div class="text p-4 d-flex align-items-center">
<div class="user d-flex align-items-center">
<div class="user-img mr-3" style="background-image: url(images/person_1.jpg);"></div>
<h3>John Bruce <br><span class="position">Designer</span></h3>
</div>
</div>
</a>
</div>
<div class="col-md-6">
<div class="row no-gutters">
<div class="col-md-12">
<div class="row no-gutters d-flex align-items-end">
<div class="col-md-8">
<a href="#" class="featured-img">
<div class="text-1 p-4 d-flex align-items-center">
<h3>Racks<br><span class="tag">Website</span></h3>
</div>
<img src="images/image_5.jpg" class="img-fluid" alt="">
<div class="text p-4 d-flex align-items-center">
<div class="user d-flex align-items-center">
<div class="user-img mr-3" style="background-image: url(images/person_1.jpg);"></div>
<h3>John Bruce <br><span class="position">Designer</span></h3>
</div>
</div>
</a>
</div>
<div class="col-md-4">
<a href="#" class="featured-img">
<div class="text-1 p-4 d-flex align-items-center">
<h3>Zendesk<br><span class="tag">Website</span></h3>
</div>
<img src="images/image_4.jpg" class="img-fluid" alt="">
<div class="text p-4 d-flex align-items-center">
<div class="user d-flex align-items-center">
<div class="user-img mr-3" style="background-image: url(images/person_1.jpg);"></div>
<h3>John Bruce <br><span class="position">Designer</span></h3>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="col-md-12">
<div class="row no-gutters d-flex align-items-start">
<div class="col-md-8">
<a href="#" class="featured-img">
<div class="text-1 p-4 d-flex align-items-center">
<h3>Curator<br><span class="tag">Website</span></h3>
</div>
<img src="images/image_6.jpg" class="img-fluid" alt="">
<div class="text p-4 d-flex align-items-center">
<div class="user d-flex align-items-center">
<div class="user-img mr-3" style="background-image: url(images/person_1.jpg);"></div>
<h3>John Bruce <br><span class="position">Designer</span></h3>
</div>
</div>
</a>
</div>
<div class="col-md-4">
<a href="#" class="featured-img">
<div class="text-1 p-4 d-flex align-items-center">
<h3>Tasty<br><span class="tag">Website</span></h3>
</div>
<img src="images/image_3.jpg" class="img-fluid" alt="">
<div class="text p-4 d-flex align-items-center">
<div class="user d-flex align-items-center">
<div class="user-img mr-3" style="background-image: url(images/person_1.jpg);"></div>
<h3>John Bruce <br><span class="position">Designer</span></h3>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<a href="#" class="featured-img">
<div class="text-1 p-4 d-flex align-items-center">
<h3>Voyage<br><span class="tag">Website</span></h3>
</div>
<img src="images/image_2.jpg" class="img-fluid" alt="">
<div class="text p-4 d-flex align-items-center">
<div class="user d-flex align-items-center">
<div class="user-img mr-3" style="background-image: url(images/person_1.jpg);"></div>
<h3>John Bruce <br><span class="position">Designer</span></h3>
</div>
</div>
</a>
</div>
</div>
<div class="row mt-5 d-flex justify-content-center">
<div class="col-md-8 text-center heading-section ftco-animate">
<h2 class="h1">UI/UX, visual, <strong class="px-3">Web designer</strong> with more than 12 years of experience in designing websites and mobile apps.</h2>
<p><a href="#" class="btn btn-primary mt-3 py-3 px-5">Get in touch</a></p>
</div>
</div>
</div>
</section>
</div>
<section class="ftco-section">
<div class="container">
<div class="row justify-content-center mb-5 pb-5">
<div class="col-md-6 text-center heading-section ftco-animate">
<span class="subheading">Our Services</span>
<h2 class="mb-4">Web & Mobile app design, bring your ideas to life</h2>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in</p>
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-3 d-flex align-self-stretch ftco-animate">
<div class="media block-6 services d-block text-center">
<div class="d-flex justify-content-center"><div class="icon color-3 d-flex justify-content-center mb-3"><span class="align-self-center icon-lightbulb-o"></span></div></div>
<div class="media-body p-2 mt-3">
<h3 class="heading">Strategy</h3>
<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 d-flex align-self-stretch ftco-animate">
<div class="media block-6 services d-block text-center">
<div class="d-flex justify-content-center"><div class="icon color-1 d-flex justify-content-center mb-3"><span class="align-self-center icon-laptop"></span></div></div>
<div class="media-body p-2 mt-3">
<h3 class="heading">Design</h3>
<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 d-flex align-self-stretch ftco-animate">
<div class="media block-6 services d-block text-center">
<div class="d-flex justify-content-center"><div class="icon color-2 d-flex justify-content-center mb-3"><span class="align-self-center icon-gear"></span></div></div>
<div class="media-body p-2 mt-3">
<h3 class="heading">Development</h3>
<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 d-flex align-self-stretch ftco-animate">
<div class="media block-6 services d-block text-center">
<div class="d-flex justify-content-center"><div class="icon color-4 d-flex justify-content-center mb-3"><span class="align-self-center icon-live_help"></span></div></div>
<div class="media-body p-2 mt-3">
<h3 class="heading">Help & Supports</h3>
<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="ftco-section-parallax">
<div class="parallax-img d-flex align-items-center">
<div class="container">
<div class="row d-flex justify-content-center">
<div class="col-md-7 text-center heading-section heading-section-white ftco-animate">
<h2>Subcribe to our Newsletter</h2>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in</p>
<div class="row d-flex justify-content-center mt-5">
<div class="col-md-6">
<form action="#" class="subscribe-form">
<div class="form-group">
<span class="icon icon-paper-plane"></span>
<input type="text" class="form-control" placeholder="Enter email address">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
{{explorer}}
{{graf}}
</section>
<section class="ftco-section">
<div class="container">
<div class="row no-gutters justify-content-center mb-5 pb-5">
<div class="col-md-7 text-center heading-section ftco-animate">
<span class="subheading">Works</span>
<h2 class="mb-4">View our works below to see our design and way of development.</h2>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in</p>
</div>
</div>
<div class="row">
<div class="block-3 d-md-flex ftco-animate" data-scrollax-parent="true">
<a href="portfolio.html" class="image" style="background-image: url('images/work-1.jpg'); " data-scrollax=" properties: { translateY: '-20%'}">
</a>
<div class="text">
<h4 class="subheading">Illustration</h4>
<h2 class="heading"><a href="portfolio.html">Even the all-powerful Pointing has no control</a></h2>
<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
<p><a href="portfolio.html" class="btn btn-primary px-4">View Portfolio</a></p>
</div>
</div>
<div class="block-3 d-md-flex ftco-animate" data-scrollax-parent="true">
<a href="portfolio.html" class="image image-2 order-2" style="background-image: url('images/work-2.jpg');" data-scrollax=" properties: { translateY: '-20%'}"></a>
<div class="text order-1">
<h4 class="subheading">Application</h4>
<h2 class="heading"><a href="portfolio.html">Even the all-powerful Pointing has no control</a></h2>
<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
<p><a href="portfolio.html" class="btn btn-primary px-4">View Portfolio</a></p>
</div>
</div>
<div class="block-3 d-md-flex ftco-animate" data-scrollax-parent="true">
<a href="portfolio.html" class="image" style="background-image: url('images/work-3.jpg'); " data-scrollax=" properties: { translateY: '-20%'}"></a>
<div class="text">
<h4 class="subheading">Web Design</h4>
<h2 class="heading"><a href="portfolio.html">Even the all-powerful Pointing has no control</a></h2>
<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
<p><a href="portfolio.html" class="btn btn-primary px-4">View Portfolio</a></p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<span><a href="#" class="btn btn-primary py-3 px-5">View All Projects</a></span>
</div>
</div>
</div>
<footer class="ftco-footer ftco-bg-dark ftco-section">
<div class="container">
<div class="row mb-5">
<div class="col-md">
<div class="ftco-footer-widget mb-4">
<h2 class="ftco-heading-2">Snipp.</h2>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
</div>
</div>
<div class="col-md">
<div class="ftco-footer-widget mb-4 ml-5">
<h2 class="ftco-heading-2">Quick Links</h2>
<ul class="list-unstyled">
<li><a href="#" class="py-2 d-block">Home</a></li>
<li><a href="#" class="py-2 d-block">Case studies</a></li>
<li><a href="#" class="py-2 d-block">Services</a></li>
<li><a href="#" class="py-2 d-block">Portfolio</a></li>
<li><a href="#" class="py-2 d-block">About</a></li>
<li><a href="#" class="py-2 d-block">Contact</a></li>
</ul>
</div>
</div>
<div class="col-md">
<div class="ftco-footer-widget mb-4">
<h2 class="ftco-heading-2">Contact Information</h2>
<ul class="list-unstyled">
<li><a href="#" class="py-2 d-block">198 West 21th Street, Suite 721 New York NY 10016</a></li>
<li><a href="#" class="py-2 d-block">+ 1235 2355 98</a></li>
<li><a href="#" class="py-2 d-block">info@yoursite.com</a></li>
<li><a href="#" class="py-2 d-block">email@email.com</a></li>
</ul>
</div>
</div>
<div class="col-md">
<div class="ftco-footer-widget mb-4">
<ul class="ftco-footer-social list-unstyled float-md-left float-lft">
<li class="ftco-animate"><a href="#"><span class="icon-twitter"></span></a></li>
<li class="ftco-animate"><a href="#"><span class="icon-facebook"></span></a></li>
<li class="ftco-animate"><a href="#"><span class="icon-instagram"></span></a></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<p><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="icon-heart" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p>
</div>
</div>
</div>
</footer>
<!-- loader -->
<div id="ftco-loader" class="show fullscreen"><svg class="circular" width="48px" height="48px"><circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"/><circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#F96D00"/></svg></div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-migrate-3.0.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.stellar.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/aos.js"></script>
<script src="js/jquery.animateNumber.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script src="js/jquery.timepicker.min.js"></script>
<script src="js/particles.min.js"></script>
<script src="js/particle.js"></script>
<script src="js/scrollax.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false"></script>
<script src="js/google-map.js"></script>
<script src="js/main.js"></script>
</body>
</html>
The complete htmltemplate with css and js plugins is the following: template
