Write a custom indicator for a TradingView chart

I’m trying to create a custom indicator, such as a custom moving average, to display on a TradingView chart. The TradingView documentation provides a simple example for this:

var widget = window.tvWidget = new TradingView.widget({
    // ...
    custom_indicators_getter: function(PineJS) {
        return Promise.resolve([
            // Indicator object
            {
                name: 'Custom Moving Average',
                metainfo: {
                    // ...
                },
                constructor: function() {
                    // ...
                }
            }
        ]);
    },
});

In my HTML page, I’ve implemented it like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom TradingView Chart</title>
    <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
</head>
<body>
    <div id="tradingview-chart" style="height: 600px; width: 100%;"></div>

    <script type="text/javascript">
        var widget = window.tvWidget = new TradingView.widget({
            container_id: "tradingview-chart",
            autosize: true,
            symbol: "BINANCE:BTCUSDT",
            interval: "D",
            timezone: "Etc/UTC",
            theme: "light",
            style: "1",
            locale: "en",
            toolbar_bg: "#f1f3f6",
            enable_publishing: false,
            allow_symbol_change: true,
            hideideas: true,
            custom_indicators_getter: function(PineJS) {
                return Promise.resolve([
                    {
                        name: 'Custom Moving Average',
                        metainfo: {
                            _metainfoVersion: 51,
                            id: 'custom-moving-average@tv-basicstudies-1',
                            name: 'Custom Moving Average',
                            description: 'Custom Moving Average',
                            shortDescription: 'CMA',
                            is_hidden_study: false,
                            is_price_study: true,
                            isCustomIndicator: true,
                            plots: [{ id: 'plot_0', type: 'line' }],
                            defaults: {
                                styles: {
                                    plot_0: {
                                        linestyle: 0,
                                        linewidth: 2,
                                        plottype: 2, // Line plot
                                        trackPrice: true,
                                        color: '#FF0000' // Red color for the custom MA line
                                    }
                                },
                                precision: 2,
                                inputs: {
                                    length: 14 // Default length for the custom MA
                                }
                            },
                            inputs: [
                                {
                                    id: 'length',
                                    name: 'Length',
                                    defval: 14,
                                    type: 'integer',
                                    min: 1,
                                    max: 100
                                }
                            ]
                        },
                        constructor: function() {
                            this.init = function(context, inputCallback) {
                                this.context = context;
                                this.input = inputCallback;
                                this.length = this.input('length', 14);
                                this.prices = [];
                            };
                            
                            this.main = function(context, inputCallback) {
                                this.context = context;
                                this.input = inputCallback;
                                
                                var close = this.context.new_var(PineJS.Std.close(this.context));
                                this.prices.push(close);

                                if (this.prices.length > this.length) {
                                    this.prices.shift(); // Maintain the window size for the moving average
                                }

                                var sum = this.prices.reduce((acc, val) => acc + val, 0);
                                var ma = sum / this.prices.length;

                                return [ma];
                            };
                        }
                    }
                ]);
            }
        });
    </script>
</body>
</html>

However, I can’t see my custom moving average indicator on the chart. Could you help me figure out the best way to properly display custom indicators on a TradingView chart?

You need to sign in to view this answers

Related Post