I want to use this chart and reload it using h:selectOneMenu with new data:
<div class="tradingview-widget-container">
<div id="tradingview_e6df2"></div>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.widget(
{
"autosize": true,
"symbol": "NASDAQ:AAPL",
"interval": "D",
"timezone": "Etc/UTC",
"theme": "Light",
"style": "1",
"locale": "uk",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"allow_symbol_change": true,
"container_id": "tradingview_e6df2"
}
);
</script>
</div>
JSF code:
<h:selectOneMenu value="#{dashboard.symbol}" class="form-control" name="symbolid">
<f:selectItem itemValue="NASDAQ:BCH/BTC" itemLabel="BCH/BTC"/>
<f:selectItem itemValue="NASDAQ:AAPL" itemLabel="AAPL"/>
</h:selectOneMenu>
I would like to update "symbol": "NASDAQ:AAPL"
, with some custom param from the select menu and reload the chart.
Do you know how I can implement this functionality?
EDIT:
I tried this:
<h:selectOneMenu value="#{dashboard.symbol}" class="form-control" name="symbolid">
<f:selectItem itemValue="NASDAQ:AAPL" itemLabel="BCH/BTC"/>
<f:selectItem itemValue="XBTUSD" itemLabel="BCH/EUR"/>
<f:ajax event="change" render="tradingview_1f8e8" />
</h:selectOneMenu>
Chart:
<div id="tradingview_1f8e8" class="tradingview-widget-container">
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.widget(
{
"width": 980,
"height": 610,
"symbol": "#{dashboard.symbol}",
"interval": "D",
"timezone": "Etc/UTC",
"theme": "Light",
"style": "1",
"locale": "uk",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"allow_symbol_change": true,
"container_id": "tradingview_1f8e8"
}
);
</script>
</div>