Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 6 additions & 7 deletions index.Rmd
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ To author a flexdashboard you create an [R Markdown](http://rmarkdown.rstudio.co

<img src="images/NewRMarkdown.png" width="579" height="465"/>

If you are not using RStudio you can create a new `flexdashboard` R Markdown file from the command line as follows:
If you are not using RStudio, you can create a new `flexdashboard` R Markdown file from the R console:

```r
rmarkdown::draft("dashboard.Rmd", template = "flex_dashboard", package = "flexdashboard")
Expand All @@ -40,13 +40,13 @@ rmarkdown::draft("dashboard.Rmd", template = "flex_dashboard", package = "flexda

You can use flexdashboard to publish groups of related data visualizations as a dashboard. A flexdashboard can either be static (a standard web page) or dynamic (a [Shiny](shiny.html) interactive document).

One of the most important characteristics of flexdashboard is the automatic scaling of charts to fit available browser width and (optionally) browser height. This makes flexdashboard ideal for publishing [htmlwidgets](http://www.htmlwidgets.org) since these widgets automatically re-size themselves to their containers.
One of the most important characteristics of flexdashboard is the automatic scaling of charts to fit available browser width and (optionally) browser height. This makes flexdashboard ideal for publishing [htmlwidgets](http://www.htmlwidgets.org) since these widgets automatically re-size themselves to their containers.

You can also use flexdashboard to publish base, lattice, and ggplot2 graphics. These charts are also automatically resized to fit their containers within dynamic (Shiny) dashboards, however in static dashboards a bit more work (described in [Figure Sizes and Scaling](using.html#figure-sizes-and-scaling)) is required to ensure that they are properly scaled.
You can also use flexdashboard to publish base, lattice, and ggplot2 graphics. These charts are also automatically resized to fit their containers within dynamic (Shiny) dashboards; in static dashboards, however, a bit more work is required to ensure that they are properly scaled (see [Figure Sizes and Scaling](using.html#figure-sizes-and-scaling)).

### Single Column Layout

Dashboards are divided into columns and rows, where by default columns are defined using level 2 markdown headers (`------------------`) and charts are defined using level 3 headers (`###`). Charts are stacked vertically within a column. For example, this layout defines a single column with three charts:
Dashboards are divided into columns and rows. By default, columns are defined using level 2 markdown headers (`------------------`) and charts are defined using level 3 headers (`###`). Charts are stacked vertically within a column. For example, this layout defines a single column with three charts:

<div class="row">

Expand Down Expand Up @@ -92,13 +92,12 @@ To add a second column of charts we just add another column section:
</div>


In this example we've moved **Chart 1** into it's own column which it will fill entirely. Since we only have 1 or 2 charts vertically stacked, we also specify the `fill_page: true` option to automatically scale the charts to the full height of the page. Finally, we want to provide additional emphasis to the chart appearing in the first column so we give the column a larger size via the `data-width` attribute.
In this example we've moved **Chart 1** into its own column which it will fill entirely. Since we only have one or two charts vertically stacked, we've also specified the `fill_page: true` option to automatically scale the charts to the full height of the page. Finally, we've given the column a larger size via the `data-width` attribute to provide additional emphasis to Chart 1.

## Learning More

The [Using](using.html) page includes documentation on all of the features and options of flexdashboard, including layout orientations (row vs. column based), chart sizing, text annotations, theming, and creating dashboards with multiple pages.

The [Shiny](shiny.html) page describes how to create dashboards that enable viewers to change underlying parameters and see the results immediately.
The [Shiny](shiny.html) page describes how to create dashboards that automatically update themselves as the underlying data changes, or allow viewers to change parameters and see the results immediately.

The [Layouts](layouts.html) page includes a variety of sample layouts which you can use as a starting point for your own dashboards.

15 changes: 4 additions & 11 deletions layouts.Rmd
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@ This page includes a variety of sample layouts which you can use as a starting p

When creating a layout, it's important to decide up front whether you want your charts to fill the web page vertically (changing in height as the browser changes) or if you want the charts to maintain their original height (with the page scrolling as necessary to display all of the charts).

This behavior is controlled via the `fill_page` output option, which defaults to `false`. Filling the page is generally a good choice when you have only 1 or 2 charts vertically stacked, whereas scrolling is generally a better choice for 3 or more charts vertically stacked. The sample layouts below reflect these general guidelines.
This behavior is controlled via the `fill_page` output option, which defaults to `false`. Filling the page is generally a good choice when you have only one or two charts vertically stacked, whereas scrolling is generally a better choice for three or more charts vertically stacked. The sample layouts below reflect these general guidelines.

## Layouts

### Chart Stack (Fill)

This layout is a simple stack of two charts. Since there are only 2 charts the need to scroll is unlikely, so `fill_page: true` is specified so they grow to fill the page vertically. Note that one chart or the other could be made vertically taller by specifying the `data-height` attribute.
This layout is a simple stack of two charts. Since there are only two charts the need to scroll is unlikely, so `fill_page: true` is specified so they grow to fill the page vertically. Note that one chart or the other could be made vertically taller by specifying the `data-height` attribute.

<div class="row">

Expand All @@ -34,7 +34,7 @@ This layout is a simple stack of two charts. Since there are only 2 charts the n

### Chart Stack (Scrolling)

This layout is a simple stack of 3 charts. To provide enough room to display all the charts a scrolling layout is used (`fill_page: false`). Note that because of its ability to scroll this layout could easily accommodate many more charts (although for large numbers of charts you might consider organizing them into [Multiple Pages]).
This layout is a simple stack of three charts. To provide enough room to display all the charts a scrolling layout is used (`fill_page: false`). Note that because of its ability to scroll this layout could easily accommodate many more charts (although for large numbers of charts you might consider organizing them into [Multiple Pages]).

<div class="row">

Expand Down Expand Up @@ -141,14 +141,7 @@ This layout is a 2x2 grid of charts that uses `fill_page: true`. Note that depen

### Multiple Pages

This layout defines multiple pages using a level 1 markdown header (`==================`). Each page has it's own top-level navigation tab. Further, the second page uses a distinct orientation via the `data-orientation` attribute.
This layout defines multiple pages using a level 1 markdown header (`==================`). Each page has its own top-level navigation tab. Further, the second page uses a distinct orientation via the `data-orientation` attribute.

<div id="multiplepages-layout"></div>
<script type="text/javascript">loadSnippet('multiplepages-layout')</script>







18 changes: 9 additions & 9 deletions shiny.Rmd
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
title: "Using Shiny with flexdashboard"
output:
output:
html_document:
toc: true
toc_depth: 2
---

## Overview

By adding [Shiny](http://shiny.rstudio.com) to a flexdashboard, you can create dashboards that enable viewers to change underlying parameters and see the results immediately. This is done by adding `runtime: shiny` to a standard flexdashboard and then adding one or more input controls that dynamically drive the appearance of the charts within the dashboard.
By adding [Shiny](http://shiny.rstudio.com) to a flexdashboard, you can create dashboards that enable viewers to change underlying parameters and see the results immediately, or that update themselves incrementally as their underlying data changes (see [`reactiveFileReader`](http://shiny.rstudio.com/reference/shiny/latest/reactiveFileReader.html) and [`reactivePoll`](http://shiny.rstudio.com/reference/shiny/latest/reactivePoll.html)). This is done by adding `runtime: shiny` to a standard flexdashboard and then adding one or more input controls and/or reactive expressions that dynamically drive the appearance of the charts within the dashboard.

Using Shiny with flexdashboard turns a static R Markdown report into an [Interative Document](http://rmarkdown.rstudio.com/authoring_shiny.html). It's important to note that interactive documents need to be [deployed](http://rmarkdown.rstudio.com/authoring_shiny.html#deployment) to a Shiny Server to be shared broadly (whereas static R Markdown documents are standalone web pages that can be attached to emails or served from any standard web server).

Expand All @@ -18,11 +18,11 @@ The steps required to add Shiny components to a flexdashboard are as follows:

1. Add `runtime: shiny` to the options declared at the top of the document (YAML front matter).

2. Add the `{.sidebar}` attribute to the first column of the dashboard to make it a host for Shiny input controls (note this step isn't strictly required but nearly all Shiny based dashboards will want to do this).
2. Add the `{.sidebar}` attribute to the first column of the dashboard to make it a host for Shiny input controls (note this step isn't strictly required, but most Shiny based dashboards will want to do this).

3. Add Shiny inputs and output as appropriate.
3. Add Shiny inputs and output as appropriate.

A simple example of a Shiny based flexdashboard is provided below.
A simple example of a Shiny based flexdashboard is provided below.

## Simple Example

Expand All @@ -39,11 +39,11 @@ Here's the source code for the example. Note that since we have only a single ch

The first column ("Inputs") includes the `{.sidebar}` attribute and the Shiny input controls; the second column ("Outputs") includes the Shiny code required to render the chart based on the inputs.

## Input Sidebar
## Input Sidebar

The `{.sidebar}` attribute is a special designator indicating that a column should be laid out flush to the left with a fixed width of 250 pixels and a special background color. Sidebars are not required for flexdashboards using `runtime: shiny` however they are often useful for presenting inputs.
The `{.sidebar}` attribute is a special designator indicating that a column should be laid out flush to the left with a fixed width of 250 pixels and a special background color. Sidebars are not required for flexdashboards using `runtime: shiny`, but they are often useful for presenting inputs.

Sidebars always appear on the left no matter where they are defined within the flow of the document. You alter the default width of the sidebar using the `data-width` attribute. For example:
Sidebars always appear on the left no matter where they are defined within the flow of the document. You can alter the default width of the sidebar using the `data-width` attribute. For example:

<div id="sidebarwidth"></div>
<script type="text/javascript">loadSnippet('sidebarwidth')</script>
Expand All @@ -61,7 +61,7 @@ The [shinydashboard](https://rstudio.github.io/shinydashboard/) package also pro

4. flexdashboard performs automatic scaling of charts to the size of the browser and as a result takes maximum advantage of available screen real estate when used with htmlwidgets (i.e. visualizations that automatically size themselves to their container).

3. flexdashboard can create standalone web dashboards (requiring no Shiny Server) if they are restricted to just presenting data rather than allowing the user to vary assumptions and parameters.
3. flexdashboard can create standalone web dashboards (requiring no Shiny Server) if they are restricted to just presenting static data rather than allowing the user to vary assumptions and parameters or observing changes in realtime.

## Learning More

Expand Down
18 changes: 9 additions & 9 deletions snippets/textannotation.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
title: "Text Annotations"
output:
output:
flexdashboard::flex_dashboard:
fill_page: true
orientation: rows
---

Monthly deaths from bronchitis, emphysema and asthma in the UK, 1974–1979.

```{r setup, include=FALSE}
library(dygraphs)
```
Expand All @@ -16,28 +16,28 @@ Row {data-height=600}
-------------------------------------

### All Lung Deaths

```{r}
dygraph(ldeaths)
```

Source: P. J. Diggle (1990) Time Series: A Biostatistical Introduction. Oxford, table A.3
Row {data-height: 400}

Row {data-height=400}
-------------------------------------

### Male Deaths

```{r}
dygraph(mdeaths)
```

Note: Includes only male deaths

### Female Deaths

```{r}
dygraph(mdeaths)
```

Note: Includes only female deaths
Loading