I created a reactive function to use the values in an array:
# reactive funcion (R)
reac <- reactive({
df_1 <- data.frame(
x = c(input$input1, input$input2, input$input3, input$input4)
)
df_1[,1]
})
// json array
let dataset = {
'source': [
['MilkTea', ", reac(), "],
['MatchaLatte', ", reac(), "],
['CheeseCocoa', 40.1, 62.2, 69.5, 36.4],
['WalnutBrownie', 25.2, 37.1, 41.2, 18]
]
};
As an example, I’m using the first value of the first variable, in this place:
data: [
{value: dataset.source[0][1]}
]
This works as the value appears (30). However, I cannot update the dataset so that the values are updated in the chart.
See the complete code with the update functions and the html used:
library(shiny)
ui <- HTML(paste0(
"<head>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js'></script>
</head>
<div style='display: grid; grid-template-columns: repeat(12, 1fr);'>
<div style='grid-column: span 12;'>
<div style='display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 15px;'>
<div style='grid-column: span 6; background-color: #ff9000;'>
<h2>Inputs</h5>
<hr>
<input id='input1' type='number' value='30'>
<input id='input2' type='number' value='12'>
<input id='input3' type='number' value='45'>
<input id='input4' type='number' value='58'>
<button id='btnTest'>Update</button>
</div>
<div id='testPlot' style='height: 400px; width: 400px;
grid-column: span 6; display: block; margin: auto;'>",
uiOutput(outputId = "outputTest"),
"</div>
</div>
</div>
</div>"
))
server <- function(input, output, session) {
output$outputTest <- renderUI({
reac <- reactive({
df_1 <- data.frame(
x = c(input$input1, input$input2, input$input3, input$input4)
)
df_1[,1]
})
HTML(paste0(
"<script>
const testPlotUse = echarts.init(document.getElementById('testPlot'));
// Definindo o JSON do dataset com o valor inicial do input value1
let dataset = {
'source': [
['MilkTea', ", reac(), "],
['MatchaLatte', ", reac(), "],
['CheeseCocoa', 40.1, 62.2, 69.5, 36.4],
['WalnutBrownie', 25.2, 37.1, 41.2, 18]
]
};
// Função para atualizar o gráfico
function updateF1(dataset) {
let option = {
series: [{
type: 'gauge',
min: 0,
max: 60,
splitNumber: 6,
data: [
{value: dataset.source[0][1]}
]
}]
};
testPlotUse.setOption(option);
};
function updateF2() {
let dataset = {
'source': [
['MilkTea', ", reac(), "],
['MatchaLatte', ", reac(), "],
['CheeseCocoa', 40.1, 62.2, 69.5, 36.4],
['WalnutBrownie', 25.2, 37.1, 41.2, 18]
]
};
updateF1(dataset);
};
$('#btnTest').on('click', function() {
updateF2();
});
updateF2();
</script>"
))
})
}
shinyApp(ui, server)
In other words, I need to click the button (btnTest) and make the graph update immediately. I need this data structure, not using the echarts4 package for example.