CodePen Embed - Create custom page in Account Manager with dynamic data updates. Trading Platform

Live

​x
 
<!DOCTYPE html>
<html>
  <head>
    <title>TradingView Trading Platform demo</title>
​
    <!-- Fix for iOS Safari zooming bug -->
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"
    />
​
    <script
      type="text/javascript"
      src="https://trading-terminal.tradingview-widget.com/charting_library/charting_library.standalone.js"
    ></script>
    <script
      type="text/javascript"
      src="https://trading-terminal.tradingview-widget.com/datafeeds/udf/dist/bundle.js"
    ></script>
    <script type="text/javascript" src="https://trading-terminal.tradingview-widget.com/broker-sample/dist/bundle.js"></script>
​
    <script type="text/javascript" src="script.js"></script>
  </head>
​
  <body style="margin: 0px">
    <div id="tv_chart_container"></div>
  </body>
</html>
​

Live

xxxxxxxxxx
 
function initOnReady() {
  class TestDatafeed extends Datafeeds.UDFCompatibleDatafeed {}
​
  class CustomBroker extends Brokers.BrokerSample {
    constructor(host, quotesProvider) {
      super(host, quotesProvider);
      
      // Create the delegate once (so constructor is the safest place to do this)
      this._customPageChangeDelegate = host.factory.createDelegate();
      // Initialize data to be displayed on the custom page
      this._customPageData = [
        {
          id: "1",  // Item's unique ID
          symbol: "AAPL", // First column
          customTextOne: `1 - Example`, // Second column
          customTextTwo: Math.round(Math.random() * +100), // Third column
        },
      ];
      
      setInterval(() => {
        // Simulate a custom page update.
        this.triggerCustomPageUpdate();
      }, 5000);
    }
​
    accountManagerInfo() {
      // Retrieve the existing implementation
      const original = super.accountManagerInfo();
      
      const modifiedPage = {
        ...original,
        customFormatters: [
          {
            name: "rowButton",
            formatText: () => "",
            formatElement: ({ values }) => {
              const [symbol, id] = values;
              const row = document.createElement("button");
              row.innerText = symbol;
              row.style.borderRadius = "6px";
              row.style.padding = "2px 8px";
              row.style.border = "none";
              
              row.addEventListener("mouseenter", () => {
                row.style.backgroundColor = "#2962ff";
                row.style.color = "#fff";
              });
              row.addEventListener("mouseleave", () => {
                row.style.backgroundColor = "#f0f0f0";
                row.style.color = "#000";
              });
              
              row.addEventListener("click", (event) => {
                event.stopPropagation();
                
                window.tvWidget.activeChart().setSymbol(symbol);
              });
              return row;
            },
          },
        ],
        pages: [
          {
            id: "custom-page",
            title: "Custom Page",
            tables: [
              {
                changeDelegate: this._customPageChangeDelegate,
                columns: [
                  {
                    label: "Symbol",
                    formatter: "rowButton",
                    id: "symbol",
                    dataFields: ["symbol"],
                  },
                  {
                    label: "Column One",
                    formatter: "text", // StandardFormatterName.Text
                    id: "customTextColumnOne",
                    dataFields: ["customTextOne"],
                  },
                  {
                    label: "Column Two",
                    formatter: "text", // StandardFormatterName.Text
                    id: "customTextColumnTwo",
                    dataFields: ["customTextTwo"],
                  },
                ],
                id: "custom-table",
                title: "Custom Table",
                getData: () => {
                  return Promise.resolve(this._customPageData);
                },
              },
            ],
          },
        ],
      };
      return modifiedPage;
    }
​
​
    triggerCustomPageUpdate() {
      const newId = this._customPageData.length + 1;
      const newItem = {
        id: newId,
        symbol: "IBM",
        customTextOne: `${newId} - Example`,
        customTextTwo: Math.round(Math.random() * +100),
      };
      this._customPageData.push(newItem);
      this._customPageChangeDelegate.fire(newItem);
    }
  }
​
  var datafeed = new TestDatafeed("https://demo-feed-data.tradingview.com");
  var widget = (window.tvWidget = new TradingView.widget({
    library_path:
      "https://trading-terminal.tradingview-widget.com/charting_library/",
    // debug: true, // uncomment this line to see Library errors and warnings in the console
    fullscreen: true,
    symbol: "AAPL",
    interval: "1D",
    container: "tv_chart_container",
    datafeed: datafeed,
    locale: "en",
    disabled_features: [],
    enabled_features: ["hide_right_toolbar"],
​
    broker_factory: function (host) {
      return new CustomBroker(host, datafeed);
    },
    broker_config: {
      configFlags: {
        supportNativeReversePosition: true,
        supportClosePosition: true,
        supportPLUpdate: true,
        showQuantityInsteadOfAmount: true,
        supportEditAmount: false,
        supportOrderBrackets: true,
        supportMarketBrackets: true,
        supportPositionBrackets: true,
      },
    },
  }));
}
​
window.addEventListener("DOMContentLoaded", initOnReady, false);
​

This Pen is owned by TradingView on CodePen.

See more by @tradingview on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.