I have the following code which creates a flexdashboard:
---
title: "Untitled"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
runtime: shiny
---
```{r setup, include=FALSE}
library(flexdashboard)
And I want to insert some HTML and javascript code. I tried this
Column
-----------------------------------------------------------------------
### Block 1
```{r}
<p>"This is a paragraph"</p>
<script>
alert("This is an alert")
</script>
```
But it doesn't work. Please, could you help me with this question? Thank you.
You can directly type the HTML code, without chunk. You can also use the tags function of the 'htmltools' package in a chunk (or the Shiny UI functions). For JavaScript, use a js chunk.
---
title: "TEST"
output:
flexdashboard::flex_dashboard:
orientation: rows
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```
```{r packages, include=FALSE}
library(flexdashboard)
library(htmltools)
```
Page
====================================
Row
-----------------------------
### HTML and JavaScript
<button id="btn">Click me</button>
```{js, echo=FALSE}
$("#btn").on("click", function() {
alert("You clicked the button!")
})
```
### HTML using 'htmltools'
```{r, echo=FALSE}
tags$button("Another button")
```
Related
I am trying to create a static html document with RMarkdown that contains a bunch of tables and graphs. A problem I am running into right now is that the legend doesn't load correctly unless it is on the landing page. I render my graphs using the billboarder package. I added an example:
Here's a reproducible example:
---
title: "Untitled"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
```{r setup, include=FALSE}
library(flexdashboard)
library(billboarder)
library(data.table)
```
Column {.tabset}
-----------------------------------------------------------------------
### Dummy tab
### Chart A
```{r}
billboarder() %>%
bb_linechart(melt(data.table(rock, keep.rownames = TRUE)[, area := as.numeric(area)], id.vars = "rn", measure.vars = c("area", "peri")), bbaes(rn, value, variable))
```
I've created two Rmarkdown pages that are linked together. I'd like to know if there is a way to code that the links direct to a specific spot on each page.
---
title: "Page 1"
author: "--"
date: "22 9 2020"
output: html_document
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```
### Header
example text.
#### example plot 1.
```{r cars}
plot(cars)
```
more example text
#### example plot 2.
```{r pressure, echo=FALSE}
plot(pressure)
```
link to [Page 2](./Page-2.html)
And Page 2:
---
title: "Page 2"
author: "--"
date: "22 9 2020"
output: html_document
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```
### Header
example text.
#### example plot 1.
```{r cars}
plot(cars)
```
more example text
#### example plot 2.
```{r pressure, echo=FALSE}
plot(pressure)
```
[Page 1](./Page-1.html)
For example, I'd like the page 2 link to redirect straight to the second graph. Moreso, when clicking back to page 1 - is there a way for it to save the spot I was currently looking at?
Thanks.
This feature is not provided for HTML output of rmarkdown/knitr. However, you can easily implement this using javaScript (jquery):
The idea is to include a small script that saves the last scroll position in a variable (I've called it ScrPos below) in local memory and restores the scroll position when the page is (re)loaded.
header.html
<script type="text/javascript">
// check if ScrPos is available. If so, scroll to ScrPos
$(function() {
if (localStorage.ScrPos) {
$(window).scrollTop(localStorage.ScrPos);
}
});
// save last scroll position to ScrPos before page unload
$(window).on("beforeunload", function() {
var ScrPos = $(window).scrollTop();
localStorage.setItem("ScrPos", ScrPos);
});
</script>
You may include header.html in the YAML header (of both) .rmd files like this:
output:
html_document:
include:
in_header: header.html
Note that header.html needs to be in the same directory as the .Rmd.
for the linking to the second graph part it can be easily achieved by using the div id that's used for the second graph, either by explicitly assigning it or by using transforming the spaced section title to a dash separated one `example plot 2.` => id = `example-plot-2.` i.e:
New code for page 2
#### example plot 2.{#second_graph}
```{r pressure, echo=FALSE}
plot(pressure)
```
[Page 1](./Page-1.html)
and then in page one simply add the id to the link i.e:
link to [pressure graph](./Page-2.html#second_graph)
bsplus::bs_modal() creates a modal dialog popup, and works within a column, but not a sidebar.
Any ideas on how to make (1) work?
For reference, the bs_modal() source is here, and flexdashboard.js is here.
(1) This works:
---
title: "Untitled"
output: flexdashboard::flex_dashboard
---
```{r setup, include=FALSE}
library(flexdashboard)
library(shiny)
library(bsplus)
```
Sidebar {.sidebar}
-------------------------------------
```{r}
```
Column {data-width=650}
-----------------------------------------------------------------------
### Chart A
```{r}
bs_modal(id = "modal", title = "I'm a modal", body = "Yes, I am.")
bs_button("Click for modal") %>%
bs_attach_modal(id_modal = "modal")
```
(2) This doesn't work:
---
title: "Untitled"
output: flexdashboard::flex_dashboard
---
```{r setup, include=FALSE}
library(flexdashboard)
library(shiny)
library(bsplus)
```
Sidebar {.sidebar}
-------------------------------------
```{r}
bs_modal(id = "modal", title = "I'm a modal", body = "Yes, I am.")
bs_button("Click for modal") %>%
bs_attach_modal(id_modal = "modal")
```
Column {data-width=650}
-----------------------------------------------------------------------
### Chart A
```{r}
```
I'm trying to create active links in an RMarkdown document. In the code below, the basic kable table is perfect, but the datatable version turns the links into text
---
title: "Example"
output: html_document
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
library(knitr)
library(DT)
example.df <- data.frame("link"=c("[Tokyo](https://en.wikipedia.org/wiki/Tokyo)","[Paris](https://en.wikipedia.org/wiki/Paris)"), "country"=c("Japan","France"))
kable(example.df)
datatable(example.df)
Whoops, here's the answer: format the links as raw HTML not as RMarkdown syntax http://blogs.oregonstate.edu/cgrb/2019/08/06/r-tips-a-table-makeover-with-dt/
There are 2 changes needed to it to work with datatable.
Format the links as raw HTML, not Markdown
Include relevant escape arguments as to NOT escape the link column. For simplicity in this example, we use escape=FALSE
Here is a full reprex answer.
---
title: "Example"
output: html_document
---
```{r setup, include=TRUE}
knitr::opts_chunk$set(echo = TRUE)
library(knitr)
library(DT)
example.df.kable <- data.frame("link"=c("[Tokyo](https://en.wikipedia.org/wiki/Tokyo)","[Paris](https://en.wikipedia.org/wiki/Paris)"), "country"=c("Japan","France"))
example.df.datatable <- data.frame("link"=c(
'Tokyo',
'Paris'),
"country"=c("Japan","France"))
kable(example.df.kable)
datatable(example.df.kable) # This does NOT show the links
datatable(example.df.datatable) # This does NOT show the links
datatable(example.df.datatable, escape=FALSE) # This does show the links
I produce interactive plots with plotly, and save them as html pages. I'm new to ioslides and Rmarkdown, so I searched through the internet, and found no solution. I want to include a plotly graph with .html extension to my slide. So I tried:
---
title: "Advanced Physics Project"
author: "mcandar"
output:
ioslides_presentation:
widescreen: true
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)
```
## Introduction
and it does not work. What I want is a slide with my html graph embedded inside and its interactive features should work properly. Is it possible?
Option 1: Use an iframe:
---
title: "Advanced Physics Project"
author: "mcandar"
output:
ioslides_presentation:
widescreen: true
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)
```
<iframe src="myfile.html"></iframe>
Option 2: includeHTML
```{r}
shiny::includeHTML("myfile.html")
```