How do I display a diagram created with rcharts within my R shiny app?

Situation:

I have a sankey diagram based on rcharts that I want to display in my shiny app (see code below).

Problem:

When I call my shiny app, the sankey diagram is not shown within the shiny app itself but rather in a different tab window of the browser. The tab's address is file:///C:/Users/Me/AppData/Local/Temp/RtmpcxIBRn/rCharts159410f110f8/index.html

Question:

How do I change my code so that the sankey diagram is opened within the shiny app itself rather than within a different browser tab?

Code:

library(shiny)
library(ggplot2)
library(networkD3)
library(rCharts)
library(igraph)

 shinyApp(

    ui = fluidPage(
     fluidRow(
        column(12,
         "Look at this Sankey-Plot:"
        )
      ),
      fluidRow(
        column(12,
         plotOutput('SankeyPl')
        )
      )
    ),

   server = function(input, output) {

  g <- graph.tree(40, children = 4)

  E(g)$weight = 1
  edgelist <- get.data.frame(g) #this will give us a data frame with from,to,weight
  colnames(edgelist) <- c("source","target","value")
  #make character rather than numeric for proper functioning
  edgelist$source <- as.character(edgelist$source)
  edgelist$target <- as.character(edgelist$target)
  sankeyPlot <- rCharts$new()
  sankeyPlot$setLib('http://timelyportfolio.github.io/rCharts_d3_sankey')
  sankeyPlot$setTemplate(script = "http://timelyportfolio.github.io/rCharts_d3_sankey/layouts/chart.html")
  sankeyPlot$set(
    data = edgelist,
    nodeWidth = 15,
    nodePadding = 10,
    layout = 32,
    width = 960,
    height = 500
  )

  output$SankeyPl=renderPlot({sankeyPlot})

    }
  )


shinyApp(ui, server)

Solution

You need to download these files and place the directory d3_sankey in the same directory as your app, such that the second argument in showOutput('SankeyPl', 'd3_sankey') is referring to the d3_sankey directory. E.g.

$ git clone https://github.com/timelyportfolio/rCharts_d3_sankey.git
$ mv rCharts_d3_sankey/libraries/widgets/d3_sankey/ <to where your shiny app is>

Your app directory should now look like this:

appdir/
├── app.R
└── d3_sankey

Once you have done that, the following code should work:

library(shiny)
library(ggplot2)
library(networkD3)
library(rCharts)
library(igraph)

shinyApp(

  ui <- fluidPage(
    fluidRow(
      column(12,
             "Look at this Sankey-Plot:"
      )
    ),
    fluidRow(
      column(12,
             showOutput('SankeyPl', 'd3_sankey')
      )
    )
  ),

  server <- function(input, output) {

    g <- graph.tree(40, children = 4)

    E(g)$weight = 1
    edgelist <- get.data.frame(g) #this will give us a data frame with from,to,weight
    colnames(edgelist) <- c("source","target","value")
    #make character rather than numeric for proper functioning
    edgelist$source <- as.character(edgelist$source)
    edgelist$target <- as.character(edgelist$target)
    sankeyPlot <- rCharts$new()
    # sankeyPlot$setLib('http://timelyportfolio.github.io/rCharts_d3_sankey')
    sankeyPlot$setLib('http://timelyportfolio.github.io/rCharts_d3_sankey/libraries/widgets/d3_sankey')
    # sankeyPlot$setTemplate(script = "http://timelyportfolio.github.io/rCharts_d3_sankey/layouts/chart.html")
    sankeyPlot$set(
      data = edgelist,
      nodeWidth = 15,
      nodePadding = 10,
      layout = 32,
      width = 960,
      height = 500
    )

    output$SankeyPl <- renderChart2({
      sankeyPlot
    })

  }
)

The two major changes are the use of showOutput on the ui and renderChart2 on the server.