如何设置tradingview图表库图表自动更新？

Question

I am setting up a website displaying chart using tradingview chart library, and managed to setup chart to display from data feed. However once chart is loaded, the chart is not auto updating or refreshing with newer data without reloading webpage. How do I setup the chart to update automatically (eg. interval 1m, 5m etc)? This is the code I used:

    function initOnReady() {
        var widget = window.tvWidget = new TradingView.widget({
            // debug: true, // uncomment this line to see Library errors and warnings in the 

            fullscreen: true,
            symbol: 'AAPL',
            interval: '1D',
            container_id: "tv_chart_container",

            //  BEWARE: no trailing slash is expected in feed URL
            datafeed: new Datafeeds.UDFCompatibleDatafeed("<data feed url>"),
            library_path: "charting_library/",
            locale: getParameterByName('lang') || "en",

            disabled_features: ["use_localstorage_for_settings"],

            enabled_features: ["study_templates"],
            charts_storage_url: 'https://saveload.tradingview.com',
            charts_storage_url: 'http://{$smarty.server.HTTP_HOST}',
            charts_storage_api_version: "1.1",
            client_id: 'tradingview.com',
            user_id: 'public_user_id',
        });

    };

Thanks in advance and appreciate for helps.

Answer 1

create file named datafeed like so:

export default {
  onReady: (callback) => {
    console.log("[onReady]: Method call");
    callback({});
  },
  searchSymbols: (userInput, exchange, symbolType, onResultReadyCallback) => {
    console.log("[searchSymbols]: Method call");
  },
  resolveSymbol: (
    symbolName,
    onSymbolResolvedCallback,
    onResolveErrorCallback
  ) => {
    console.log("[resolveSymbol]: Method call", symbolName);
  },
  getBars: async (
    symbolInfo,
    resolution,
    from,
    to,
    onHistoryCallback,
    onErrorCallback,
    firstDataRequest
  ) => {
   
  },
  subscribeBars: (
    symbolInfo,
    resolution,
    onRealtimeCallback,
    subscribeUID,
    onResetCacheNeededCallback
  ) => {
    console.log(
      "[subscribeBars]: Method call with subscribeUID:",
      subscribeUID
    );
  },
  unsubscribeBars: (subscriberUID) => {
    console.log(
      "[unsubscribeBars]: Method call with subscriberUID:",
      subscriberUID
    );
  },
};

and replace it with datafeeds:

import DATAFEED from './datafeed';

function initOnReady() {
        var widget = window.tvWidget = new TradingView.widget({
            // debug: true, // uncomment this line to see Library errors and warnings in the 

            fullscreen: true,
            symbol: 'AAPL',
            interval: '1D',
            container_id: "tv_chart_container",

            //  BEWARE: no trailing slash is expected in feed URL

            datafeed: DATAFEED, // ---> replace here
            library_path: "charting_library/",
            locale: getParameterByName('lang') || "en",

            disabled_features: ["use_localstorage_for_settings"],

            enabled_features: ["study_templates"],
            charts_storage_url: 'https://saveload.tradingview.com',
            charts_storage_url: 'http://{$smarty.server.HTTP_HOST}',
            charts_storage_api_version: "1.1",
            client_id: 'tradingview.com',
            user_id: 'public_user_id',
        });

    };

Notice : Trading view itself manage most actions base on what it needs. for example if you want to drag the candle chart, trading view calculate the view port and find out how many candle it need's to show then call getBars method in datafeeds.js .

for see examples: https://github.com/tradingview/charting-library-examples