在闪亮的应用程序中格式化/对齐rCharts(nvd3)

时间:2015-04-01 07:02:31

标签: r shiny nvd3.js rcharts

我正在开发一个Shiny应用程序,我希望如下图所示: enter image description here

然而,当我尝试实现这一目标时,我只能得到以下形式:

enter image description here enter image description here

我正在寻找如何整齐地收集输出,并希望得到任何帮助。我在这里看了几个其他类似的问题,即。 thisthis,但不要认为他们回答了我的问题(第一个问题是关于添加mainPanel,但我使用的是FludiPageFluidRows。我原以为列和行会自动调整到屏幕大小,12列的设计符合屏幕大小,但显然我错了?

非常感谢你的帮助。

用于复制/粘贴的Server.R文件。道歉,这有点长:

#
#
# load libraries, scripts, data

library(shiny)
library(shinyapps)
library(shinydashboard)
library(dplyr)
library(tidyr)
library(lubridate)
library(htmlwidgets)

options(shiny.trace = TRUE,
      shiny.maxRequestSize=300*1024^2)



## body of shiny server side program

shinyServer(function(input, output, session) {


dataList <- reactive({
        if(is.null(input$uploadFile)){     
        return(NULL)
        }
        uploadFileInfo <- input$uploadFile
        uploadData <- read.csv(uploadFileInfo$datapath, header = TRUE, stringsAsFactors = FALSE)

        uploadedData <- tbl_df(uploadData) %>% 
                mutate(yearValue = year(dateValues), monthValue = month(dateValues))

        sumData1 <- uploadedData %>% 
            select(yearValue, earnPts, earnCount, redemPts, redemCount, churnCount, acquisCount) %>% 
            gather(metrics, totals, -yearValue) %>%
            group_by(yearValue, metrics) %>%
            summarise(yearlyTotals = sum(totals)) %>%
            arrange(yearlyTotals)

        sumData2 <- uploadedData %>%  
            select(yearValue, monthValue, earnPts, earnCount, redemPts, redemCount, churnCount, acquisCount) %>%
            gather(metrics, totals, -c(yearValue, monthValue)) %>%
            group_by(yearValue, monthValue, metrics) %>%
            summarise(yearmonthTotals = sum(totals)) %>%
            arrange(yearValue, monthValue) %>%
            group_by(yearValue, metrics) %>%
            mutate(cumulatives = cumsum(yearmonthTotals))

        sumData3 <- uploadedData %>% 
            select(yearValue, monthValue, earnPts, earnCount, redemPts, redemCount, churnCount, acquisCount) %>%
            group_by(yearValue, monthValue) %>%
            summarise_each(funs(mean)) %>% 
            round()

        sumData4 <- uploadedData %>% 
            group_by(dateValues) %>%
            summarise_each(funs(sum))

        earnData <- sumData4 %>%
            select(earnPts, earnCount)
        row.names(earnData) <- sumData4$dateValues

        redempData <- sumData4 %>%
            select(redemPts, redemCount)
        row.names(earnData) <- sumData4$dateValues

        custData <- sumData4 %>%
            select(churnCount, acquisCount)
        row.names(earnData) <- sumData4$dateValues

        sumData5 <- uploadedData %>% 
            group_by(dateValues) %>%
            summarise_each(funs(sum))

        earnTSData <- sumData5 %>%
            select(earnPts, earnCount)
        row.names(earnTSData) <- sumData5$dateValues

        redemTSData <- sumData5 %>%
            select(redemPts, redemCount)
        row.names(redemTSData) <- sumData5$dateValues

        custTSData <- sumData5 %>%
            select(acquisCount, churnCount)
        row.names(custTSData) <- sumData5$dateValues


        dfList <- list(sumData1 = sumData1, sumData2 = sumData2, sumData3 = sumData3,
                   sumData4 = sumData4, earnData = earnData, redempData = redempData,
                   custData = custData, sumData5 = sumData5, earnTSData = earnTSData,
                   redemTSData = redemTSData, custTSData = custTSData)

        return(dfList)
})


### The main chart

output$outlinesChart <- renderChart2({
    myData <- dataList()$sumData1
    mainPlot <- nPlot(yearlyTotals ~ metrics, 
              group = 'yearValue', data = myData, type = 'multiBarChart')
    mainPlot$chart(margin=list(left=100)) 
    rm(myData)
    return(mainPlot)
})


### Information boxes

output$infoBox1 <- renderInfoBox({
    infoBox(
      "Progress", 10*2, icon = icon("line-chart"),
      color = "blue"
    )
})

output$infoBox2 <- renderInfoBox({
    infoBox(
      "Progress", 10*2, icon = icon("line-chart"),
      color = "blue"
    )
})

output$infoBox3 <- renderInfoBox({
    infoBox(
      "Progress", 10*2, icon = icon("line-chart"),
      color = "blue"
    )
})

output$infoBox4 <- renderInfoBox({
    infoBox(
      "Progress", 10*2, icon = icon("line-chart"),
      color = "blue"
    )
})

output$infoBox5 <- renderInfoBox({
    infoBox(
      "Progress", 10*2, icon = icon("smile-o"),
      color = "blue"
    )
})

output$infoBox6 <- renderInfoBox({
    infoBox(
      "Progress", 10*2, icon = icon("frown-o"),
      color = "purple", fill = TRUE
    )
})



### Cumulative chart for points earned

output$cEarnPtsChart <- renderChart2({
    myData <- dataList()$sumData2
    interimData <- myData %>% filter( metrics == 'earnPts')
    myPlot <- nPlot(cumulatives ~ monthValue, group = 'yearValue', 
            data = interimData, type = 'lineChart')
    rm(myData)
    rm(interimData)
    return(myPlot)
})


### Cumulative chart for count of earn transactions

output$cEarnCountChart <- renderChart2({
    myData <- dataList()$sumData2
    interimData <- myData %>% filter( metrics == 'earnCount')
    myPlot <- nPlot(cumulatives ~ monthValue, group = 'yearValue', 
            data = interimData, type = 'lineChart')
    rm(myData)
    rm(interimData)
    return(myPlot)
})


### Cumulative chart for points redeemed

output$cRedemPtsChart <- renderChart2({
    myData <- dataList()$sumData2
    interimData <- myData %>% filter( metrics == 'redemPts')
    myPlot <- nPlot(cumulatives ~ monthValue, group = 'yearValue', 
            data = interimData, type = 'lineChart')
    rm(myData)
    rm(interimData)
    return(myPlot)
})


### Cumulative chart for count of redemption transactions

output$cRedemCountChart <- renderChart2({
    myData <- dataList()$sumData2
    interimData <- myData %>% filter( metrics == 'redemCount')
    myPlot <- nPlot(cumulatives ~ monthValue, group = 'yearValue', 
            data = interimData, type = 'lineChart')
    rm(myData)
    rm(interimData)
    return(myPlot)
})


### Cumulative chart for Customer Acquisition

output$cAcquisChart <- renderChart2({
    myData <- dataList()$sumData2
    interimData <- myData %>% filter( metrics == 'acquisCount')
    myPlot <- nPlot(cumulatives ~ monthValue, group = 'yearValue', 
            data = interimData, type = 'lineChart')
    rm(myData)
    rm(interimData)
    return(myPlot)
})


### Cumulative chart for Customer Acquisition

output$cChurnChart <- renderChart2({
    myData <- dataList()$sumData2
    interimData <- myData %>% filter( metrics == 'churnCount')
    myPlot <- nPlot(cumulatives ~ monthValue, group = 'yearValue', 
            data = interimData, type = 'lineChart')
    rm(myData)
    rm(interimData)
    return(myPlot)
})


})

ui.R文件:

### load libraries

library(shiny)
library(shinythemes)


### body for Shiny UI


shinyUI(navbarPage("My Sample Dashboard", theme = shinytheme('readable'), inverse = TRUE,
        tabPanel("Overview Section",
            fluidRow(
                column(6, 
                    ##current app only supports CSV, since this is a proof of concept...
                    fileInput(inputId = 'uploadFile', label = 'Please upload your file')
                    )
                  ),
            fluidRow(
                column(3,
                     h4('Main Chart goes here'),
                     showOutput('outlinesChart', 'nvd3')
                    ),
                column(3, offset = 5,
                     h5('Info boxes go here'),
                     infoBoxOutput('infoBox1'),
                     infoBoxOutput('infoBox2'),
                     infoBoxOutput('infoBox3'),
                     infoBoxOutput('infoBox4'),
                     infoBoxOutput('infoBox5'),
                     infoBoxOutput('infoBox6')
                    )
                   ),
            hr(),
            fluidRow(
                column(2, 
                     h5('Earned Points chart goes here'),
                    showOutput('cEarnPtsChart', 'nvd3')
                    ),
                column(2, offset = 4,
                    h5('Earn Count chart goes here'),
                    showOutput('cEarnCountChart', 'nvd3')
                    )
                   ),
            fluidRow(
                column(2, 
                     h5('Redeemed Points chart goes here'),
                     showOutput('cRedemPtsChart', 'nvd3')
                    ),
                column(2, offset = 4,
                    h5('Redemption Count chart goes here'),
                     showOutput('cRedemCountChart', 'nvd3')
                    )
                   ),
            fluidRow(
                column(2, 
                     h5('Customer Acquisition chart goes here'),
                     showOutput('cAcquisChart', 'nvd3')
                    ),
                column(2, offset = 4,
                    h5('Customer Churn chart goes here'),
                     showOutput('cChurnChart', 'nvd3')
                    )
                   )
              ),
        tabPanel("Details Section"),
        tabPanel("Experiments Section"))
)

修改

以下是生成要提供给此应用的CSV文件的代码。

earnPtsRange <- 12000:18000
earnCountRange <- 1000:10000
redemPtsRange <- 10000:20000
redemCountRange <- 10000:20000
churnRange <- 1000:10000
acquisitionRange <- 800:15000





### obtained from Dirk Eddelbuettel: https://stackoverflow.com/questions/14720983/efficiently-generate-a-random-sample-of-times-and-dates-between-two-dates
generateDates <- function(N, st="2014/01/01", et="2015/08/31") {
st <- as.POSIXct(as.Date(st))
et <- as.POSIXct(as.Date(et))
dt <- as.numeric(difftime(et,st,unit="sec"))
ev <- sort(runif(N, 0, dt))
rt <- st + ev
rt[order(rt)]
as.Date(rt)
}


## generate data; 10 readings for each month out of 20 months
dateValues <- generateDates(200)
earnPts <- sample(x = earnPtsRange, size = 190)
earnCount <- sample(x = earnCountRange, size = 190)
redemPts <- sample(x = redemPtsRange, size = 190)
redemCount <- sample(x = redemCountRange, size = 190)
churnCount <- sample(x = churnRange, size = 190)
acquisCount <- sample(x = acquisitionRange, size = 190)
## merge the generated data
toyData <- data.frame(dateValues = dateValues, earnPts = earnPts, earnCount = earnCount, redemPts = redemPts, redemCount = redemCount, churnCount = churnCount, 
acquisCount = acquisCount)


## write the data to a CSV file
write.csv(x = toyData, file = './toyDataset.csv', row.names = FALSE)

非常感谢提前。

1 个答案:

答案 0 :(得分:0)

我刚刚在我的rCharts分支上推动了我认为解决你问题的方法。它通过rCharts解决了我的响应和自动调整大小的问题。您使用它的方法是在showOutput中指定宽度和高度参数。默认宽度为100%,默认高度为400px。 示例调用将是showOutput("myGraph", "nvd3", height=555)

您可以从:https://github.com/clecocel/rCharts

下载

您可以使用以下代码安装它:devtools::install_github("clecocel/rCharts")