Shiny rcharts multiple chart output

Question

How can I overwrite the output display options with running multiple charts with shiny and rchart so the output result is a 2x2 matrix type grid layout.

require(rCharts)
require(shiny)
require(data.table)
runApp(list(
  ui = mainPanel( span="span6", 
    showOutput("chart2", "Highcharts"),
    showOutput("chart3", "Highcharts"),
    showOutput("chart4", "Highcharts")
    ),
  server = function(input, output){
      output$chart3 <- renderChart({
      a <- hPlot(Pulse ~ Height, data = MASS::survey, type = "bubble", title = "Zoom demo", subtitle = "bubble chart", size = "Age", group = "Exer")
      a$chart(zoomType = "xy")
      a$chart(backgroundColor = NULL)
      a$set(dom = 'chart3')
      return(a)
    })
    output$chart2 <- renderChart({
      survey <- as.data.table(MASS::survey)
      freq <- survey[ , .N, by = c('Sex', 'Smoke')]
      a <- hPlot(x = 'Smoke', y = 'N', data = freq, type = 'column', group = 'Sex')
      a$chart(backgroundColor = NULL)
      a$set(dom = 'chart2')
      return(a)
    })
    output$chart4 <- renderChart({
      survey <- as.data.table(MASS::survey)
      freq <- survey[ , .N, by = c('Smoke')]
      a <- hPlot(x = "Smoke", y = "N", data = freq, type = "pie")
      a$plotOptions(pie = list(size = 150))
      a$chart(backgroundColor = NULL)
      a$set(dom = 'chart4')
      return(a)
    })
  }
))

score 6 · Accepted Answer · edited May 09 '14 at 08:02

Change ui to:

ui = bootstrapPage(mainPanel( 
      div(class = "row",
        div(showOutput("chart2", "Highcharts"), class = "span4"),
        div(showOutput("chart3", "Highcharts"), class = "span4")
      ),
      div(class = "row",
        div(showOutput("chart4", "Highcharts"), class = "span4")
      )
    ))

Add bootstrapPage to tell shiny to use the bootstrap library. Look at http://getbootstrap.com/2.3.2/scaffolding.html to get an idea of "scaffolding". mainPanel has a width option which defaults to 8. This is span8 in bootstrap. The above code is not ideal but hopefully its a start.

EDIT: For full screen

ui = bootstrapPage(mainPanel(width = 12,  
      div(class = "row",
        div(showOutput("chart2", "Highcharts"), class = "span6"),
        div(showOutput("chart3", "Highcharts"), class = "span6")
      ),
      div(class = "row",
        div(showOutput("chart4", "Highcharts"), class = "span6")
      )
    ))

note that mainPanel(..., width = width) is just a convenience function for div with a span of width.

A screenshot of the result:

enter image description here

thanks for that, really helpful. On the Shiny side of things, does mainPanel alone extend to the full screen? Or do you have to use something like sidePanel but alter the span to something like span6 for sidePanel and MainPanel? — digdeep, Feb 20 '14 at 01:17
`mainPanel` is basically just setting up a `div` with an option `width` which sets the span. If you change mainPanel adding the option `width = 12` and change the class on the inner divs to `span6` you should get what you want. — jdharrison, Feb 20 '14 at 01:37
@jdharrison, with your permission added a screenshot of the result, nice! — PatrickT, May 09 '14 at 08:02

score 1 · Answer 2 · answered Dec 15 '15 at 04:47

Another solution that is native to R Shiny (without the outside knowledge of HTML), is to use the ideas of columns.

ui = mainPanel(fluidPage(
    fluidRow(
      column(width=6, 
             showOutput("chart2", "Highcharts"),
             showOutput("chart3", "Highcharts")
    ),
    fluidRow(
      column(width=6, 
             showOutput("chart4", "Highcharts") 
        )
      )
    )
  )),

Shiny rcharts multiple chart output

2 Answers2

Linked