Skip to main content
Version: v24

Creating Custom Studies

Displaying your data as an indicator​

To display your own indicators there is a custom_indicators_getter field in Widget Constructor. There is a variety of plot types, such as lines, arrows, bar colorers, etc. For full reference please see the Metainfo section.

The custom indicator is an object with the following fields:

  • name - your study name, it will be used internally by the library
  • metainfo - study metainfo, for details please see Metainfo article
  • constructor - the field containing required functions init() and main(). Constructor page

The instruction below explains how to display chart data as an indicator. Please follow these steps.

  1. Come up with a new ticker name to display your data and set up your server to return valid SymbolInfo for this new ticker.
  2. Also, set up the server to return valid historical data for this ticker.
  3. Add custom_indicators_getter key to the widget constructor. Its value is a function that returns a Promise object with a list of custom indicators.
  4. (Optional) Update your widget's initialization code to create this indicator when the chart is ready.

Indicator template:

custom_indicators_getter: function(PineJS) {
    return Promise.resolve([
        {
            name: '<study name>',
            metainfo: {
                _metainfoVersion: 51,
                id: '<study name>@tv-basicstudies-1',
                description: '<study description>',
                shortDescription: '<short study description>',
                is_hidden_study: true,
                is_price_study: true,
                isCustomIndicator: true,
                format: {
                    type: 'price',
                    precision: 2,
                },

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

                            // Show price line?
                            trackPrice: false,

                            // Plot color
                            color: '#0000FF'
                        }
                    },
                    precision: 2,
                    inputs: {}
                },
                styles: {
                    plot_0: {
                        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 = '<TICKER>';
                    this._context.new_sym(symbol, 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];
                }
            }
        }
    ]);
},

Examples​