Problem with Gantt chart plotting in shiny with DiagrammeR

Question

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.

Answer 1

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)