How to display two gvis gauge meters side by side using Shiny R

Question

I am working on shiny app where in I'm trying to display the baseline and model accuracy using gvisGauge.

I have been successful in displaying them in separate tabpanels and also in the same tabpanel one below the other.

But I want to show them side by side i.e in horizontal alignment in the same tab. How can I achieve this? Tried searching for options, but couldn't get any.

As of now, my sample code is as below

ui.R

library(shiny)
library(googleVis)

shinyUI(fluidPage(
  titlePanel('Guage'),
  sidebarLayout(
    sidebarPanel(
      numericInput('n1', 'Enter your Base Accuracy', 40, 0.5, 100),


      numericInput('n2', 'Enter your Model Accuracy', 40, 0.5, 100)
    ),
    mainPanel(
      tabsetPanel(
      tabPanel("Accuracy Guage",htmlOutput("view1"),htmlOutput("view2"))
    )
  )
)))

server.R

library(shiny)
library(googleVis)

shinyServer(function(input, output) {

  output$view1 <- renderGvis({
    df1 <- data.frame(Label = "Base Accuracy", Value = input$n1)
    gvisGauge(df1,
              options=list(min=0, max=100, greenFrom=90,
                           greenTo=100, yellowFrom=75, yellowTo=89.99,
                           redFrom=0, redTo=74.99, width=300, height=300));  

})

output$view2 <- renderGvis({
  df2 <- data.frame(Label = "Model Accuracy", Value = input$n2)
  gvisGauge(df2,
            options=list(min=0, max=100, greenFrom=90,
                         greenTo=100, yellowFrom=75, yellowTo=89.99,
                         redFrom=0, redTo=74.99, width=300, height=300));  

})


})

Answer 1

You can use column to specify the layout or you can use div and go with tags$style and use display:inline-block

rm(list = ls())
library(shiny)
library(googleVis)

ui =(fluidPage(
  titlePanel('Guage'),
  sidebarLayout(
    sidebarPanel(
      numericInput('n1', 'Enter your Base Accuracy', 40, 0.5, 100),


      numericInput('n2', 'Enter your Model Accuracy', 40, 0.5, 100)
    ),
    mainPanel(
      tabsetPanel(
        tabPanel("Accuracy Guage",
                 column(4,htmlOutput("view1")),
                 column(4,htmlOutput("view2"))
      )
    )
  ))))
server = function(input, output) {

  output$view1 <- renderGvis({
    df1 <- data.frame(Label = "Base Accuracy", Value = input$n1)
    gvisGauge(df1,
              options=list(min=0, max=100, greenFrom=90,
                           greenTo=100, yellowFrom=75, yellowTo=89.99,
                           redFrom=0, redTo=74.99, width=300, height=300));  

  })

  output$view2 <- renderGvis({
    df2 <- data.frame(Label = "Model Accuracy", Value = input$n2)
    gvisGauge(df2,
              options=list(min=0, max=100, greenFrom=90,
                           greenTo=100, yellowFrom=75, yellowTo=89.99,
                           redFrom=0, redTo=74.99, width=300, height=300));  

  })
}
runApp(list(ui = ui, server = server))