admin管理员组文章数量:1026104
Task: using R and shinydashboard, embed a custom Javascript-generated plot in the dashboard body. Specify width of the plot as percentage, so that the plot occupies its column (or box) regardless of viewer's screen setup.
Setup: R (3.5.2), shiny (1.2.0) and shinydashboard (0.7.1). The dashboard code (simplified reproducible example) is as follows:
library(shiny)
library(shinydashboard)
ui <- fluidPage(
dashboardPage(
dashboardHeader(),
dashboardSidebar(
sidebarMenu(
menuItem("Main", tabName = "tab1", icon = icon("dashboard")
)
)
),
dashboardBody(
tabItems(
tabItem("tab1",
column(width = 12,
tags$div(id = "main", style = "width: 100%; height: 400px"),
tags$script(src = ".1.0/echarts.min.js"),
tags$script(src = "myscript.js")
)
)
)
)
)
)
server <- function(input, output) {
}
# Run the application
shinyApp(ui = ui, server = server)
The respective Javascript file myscript.js, which is to be placed in the www subfolder relative to the app file itself, is as follows:
// JS Plot with Echarts 4
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
Problem: for some reason, the 100% specification gets converted to 100px in the final result, producing this output:
Inspecting the plot I see that div#main has indeed the width of 100%, but then it contains another, smaller div, which is already 100px wide:
To me, it would seem that either tabItem or tabItems are at fault, because without using them the oute is correct, and that smaller intermediary div takes its width from its parent correctly:
For pleteness, the code for the working version (without tabItem(s)) is this:
library(shiny)
library(shinydashboard)
ui <- fluidPage(
dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
column(width = 12,
tags$div(id = "main", style = "width: 100%; height: 400px"),
tags$script(src = ".1.0/echarts.min.js"),
tags$script(src = "myscript.js")
)
)
)
)
server <- function(input, output) {
}
# Run the application
shinyApp(ui = ui, server = server)
As you can see, the code is almost identical, aside from the offending functions. I don't see however how a shinydashboard could possibly work without these functions, as they structure the whole application. Is there any workaround you can think of? Thanks.
Task: using R and shinydashboard, embed a custom Javascript-generated plot in the dashboard body. Specify width of the plot as percentage, so that the plot occupies its column (or box) regardless of viewer's screen setup.
Setup: R (3.5.2), shiny (1.2.0) and shinydashboard (0.7.1). The dashboard code (simplified reproducible example) is as follows:
library(shiny)
library(shinydashboard)
ui <- fluidPage(
dashboardPage(
dashboardHeader(),
dashboardSidebar(
sidebarMenu(
menuItem("Main", tabName = "tab1", icon = icon("dashboard")
)
)
),
dashboardBody(
tabItems(
tabItem("tab1",
column(width = 12,
tags$div(id = "main", style = "width: 100%; height: 400px"),
tags$script(src = "http://cdnjs.cloudflare./ajax/libs/echarts/4.1.0/echarts.min.js"),
tags$script(src = "myscript.js")
)
)
)
)
)
)
server <- function(input, output) {
}
# Run the application
shinyApp(ui = ui, server = server)
The respective Javascript file myscript.js, which is to be placed in the www subfolder relative to the app file itself, is as follows:
// JS Plot with Echarts 4
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
Problem: for some reason, the 100% specification gets converted to 100px in the final result, producing this output:
Inspecting the plot I see that div#main has indeed the width of 100%, but then it contains another, smaller div, which is already 100px wide:
To me, it would seem that either tabItem or tabItems are at fault, because without using them the oute is correct, and that smaller intermediary div takes its width from its parent correctly:
For pleteness, the code for the working version (without tabItem(s)) is this:
library(shiny)
library(shinydashboard)
ui <- fluidPage(
dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
column(width = 12,
tags$div(id = "main", style = "width: 100%; height: 400px"),
tags$script(src = "http://cdnjs.cloudflare./ajax/libs/echarts/4.1.0/echarts.min.js"),
tags$script(src = "myscript.js")
)
)
)
)
server <- function(input, output) {
}
# Run the application
shinyApp(ui = ui, server = server)
As you can see, the code is almost identical, aside from the offending functions. I don't see however how a shinydashboard could possibly work without these functions, as they structure the whole application. Is there any workaround you can think of? Thanks.
Share Improve this question asked Jan 5, 2019 at 11:14 Maxim.KMaxim.K 4,1801 gold badge28 silver badges47 bronze badges1 Answer
Reset to default 5 +50Very interesting, but yes it seems like a bug/feature in tabItems.
By setting the width via css, it just stretches the plot, so that doesnt really work. I found those little workarounds, that resize the plot on a window resize.
Option 1:
To initially resize the window I use shinyjs to collapse the sidebar at startup, so the plot gets resized too. This will start the app with a collapsed sidebar.
If you want the sidebar to not be collapsed at startup, you would have to add collapsed = TRUE to dashboardSidebar and change addClass in the server to removeClass.
Option 2:
If you don't want to use shinyjs you could add a little JS-snippet like:
jss <- HTML("
$(document).on('shiny:connected', function() {
$('.sidebar-toggle').click();
});
")
with
tags$head(tags$script(jss))
in the dashboardBody and collapsed = TRUE in the dashboardSidebar.
app.R
ui <- fluidPage(
dashboardPage(
dashboardHeader(),
dashboardSidebar(
sidebarMenu(
menuItem("Main", tabName = "tab1", icon = icon("dashboard")
)
)
),
dashboardBody(
useShinyjs(),
tabItems(
tabItem("tab1",
column(width = 12,
tags$div(id = "main", style = "width: 100%; height: 400px"),
tags$script(src = "http://cdnjs.cloudflare./ajax/libs/echarts/4.1.0/echarts.min.js"),
tags$script(src = "myscript.js")
)
)
)
)
)
)
server <- function(input, output) {
addClass(selector = "body", class = "sidebar-collapse")
}
# Run the application
shinyApp(ui = ui, server = server)
myscript.js
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
var myChart = echarts.init(document.getElementById('main'), width='100%');
myChart.setOption(option);
$(window).on('resize', function(){
if(myChart != null && myChart != undefined){
myChart.resize();
}
});
Task: using R and shinydashboard, embed a custom Javascript-generated plot in the dashboard body. Specify width of the plot as percentage, so that the plot occupies its column (or box) regardless of viewer's screen setup.
Setup: R (3.5.2), shiny (1.2.0) and shinydashboard (0.7.1). The dashboard code (simplified reproducible example) is as follows:
library(shiny)
library(shinydashboard)
ui <- fluidPage(
dashboardPage(
dashboardHeader(),
dashboardSidebar(
sidebarMenu(
menuItem("Main", tabName = "tab1", icon = icon("dashboard")
)
)
),
dashboardBody(
tabItems(
tabItem("tab1",
column(width = 12,
tags$div(id = "main", style = "width: 100%; height: 400px"),
tags$script(src = ".1.0/echarts.min.js"),
tags$script(src = "myscript.js")
)
)
)
)
)
)
server <- function(input, output) {
}
# Run the application
shinyApp(ui = ui, server = server)
The respective Javascript file myscript.js, which is to be placed in the www subfolder relative to the app file itself, is as follows:
// JS Plot with Echarts 4
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
Problem: for some reason, the 100% specification gets converted to 100px in the final result, producing this output:
Inspecting the plot I see that div#main has indeed the width of 100%, but then it contains another, smaller div, which is already 100px wide:
To me, it would seem that either tabItem or tabItems are at fault, because without using them the oute is correct, and that smaller intermediary div takes its width from its parent correctly:
For pleteness, the code for the working version (without tabItem(s)) is this:
library(shiny)
library(shinydashboard)
ui <- fluidPage(
dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
column(width = 12,
tags$div(id = "main", style = "width: 100%; height: 400px"),
tags$script(src = ".1.0/echarts.min.js"),
tags$script(src = "myscript.js")
)
)
)
)
server <- function(input, output) {
}
# Run the application
shinyApp(ui = ui, server = server)
As you can see, the code is almost identical, aside from the offending functions. I don't see however how a shinydashboard could possibly work without these functions, as they structure the whole application. Is there any workaround you can think of? Thanks.
Task: using R and shinydashboard, embed a custom Javascript-generated plot in the dashboard body. Specify width of the plot as percentage, so that the plot occupies its column (or box) regardless of viewer's screen setup.
Setup: R (3.5.2), shiny (1.2.0) and shinydashboard (0.7.1). The dashboard code (simplified reproducible example) is as follows:
library(shiny)
library(shinydashboard)
ui <- fluidPage(
dashboardPage(
dashboardHeader(),
dashboardSidebar(
sidebarMenu(
menuItem("Main", tabName = "tab1", icon = icon("dashboard")
)
)
),
dashboardBody(
tabItems(
tabItem("tab1",
column(width = 12,
tags$div(id = "main", style = "width: 100%; height: 400px"),
tags$script(src = "http://cdnjs.cloudflare./ajax/libs/echarts/4.1.0/echarts.min.js"),
tags$script(src = "myscript.js")
)
)
)
)
)
)
server <- function(input, output) {
}
# Run the application
shinyApp(ui = ui, server = server)
The respective Javascript file myscript.js, which is to be placed in the www subfolder relative to the app file itself, is as follows:
// JS Plot with Echarts 4
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
Problem: for some reason, the 100% specification gets converted to 100px in the final result, producing this output:
Inspecting the plot I see that div#main has indeed the width of 100%, but then it contains another, smaller div, which is already 100px wide:
To me, it would seem that either tabItem or tabItems are at fault, because without using them the oute is correct, and that smaller intermediary div takes its width from its parent correctly:
For pleteness, the code for the working version (without tabItem(s)) is this:
library(shiny)
library(shinydashboard)
ui <- fluidPage(
dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
column(width = 12,
tags$div(id = "main", style = "width: 100%; height: 400px"),
tags$script(src = "http://cdnjs.cloudflare./ajax/libs/echarts/4.1.0/echarts.min.js"),
tags$script(src = "myscript.js")
)
)
)
)
server <- function(input, output) {
}
# Run the application
shinyApp(ui = ui, server = server)
As you can see, the code is almost identical, aside from the offending functions. I don't see however how a shinydashboard could possibly work without these functions, as they structure the whole application. Is there any workaround you can think of? Thanks.
Share Improve this question asked Jan 5, 2019 at 11:14 Maxim.KMaxim.K 4,1801 gold badge28 silver badges47 bronze badges1 Answer
Reset to default 5 +50Very interesting, but yes it seems like a bug/feature in tabItems.
By setting the width via css, it just stretches the plot, so that doesnt really work. I found those little workarounds, that resize the plot on a window resize.
Option 1:
To initially resize the window I use shinyjs to collapse the sidebar at startup, so the plot gets resized too. This will start the app with a collapsed sidebar.
If you want the sidebar to not be collapsed at startup, you would have to add collapsed = TRUE to dashboardSidebar and change addClass in the server to removeClass.
Option 2:
If you don't want to use shinyjs you could add a little JS-snippet like:
jss <- HTML("
$(document).on('shiny:connected', function() {
$('.sidebar-toggle').click();
});
")
with
tags$head(tags$script(jss))
in the dashboardBody and collapsed = TRUE in the dashboardSidebar.
app.R
ui <- fluidPage(
dashboardPage(
dashboardHeader(),
dashboardSidebar(
sidebarMenu(
menuItem("Main", tabName = "tab1", icon = icon("dashboard")
)
)
),
dashboardBody(
useShinyjs(),
tabItems(
tabItem("tab1",
column(width = 12,
tags$div(id = "main", style = "width: 100%; height: 400px"),
tags$script(src = "http://cdnjs.cloudflare./ajax/libs/echarts/4.1.0/echarts.min.js"),
tags$script(src = "myscript.js")
)
)
)
)
)
)
server <- function(input, output) {
addClass(selector = "body", class = "sidebar-collapse")
}
# Run the application
shinyApp(ui = ui, server = server)
myscript.js
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
var myChart = echarts.init(document.getElementById('main'), width='100%');
myChart.setOption(option);
$(window).on('resize', function(){
if(myChart != null && myChart != undefined){
myChart.resize();
}
});
本文标签：
版权声明：本文标题：javascript - R shinydashboard: specifying div style width argument as percentage to fit a resizeable JS plot - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745626953a2159920.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论