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?