0

I have a script that loads when the page loads, and loads a chart into a div. The script is placed directly in the div like the docs show to do.

               <div id="chart2" style='height:100%;'>
                  <script type="text/javascript">
                    var chart2 = new TradingView.widget({
                    "autosize": true,
                    "interval": "60",
                    "timezone": "Etc/UTC",
                    "locale": "en",
                    "toolbar_bg": "rgba(255, 255, 255, 1)",
                   });
                </script>
               </div>

The chart loads directly into div#chart2. TradingView widget doesn't seem to allow you to programmatically change the symbol only of the chart.

So to load new data from a different symbol, it seems I have to destroy the chart and reload it. Which works fine by doing 

     $('.chooseSymbol').click(function(){
           $('#chart2').html("");
           var symbol = $(this).data('symbol');
           var sc = '<script>var chart2 = new TradingView.widget({"autosize": true,"symbol": "POLONIEX:'+symbol+'","interval": "60","timezone": "Etc/UTC","theme": "White","style": "1","locale": "en","toolbar_bg": "rgba(255, 255, 255, 1)","enable_publishing": false,"hideideas": true});<\/script>';
           $("#chart2").append(sc);
      });

However, this doesn't seem to append it to only #chart2. It seems to replace the whole body of the entire page, and makes a full page view of the chart. Symbol changes fine though, but I need it to just replace the current chart, inside the div.

PS I know I can allow the tradingview dropdown, so a user can select their symbol. But I want the user to choose only symbols I allow on the site. Therefore I've hidden the symbol input and chosen this option.

Kylie
  • 10,000
  • 8
  • 37
  • 69
  • it sounds like the widget is using `document.write()`, which only works properly when you're loading the page. If you use it after the page has been loaded, it clears the page first. – Barmar May 23 '17 at 05:24
  • See http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice – Barmar May 23 '17 at 05:25
  • I looked at the code for the widget, it looks like it takes a `container_id:` option to specify where the widget should be placed. – Barmar May 23 '17 at 05:30

1 Answers1

1

The widget appears to have a container_id option to embed the chart in a specific DIV. So try:

$('.chooseSymbol').click(function() {
    var symbol = $(this).data('symbol');
    var chart2 = new TradingView.widget({
        container_id: 'chart2',
        symbol: "POLONIEX:"+symbol, 
        "autosize": true,
        "interval": "60",
        "timezone": "Etc/UTC",
        "locale": "en",
        "toolbar_bg": "rgba(255, 255, 255, 1)",
    });
});

If you don't use this option it uses document.write() to place the widget at the current location, which clears the page if it's used after the document has loaded.

And if you just want to change the symbol in an existing chart, I think there's a setSymbol method.

$('.chooseSymbol').click(function() {
    var symbol = $(this).data('symbol');
    chart2.setSymbol("POLONIX:" + symbol);
});
Barmar
  • 596,455
  • 48
  • 393
  • 495