Understanding the Issue with TradingView JavaScript Widget and Shiny Application
As a user of Shiny applications, you may have come across various libraries and tools to enhance your UI. However, when integrating a JavaScript code from TradingView into a Shiny application, there can be issues with the UI deletion. In this article, we will delve into the problem, explore possible solutions, and provide an in-depth look at the technical aspects involved.
Introduction to Shiny and TradingView
Shiny is an open-source web application framework for R that allows you to build reactive, web-based interfaces for data analysis, visualization, and other applications. TradingView is a popular platform for real-time financial charts and analytics.
The TradingView widget provides a JavaScript library that can be used to embed charts and other visualizations into your Shiny application. This integration enables users to interact with the chart directly from within the Shiny app, making it an attractive feature for financial analysis and visualization tasks.
The Problem: UI Deletion When Loading the Widget
When you try to load a TradingView widget in a Shiny application, you may encounter an issue where the entire UI disappears. This problem can be frustrating, especially if you’re working on a complex app with multiple components that rely on this widget.
To understand why this is happening, let’s take a closer look at the code and technical aspects involved.
The Role of shinyjs in Shiny Applications
ShinyJS is an R package that provides a set of functions for creating custom user interface elements. In your example, you’re using useShinyjs() to enable these custom UI elements.
When you use extendShinyjs(), you’re passing the JavaScript code that will be executed in the context of the Shiny application. This code can contain any necessary logic for interacting with the widget or modifying the UI.
In your example, the JavaScript code defines a function called pageCol that initializes the TradingView widget. The extendShinyjs() function is used to attach this code to the ShinyJS framework.
Possible Solutions
To resolve the issue of UI deletion when loading the TradingView widget, you can try two approaches:
Add an ID attribute to the div tag
You can add an ID attribute to the
divtag where the widget will be rendered. This will allow you to specify a unique identifier for the widget.
shinyApp( ui = fluidPage( div( id = “tradingview_e9634”, # Add this line selectInput(“ticker”, “Ticker:”, c(‘NASDAQ:AMD’, ‘NASDAQ:TSLA’, ‘NYSE:GE’)), tags$head(HTML(’<script type=“text/javascript” src=“https://s3.tradingview.com/tv.js"></script>')) , useShinyjs(), extendShinyjs(text = jsCode, functions = c(“pageCol”)) ), ), server = function(input, output) { observeEvent(input$ticker, { js$pageCol(input$ticker) }) } )
2. **Use an iframe to embed the widget**
Another approach is to use an iframe to embed the TradingView chart directly into your Shiny application. This can help prevent issues with UI deletion.
To implement this approach, you'll need to create a separate HTML file (`chart.html`) that contains the necessary JavaScript code for initializing the TradingView widget. You can then use this file in your Shiny app using an iframe tag.
Here's an example of how you might structure your `app.R` and `chart.html` files:
**app.R**
```r
library(shiny)
shinyApp(
ui = fluidPage(
div(selectInput("ticker", "Ticker:", c('NASDAQ:AMD', 'NASDAQ:TSLA', 'NYSE:GE'))),
htmlOutput("frame")
),
server = function(input, output) {
observeEvent(input$ticker, {
query <- paste0("chart.html?value=", input$ticker)
output$frame <- renderUI({
tags$iframe(src=query, width=660, height=450)
})
})
}
)
chart.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
</head>
<body>
<div id="tradingview_chart" class="tv-chart"></div>
<script>
// Initialize TradingView chart here
var chart = new TradingView Chart({
"width": 660,
"height": 450,
"symbol": "{{ query }}",
"container_id": "tradingview_chart"
});
</script>
</body>
</html>
By using one of these approaches, you should be able to resolve the issue with UI deletion when loading the TradingView widget in your Shiny application.
Last modified on 2024-03-04