Tradingview custom studies

Question

Trying to create a custom studies in Tradingview, but getting the following error when the tradingview widget is loaded:

Error: unexpected study id:abcd
    at Function.o.findStudyMetaInfoByDescription (library.4b362457b3a7eceed386.js:29)
    at y.createStudy (library.4b362457b3a7eceed386.js:718)
    at t.<anonymous> (index.jsx:178)
    at charting_library.min.js:1
    at e.fire (library.4b362457b3a7eceed386.js:16)
    at a (library.4b362457b3a7eceed386.js:22)
    at Object.l [as emitOnce] (library.4b362457b3a7eceed386.js:22)
    at ft (library.4b362457b3a7eceed386.js:441)
    at t (library.4b362457b3a7eceed386.js:442)
    at e.fire (library.4b362457b3a7eceed386.js:16)

I've been following the instructions at https://github.com/tradingview/charting_library/wiki/Creating-Custom-Studies

I have used the template from the instructions and just changed to my study name "abcd"

__customIndicators = [
  // *** your indicator object, created from the template ***
  {
    // Replace the <study name> with your study name
    // The name will be used internally by the Charting Library

    name: 'abcd',
    //name: '<study name>',
    metainfo: {
      _metainfoVersion: 40,
      id: 'abcd@tv-basicstudies-1',
      //id: '<study name>@tv-basicstudies-1',
      scriptIdPart: '',
      name: 'abcd',
      //name: '<study name>',

      // This description will be displayed in the Indicators window
      // It is also used as a "name" argument when calling the createStudy method
      description: 'abcd crypto index',
      //description: '<study description>',

      // This description will be displayed on the chart
      shortDescription: 'abcd index',
      //shortDescription: '<short study description>',

      is_hidden_study: true,
      is_price_study: true,
      isCustomIndicator: true,

      plots: [{ id: 'plot_0', type: 'line' }],
      defaults: {
        styles: {
          plot_0: {
            linestyle: 0,
            visible: true,

            // Plot line width.
            linewidth: 2,

            // Plot type:
            //    1 - Histogram
            //    2 - Line
            //    3 - Cross
            //    4 - Area
            //    5 - Columns
            //    6 - Circles
            //    7 - Line With Breaks
            //    8 - Area With Breaks
            plottype: 2,

            // Show price line?
            trackPrice: false,

            // Plot transparency, in percent.
            transparency: 40,

            // Plot color in #RRGGBB format
            color: '#0000FF',
          },
        },

        // Precision of the study's output values
        // (quantity of digits after the decimal separator).
        precision: 2,

        inputs: {},
      },
      styles: {
        plot_0: {
          // Output name will be displayed in the Style window
          title: '-- output name --',
          histogramBase: 0,
        },
      },
      inputs: [],
    },

    constructor: function() {
      this.init = function(context, inputCallback) {
        this._context = context;
        this._input = inputCallback;

        // Define the symbol to be plotted.
        // Symbol should be a string.
        // You can use PineJS.Std.ticker(this._context) to get the selected symbol's ticker.
        // For example,
        //    var symbol = "AAPL";
        //    var symbol = "#EQUITY";
        //    var symbol = PineJS.Std.ticker(this._context) + "#TEST";
        var symbol = '#abcd';
        //var symbol = '<TICKER>';
        this._context.new_sym(symbol, PineJS.Std.period(this._context), PineJS.Std.period(this._context));
      };

      this.main = function(context, inputCallback) {
        this._context = context;
        this._input = inputCallback;

        this._context.select_sym(1);

        // You can use following built-in functions in PineJS.Std object:
        //    open, high, low, close
        //    hl2, hlc3, ohlc4
        var v = PineJS.Std.close(this._context);
        return [v];
      };
    },
  },
];

I'm using the indicators_file_name parameter to the Tradingview constructor.

I'm then trying to create the study like so:

tvWidget.onChartReady(() => {
   tvWidget.chart().createStudy('abcd', false, true);
});

I'm using the UDF alternative to integrate with the server side.

When enabling debugging mode for the tradingview widget, I can see the following in the browser console:

