@tradingcentral/common-tradingview-plugins NPM

Trading Central TradingView Charting Library Plugin

A plugin to add Trading Central functionality to the Tradingview charting library.
Currently implemented functionality:
- Technical Views
- Technical Insight

Language Support

This product currently has translations for the following languages:

English
Simplified Chinese
German
French
Japanese
Russian
Thai
Turkish
Arabic
Dutch
Indonesian

Compatibility

The plugin has been tested with, and is compatible with, all versions of the TradingView charting library from v17 to v24, inclusive.

User's Guide

This section will explain how to incorporate the Trading Central plugins into the TradingView charting library.

Integration Steps

Include tc-tradingview-plugins.umd.js into the charting HTML page.
Construct the TradingView chart widget using the TradingCentral.plugins.initialize() method rather than the standard TradingView widget constructor. The initialize() method takes two parameters: - TradingView widget constructor parameter - This contains the same fields and values described by the TradingView documentation. - TradingCentralPluginOptions - This contains the startup configuration information for the Trading Central plugins. The fields in this object are described below.
The initialize() method returns a TradingViewPluginsApi object.

(Optional) Override or modify the plugin styles to match your application styling.

TradingViewPluginsApi object

The TradingViewPluginsApi object returned by the initialize() method provides the following properties and methods:

widget - This property returns the TradingView widget created in the initialize() method. This allows the user the ability to call methods directly on the TradingView widget post-creation.
remove() - This method allows the user to remove the TradingView widget and all artifacts related to the Trading Central plugins.
getPluginToggleFunctions() - This method returns an object containing references to the fuctions that can be externally called to control the display of the plugins.

TradingCentralPluginOptions

This object is used to control and configure the operation of the Trading Central plugins within the TradingView chart. It contains the following fields:

tokenProvider (Required) This is a defined method that is called to supply the required API authorization token necessary to retrieve data from the public Trading Central REST APIs. This function may be as simple as a method that returns a constant authentication token string, or it may be more complex to account for token expiration.
mapToTCSymbology (Optional) This is the user-defined method that is called to map the client's symbology to Trading Central symbology. The method takes the ticker and exchange as inputs and returns the Trading Central symbology (ticker and exchange) the supplied inputs.
options (Optional) This is a record-type object that defines how the plugins are initialized in the TradingView chart. The following keys are supported: AnalystViews and TechnicalInsight. The value associated with each key is an object that contains a number of optional fields: - active Specifies whether the chart is initialized with the selected plugin in a pre-selected state. The accepted values are: true and false. If this field is not specified, the plugin is initialized in unselected mode. - avLinkHidden This is only applicable for the AnalystViews options. This specifies whether the About Analyst Views link is to be shown or not. The accepted values are: true and false. If this field is not specified, the About Analyst Views link is shown. - aboutAVLinkUrl This is only applicable for the AnalystViews options. This specifies the url to be used in the about analyst views link. The url can contain {lang} as the placeholder, which will be replaced by the language name. If the field is not specified then the link is 'https://investor.tradingcentral.com/user-guides/analyst-views/english'. - events This is only applicable for the TechnicalInsight options. This specifies the technical events that are shown on the chart in a pre-selected state. The accepted value is an array of one or more valid technical event IDs. - headerButtonHidden This is applicable for both the AnalystViews and TechnicalInsight options. This specifies whether the buttons to toggle these plugins are to be shown in the toolbar above the TradingView Chart. The accepted values are: true and false. If this field is not specified, the buttons are shown.

To include a specific Trading Central plugin into the TradingView chart, include its key in the options record. It is permissible to include more than one plugin in the chart, but each plugin type is separately licensed and authorized.

options Examples

Include only the Analyst Views plugin on the chart and display the technical analysis for the current instrument as soon as the chart is displayed.

{
    AnalystViews: {
        active: true,
    },
}

Include both the Analyst Views and Technical Insight plugins on the TradingView chart. On the initial chart display, show only the Technical Insight plugin in its selected state and have one event selected with its associated patterns displayed on the chart.

{
    AnalystViews: {},
    TechnicalInsight: {
        active: true,
        selectedEvents: ["USvyWWAAPGcwAggABAACAAAD6CRg2"],
    },
}

HTML Example

The following HTML document demonstrates how to include a TradingView chart with the Analyst Views and Technical Insights enabled, but not activated.

<!DOCTYPE HTML>
<!DOCTYPE HTML>
<html>
  <head>
    <title>User's Guide Trading Central Plugin Example</title>

    <script type="text/javascript">
      // ***IMPORTANT*** Modify these variables to match your environment
      window.LIBRARY_PATH = "assets/charting_library/";
      window.DATAFEED_PATH = "assets/datafeeds/udf/dist/";
      window.PLUGINS_PATH = "../node_modules/@tradingcentral/common-tradingview-plugins/dist/";
    </script>

    <!-- required included JavaScript files -->
    <script id="charting_library"></script>
    <script id="datafeed"></script>
    <script id="tc_plugins"></script>
    <script type="text/javascript">
      // assign the JavaScript file locations
      document.getElementById("charting_library").src = window.LIBRARY_PATH+"charting_library.js";
      document.getElementById("datafeed").src = window.DATAFEED_PATH+"bundle.js";
      document.getElementById("tc_plugins").src = window.PLUGINS_PATH+"tc-tradingview-plugins.umd.js";
    </script>

    <!-- load or define the Trading Central API access token -->
    <script type="module">
      // this authorization token is supplied by Trading Central
      import {API_TOKEN} from "./token.js";
      window.API_TOKEN = API_TOKEN;
    </script>

    <script type="text/javascript">
      function createChartWithPlugins() {
        // --------------------------------------------------------------------
        // Create the TradingViewPluginsApi object and Tradingview chart widget
        // --------------------------------------------------------------------
        window.tcWidget = window.TradingCentral.plugins.initialize(
          {
            fullscreen: true,
            height: 800, 
            symbol: "IBM",
            interval: "1D",
            container_id: "tv_chart_container",
            datafeed: new Datafeeds.UDFCompatibleDatafeed("https://demo_feed.tradingview.com"),
            library_path: window.LIBRARY_PATH,
            locale: "en",
            disabled_features: ["use_localstorage_for_settings"],
            theme: "light",
          },
          {
            tokenProvider: () => {
              return API_TOKEN;
            },
            mapToTCSymbology: (tkr, exc) => {
              return { ticker: tkr, exchange: exc };
            },
            options: {
              AnalystViews: {},
              TechnicalInsight: {},
            },
          }
        );
      };
      window.onload = (event) => {
        console.log(`charting_library version: ${TradingView.version()}`);
        createChartWithPlugins();
      };
    </script>
  </head>
  <body style="margin:0px;">
    <div id="tv_chart_container"></div>
  </body>
</html>

Controlling the Plugins Externally

It is now possible to control the visibility of the plugins using controls that are external to the TradingView chart. For example, it is possible to have an HTML control on the web page that toggles the visiblity of the Analyst Views plugin on the TradingView chart. Previously, the plugin display could only be toggled from the button on the TradingView chart header.

To achieve this functionality, follow these steps:

Call the TradingCentral.plugins.initialize() method and store the returned object. Set the headerButtonHidden option to true for the plugin(s) if you only want to control the plugin display through the external button.
Call the getPluginToggleFunctions() on the returned object to get the references to the plugin toggle methods.
Create an HTML element on the page external to the TradingView container element.
Attach the onclick event of the HTML element to the AnalystViews or TechnicalInsight member of the returned plugin toggles object.