Integration among Shiny Flexdashboard and shinyAmBarCharts

Question

I'm trying to insert a shinyAmBarCharts chart within a flexdashboard with Shiny runtime. The final goal would be to use the modifiable chart as an input to other charts/models. So far I've been unsuccessful, because the amBarChart does not render in the dashboard. This is a sample code:

---
title: "shinyAmBarCharts"
output: 
  flexdashboard::flex_dashboard:
  orientation: columns
  vertical_layout: fill
 runtime: shiny
---

 ```{r setup, include=FALSE}

 library(flexdashboard)
 library(shiny)
 library(shinyAmBarCharts)
 library(tidyr)


set.seed(666)
df0 <- data.frame(
species = rep(c("sorgho","poacee","banana","triticum"), each = 3),
condition = rep(c("normal", "stress", "Nitrogen"), 4),
 value = rpois(12, 10)
 )
df1 <- spread(df0, condition, value)


output[["data"]] <- renderPrint({
input[["mygroupedbarchart"]]
 })

 output[["change"]] <- renderPrint({ input[["mygroupedbarchart_change"]] })

```

Column {data-width=650}
-----------------------------------------------------------------------

### Chart A

 ```{r}
 fluidPage(

       amBarChart(
         "mygroupedbarchart", data = df1, height = "400px",
         category = "species", value = c("normal", "stress", "Nitrogen"),
         valueNames = c("Normal", "Stress", "Nitrogen"),
         minValue = 0, maxValue = 20,
         draggable = c(FALSE, FALSE, TRUE),
         theme = "dark", backgroundColor = "#30303d",
         columnStyle = list(fill = c("darkmagenta", "darkred", "gold"),
                            stroke = "#cccccc", 
                            cornerRadius = 4),
         chartTitle = list(text = "Grouped bar chart", 
                           fontSize = 23, 
                           color = "firebrick"),
         xAxis = list(title = list(text = "Species", 
                                   fontSize = 21, 
                                   color = "silver"),
                      labels = list(color = "whitesmoke", 
                                    fontSize = 17)),
         yAxis = list(title = list(text = "Value", 
                                   fontSize = 21, 
                                   color = "silver"),
                      labels = list(color = "whitesmoke", 
                                    fontSize = 14)),
         columnWidth = 90,
         caption = list(text = "[font-style:italic]shinyAmBarCharts[/]", 
                        color = "yellow"),
         gridLines = list(color = "whitesmoke", 
                          opacity = 0.4, 
                          width = 1),
         tooltip = list(text = "[bold;font-style:italic]{name}: {valueY}[/]", 
                        labelColor = "#101010", 
                        backgroundColor = "cyan", 
                        backgroundOpacity = 0.7)
       )
       )
```

 Column {data-width=350}
  -----------------------------------------------------------------------

 ### Chart B

 ```{r}

        verbatimTextOutput("data")


  ```

 ### Chart C

 ```{r}
       verbatimTextOutput("change")

 ```

that I have basically copied from these places:

I' ve tried the inline shiny-app solution from the flexdashboard web page (https://rmarkdown.rstudio.com/flexdashboard/shiny.html#inline_applications), but in this case I do not know how to re-use the changes made to the chart as an input to other part of the flexdashboard.

Any help would be much appreciated.

Stéphane Laurent · Answer 1 · 2020-07-31T03:10:02.643

I started to do a new package, rAmCharts4, which allow to generate HTML widgets displaying some charts produced by version 4 of the amcharts JavaScript library. Currently only two types of chart are available: the vertical bar chart and the horizontal bar chart. More types of chart will be available in the future. The charts can be displayed in Shiny, and the integration in Flexdashboard works:

---
title: "rAmCharts4"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
runtime: shiny
---

```{r setup, include=FALSE}
library(flexdashboard)
library(shiny)
library(rAmCharts4)
library(tidyr)

set.seed(666)
df0 <- data.frame(
  species = rep(c("sorgho","poacee","banana","triticum"), each = 3),
  condition = rep(c("normal", "stress", "Nitrogen"), 4),
  value = rpois(12, 10)
)
df1 <- spread(df0, condition, value)

output[["mygroupedbarchart"]] <- renderAmChart4({
  amBarChart(
    height = "400px",
    data = df1, 
    category = "species", values = c("normal", "stress", "Nitrogen"),
    valueNames = list(normal = "Normal", stress = "Stress", Nitrogen = "Nitrogen"),
    minValue = 0, maxValue = 20,
    draggable = list(normal = TRUE, stress = FALSE, Nitrogen = TRUE),
    theme = "dark", backgroundColor = "#30303d",
    columnStyle = list(
      fill = list(
        normal = "darkmagenta", stress = "darkred", Nitrogen = "gold"
      ),
      stroke = "#cccccc", 
      cornerRadius = 4),
    chartTitle = list(text = "Grouped bar chart", 
                      fontSize = 23, 
                      color = "firebrick"),
    xAxis = list(title = list(text = "Species", 
                              fontSize = 21, 
                              color = "silver"),
                 labels = list(color = "whitesmoke", 
                               fontSize = 17)),
    yAxis = list(title = list(text = "Value", 
                              fontSize = 21, 
                              color = "silver"),
                 labels = list(color = "whitesmoke", 
                               fontSize = 14)),
    columnWidth = 90,
    caption = list(text = "[font-style:italic]rAmCharts4[/]", 
                   color = "yellow"),
    gridLines = list(color = "whitesmoke", 
                     opacity = 0.4, 
                     width = 1),
    tooltip = amTooltip(
      text = "[bold font-style:italic]{name}: {valueY}[/]",
      textColor = "#101010",
      backgroundColor = "cyan",
      backgroundOpacity = 0.7
    )
  )
})

output[["data"]] <- renderPrint({
  input[["mygroupedbarchart"]]
})

output[["change"]] <- renderPrint({
  input[["mygroupedbarchart_change"]]
})
```

Column {data-width=650}
-----------------------------------------------------------------------

### Chart A

```{r}
fluidPage(
  
  amChart4Output("mygroupedbarchart", width = "100%", height = "100%")

)
```

Column {data-width=350}
-----------------------------------------------------------------------

### Chart B

```{r}
verbatimTextOutput("data")
```

### Chart C

```{r}
verbatimTextOutput("change")
```

Installation: devtools::install_github("stla/rAmCharts4")

Update

The above code is not valid anymore. Please see the package documentation. There are now five available types of chart.

Integration among Shiny Flexdashboard and shinyAmBarCharts

1 Answers1

Update

Linked