CodePen Embed - Customize order and position lines created using Broker API. Trading Platform

Live

​x
 
<!DOCTYPE html>
<html>
  <head>
    <title>TradingView Charting Library 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 delay(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}
​
function initOnReady() {
  class CustomDatafeed extends Datafeeds.UDFCompatibleDatafeed {}
​
  var datafeed = new CustomDatafeed(
    "https://demo-feed-data.tradingview.com",
    undefined,
    {
      maxResponseLength: 1000,
      expectedOrder: "latestFirst"
    }
  );
​
   class CustomBroker extends Brokers.BrokerSample {
   positions() {
            return new Promise(resolve => {
              setTimeout(async () => {
                                // await delay(1000);
                resolve([
                  {
                    id: 'NasdaqNM:AAPL',
                    profit: 0,
                    qty: 12,
                    side: 1,
                    symbol: 'AAPL',
                    type: 2,
                    last: 173.68,
                    price: 173.68,
                    avgPrice: 173.68,
                  },
                ]);
              }, 0);
            });
          }
          orders() {
            return new Promise(resolve => {
              setTimeout(async () => {
                                // await delay(1000);
                resolve([
                  {
                    id: '1',
                    profit: 0,
                    qty: 12,
                    side: 1,
                    status: 2,
                    symbol: 'AAPL',
                    execution: '',
                    type: 2,
                    last: 173.68,
                    price: 173.68,
                    avgPrice: 173.68,
                  },
                  {
                    id: '3',
                    parentId: 'NasdaqNM:AAPL',
                    qty: 12,
                    side: -1,
                    status: 6,
                    symbol: 'AAPL',
                    type: 1,
                    execution: '',
                    parentType: 2,
                    limitPrice: 180,
                  },
                  {
                    id: '4',
                    parentId: 'NasdaqNM:AAPL',
                    qty: 12,
                    side: -1,
                    status: 6,
                    symbol: 'AAPL',
                    execution: '',
                    parentType: 2,
                    type: 3,
                    stopPrice: 165,
                  },
                ]);
              }, 0);
            });
          }
        }
​
  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: ["show_right_widgets_panel_by_default"],
​
    broker_factory: function (host) {
      window.tradingHost = host;
      return new CustomBroker(host, datafeed);
    },
    broker_config: {
      configFlags: {
        supportClosePosition: true,
        supportPLUpdate: true,
        supportEditAmount: false,
        supportModifyOrderPrice: true,
        supportModifyBrackets: true,
        supportOrderBrackets: true,
        supportPositionBrackets: true,
        calculatePLUsingLast: true
      }
    },
    trading_customization: {
      brokerOrder: {
        "buy.normal.borderBackgroundColor": "rgb(139,0,0)",
        "buy.disabled.text.buttonTextColor": "rgb(139,0,0)",
​
      },
      brokerPosition: {
        "buy.disabled.qty.textColor": "rgb(255,192,203)",
        "buy.normal.borderColor": "rgb(255,192,203)",
      },
    },
  }));
}
​
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.