1 custom indicator loaded.
Datafeed settings received: {"supports_search":true,"supports_group_request":false,"supports_marks":false,"supports_timescale_marks":false,"supports_time":true,"exchanges":[{"value":"NasdaqNM","name":"NasdaqNM","desc":"NasdaqNM"}],"symbols_types":[{"name":"All types","value":""},{"name":"Stock","value":"stock"},{"name":"Index","value":"index"}],"supported_resolutions":["D"]}
library.4b362457b3a7eceed386.js:698 Symbol resolve requested: `HOLD` 
library.4b362457b3a7eceed386.js:698 Symbol resolved: `HOLD`, SymbolInfo in server response {"name":"HOLD","timezone":"America/New_York","minmov":1,"minmov2":0,"pointvalue":1,"session":"24x7","has_intraday":false,"has_no_volume":true,"description":"Portfolio Performance","type":"crypto","supported_resolutions":["D"],"pricescale":1000,"ticker":"HOLD"}
library.4b362457b3a7eceed386.js:698 Symbol info after post-processing: `HOLD`, SymbolInfo {"name":"HOLD","timezone":"America/New_York","minmov":1,"minmov2":0,"pointvalue":1,"session":"24x7","has_intraday":false,"has_no_volume":true,"description":"Portfolio Performance","type":"crypto","supported_resolutions":["1D"],"pricescale":1000,"ticker":"HOLD","base_name":["HOLD"],"legs":["HOLD"],"full_name":"HOLD","pro_name":"HOLD","data_status":"streaming"}
library.4b362457b3a7eceed386.js:339 Event "symbol", arguments: [{"category":"Symbol","label":"HOLD","value":""}]
...
...
...
library.4b362457b3a7eceed386.js:339 Event "onChartReady", arguments: []
library.4b362457b3a7eceed386.js:339 Event "chart_style", arguments: [{"category":"Chart","value":"AREA"}]
index.js:2178 Error: unexpected study id:abcd
    at Function.o.findStudyMetaInfoByDescription (library.4b362457b3a7eceed386.js:29)
    at y.createStudy (library.4b362457b3a7eceed386.js:718)
    at t.<anonymous> (index.jsx:178)
    at charting_library.min.js:1
    at e.fire (library.4b362457b3a7eceed386.js:16)
    at a (library.4b362457b3a7eceed386.js:22)
    at Object.l [as emitOnce] (library.4b362457b3a7eceed386.js:22)
    at ft (library.4b362457b3a7eceed386.js:441)
    at t (library.4b362457b3a7eceed386.js:442)
    at e.fire (library.4b362457b3a7eceed386.js:16)

So from this it seems the tradingview widget is loading my indicator file, but still says "unexpected study id:abcd". Anyone who can see the problem? Any help greatly appreciated

Answer 1

1. Apart from the "description:" must be exactly the same as "name:" to get it working, createStudy() searches by the description, so make sure you call it correctly.

   // referring to your description: 'abcd crypto index' widget.chart().createStudy("abcd crypto index", false, true);

2. Make sure to put the file that is containing your __customIndicators in public\charting_library\static\your-file-that-contains-__customIndicators.js

3. If you are using TradeView v1.14, chances are you probably SHOULD use indicators_file_name parameter, rather than custom_indicators_getter(like the one that the documentation recommends, which is NOT working for me).

Answer 2

Where to store custom indicator objects:

widget = new TradingView.widget({

  //...

  custom_indicators_getter: function (PineJS) {
    return Promise.resolve([
      {
        // Replace the <study name> with your study name
        // The name will be used internally by the Charting Library
        name: "<study name>",
        metainfo: {
          _metainfoVersion: 40,
          id: "<study name>@tv-basicstudies-1",
          scriptIdPart: "",
          name: "<study name>",
          description: "<study description>",
          //...
        },
      },
      //...
    ]);
  },

  //...
});

Then, to add teh study on chart render:

widget.onChartReady(function() {
    widget.chart().createStudy('<study description>', false, true);
});

in your case, it's:

widget.onChartReady(function() {
    widget.chart().createStudy('abcd crypto index', false, true);
});

Answer 3

Don't know if this was solved already, but @Mats answer gave me solid clues.

What I did to verify the script was properly loaded was to call the tvWidget.getStudiesList() function and see if my custom script was in the array somewhere close to the bottom.

The trouble with that call is where to run it. I cheated and stored the tvWidget var on the global scope and just ran the command in the console. Once you find your script, just copy the name from the array and use that in your createStudy method.

Hope this helps someone