I have a problem displaying Gantt plots in Shiny using DiagrammeR's mermaid plotting function.
Everything is executing as expected however the plots are displayed in the R studio's viewer not on the shiny page (which has a tabPanel for the plot to be displayed). I have seen this asked/solved using ggVis .. however the solution in that instance is specific to ggVis. I would like to stay with DiagrammeR/mermaid because it produces such good looking plots.
An minimal executable example is attached :-)
library(shiny)
library(lubridate)
library(DiagrammeR)
# --- Input datafile
AllData <- data.frame(Project = c("Phoenix", "Phoenix", "Phoenix"),
task = c("Establish plan", "Build management tool", "Get funding"),
status = c("done", "active", "crit, active"),
pos = c("first_1", "first_2", "import_1"),
start = c("2018-12-01", "2019-01-21", "2019-02-01"),
end = c("12w 6d", "4w", "8w 1d"),
stringsAsFactors = FALSE)
# Define UI for application
ui <- fluidPage(
titlePanel("XXX Project Management Tool"),
sidebarLayout(
sidebarPanel( # --- setup LHS data input frames ---
selectInput("Proj", "Project",
c(unique(as.character(AllData$Project)))),
selectInput("Stg", "Stage",
c("All", unique(as.character(AllData$name)))),
width = 3),
mainPanel(
tabsetPanel(type = "tabs",
tabPanel("Gantt Chart", plotOutput("plot")),
tabPanel("Data Table", tableOutput("table"))))
)
)
server <- function(input, output) {
# --- filter the selected project into a reactive function (access later using () suffix) ---
SelectedProject <- reactive({dplyr::filter(AllData, Project == input$Proj)})
output$plot <- renderPlot({
mermaid(
paste0(
"gantt", "\n",
"dateFormat YYYY-MM-DD", "\n",
"title Gantt Chart - Project ", input$Proj, "\n",
# --- unite the first two columns (task & status) and separate them with ":" ---
# --- then, unite the other columns and separate them with "," ---
paste(SelectedProject() %>%
unite(i, task, status, sep = ":") %>%
unite(j, i, pos, start, end, sep = ",") %>%
.$j,
collapse = "\n"
), "\n"
)
)
})
output$table <- renderTable({SelectedProject()})
}
# --- run application ---
shinyApp(ui = ui, server = server)
The plot ends up displayed in the viewer - however the other tabPanel displays the tabulated data as expected.
You need to use DiagrammeROutput() instead of plotOutput() and renderDiagrammeR() instead of renderPlot():
library(shiny)
library(lubridate)
library(DiagrammeR)
library(tidyr)
# --- Input datafile
AllData <- data.frame(Project = c("Phoenix", "Phoenix", "Phoenix"),
task = c("Establish plan", "Build management tool", "Get funding"),
status = c("done", "active", "crit, active"),
pos = c("first_1", "first_2", "import_1"),
start = c("2018-12-01", "2019-01-21", "2019-02-01"),
end = c("12w 6d", "4w", "8w 1d"),
stringsAsFactors = FALSE)
# Define UI for application
ui <- fluidPage(
titlePanel("XXX Project Management Tool"),
sidebarLayout(
sidebarPanel( # --- setup LHS data input frames ---
selectInput("Proj", "Project",
c(unique(as.character(AllData$Project)))),
selectInput("Stg", "Stage",
c("All", unique(as.character(AllData$name)))),
width = 3),
mainPanel(
tabsetPanel(type = "tabs",
tabPanel("Gantt Chart", DiagrammeROutput("plot")),
tabPanel("Data Table", tableOutput("table"))))
)
)
server <- function(input, output) {
# --- filter the selected project into a reactive function (access later using () suffix) ---
SelectedProject <- reactive({dplyr::filter(AllData, Project == input$Proj)})
output$plot <- renderDiagrammeR({
mermaid(
paste0(
"gantt", "\n",
"dateFormat YYYY-MM-DD", "\n",
"title Gantt Chart - Project ", input$Proj, "\n",
# --- unite the first two columns (task & status) and separate them with ":" ---
# --- then, unite the other columns and separate them with "," ---
paste(SelectedProject() %>%
unite(i, task, status, sep = ":") %>%
unite(j, i, pos, start, end, sep = ",") %>%
.$j,
collapse = "\n"
), "\n"
)
)
})
output$table <- renderTable({SelectedProject()})
}
# --- run application ---
shinyApp(ui = ui, server = server)