Skip to content

How to add clouds to cTrader indicators

cTrader Algo enables you to draw clouds between lines on a chart. Such clouds allow you to quickly identify key areas on charts and detect shifts in market behaviour.

In this article and its corresponding video, we will show you how to add and customise clouds in indicators.

Add an indicator

A typical Bollinger Bands indicator consists of an upper band, a lower band and a simple moving average in the middle. To enhance the indicator appearance, we plan to fill the space between the bands with a cloud.

To create the indicator, open the Algo app and navigate to the Indicators tab. Click the New button, type in a name for the indicator, such as "Bollinger Bands Cloud" then click the Create button.

We can now modify the indicator code. We will make our example an overlay indicator.

1
[Indicator(AccessRights = AccessRights.None, IsOverlay = true)]

Then we add the three output lines required to draw Bollinger Bands on the chart.

1
2
3
4
5
6
7
8
[Output("Main", LineColor = "Yellow", PlotType = PlotType.Line, Thickness = 1)]
public IndicatorDataSeries Main { get; set; }

[Output("Top", LineColor = "Red", PlotType = PlotType.Line, Thickness = 1)]
public IndicatorDataSeries Top { get; set; }

[Output("Bottom", LineColor = "Red", PlotType = PlotType.Line, Thickness = 1)]
public IndicatorDataSeries Bottom { get; set; }

We declare our Bollinger Bands indicator.

1
private BollingerBands _bollingerBands;

Initialise the indicator.

1
_bollingerBands = Indicators.BollingerBands(Bars.ClosePrices, 20, 2, MovingAverageType.Simple);

Populate the lines with the indicator values in the Calculate() method.

1
2
3
Main[index] = _bollingerBands.Main[index];
Top[index] = _bollingerBands.Top[index];
Bottom[index] = _bollingerBands.Bottom[index];

You can copy the full code below:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
using System;
using cAlgo.API;
using cAlgo.API.Collections;
using cAlgo.API.Indicators;
using cAlgo.API.Internals;

namespace cAlgo
{
    [Indicator(AccessRights = AccessRights.None, IsOverlay = true)]

    public class BollingerBandsCloud : Indicator
    {

        [Output("Main", LineColor = "Yellow", PlotType = PlotType.Line, Thickness = 1)]
        public IndicatorDataSeries Main { get; set; }

        [Output("Top", LineColor = "Red", PlotType = PlotType.Line, Thickness = 1)]
        public IndicatorDataSeries Top { get; set; }

        [Output("Bottom", LineColor = "Red", PlotType = PlotType.Line, Thickness = 1)]
        public IndicatorDataSeries Bottom { get; set; }

        private BollingerBands _bollingerBands;


        protected override void Initialize()
        {
            _bollingerBands = Indicators.BollingerBands(Bars.ClosePrices, 20, 2, MovingAverageType.Simple);
        }

        public override void Calculate(int index)
        {
            Main[index] = _bollingerBands.Main[index];
            Top[index] = _bollingerBands.Top[index];
            Bottom[index] = _bollingerBands.Bottom[index];
        }
    }
}

Click Build or use the Ctrl+B shortcut to build the indicator.

Add an indicator instance for the EURUSD symbol.

You should see a typical Bollinger Bands indicator on the chart.

Add a cloud to Bollinger Bands

Now, we return to the code editor and then work on adding a cloud between the bands.

To achieve our goal, we add the Cloud attribute to the existing indicator. The Cloud attribute instructs the indicator to draw a cloud between the Top and Bottom lines. 

1
[Cloud("Top", "Bottom", Opacity = 0.2)]

You can copy the full altered code below:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
using System;
using cAlgo.API;
using cAlgo.API.Collections;
using cAlgo.API.Indicators;
using cAlgo.API.Internals;

namespace cAlgo
{
    [Indicator(AccessRights = AccessRights.None, IsOverlay = true)]
    [Cloud("Top", "Bottom", Opacity = 0.2)]

    public class BollingerBandsCloud : Indicator
    {

        [Output("Main", LineColor = "Yellow", PlotType = PlotType.Line, Thickness = 1)]
        public IndicatorDataSeries Main { get; set; }

        [Output("Top", LineColor = "Red", PlotType = PlotType.Line, Thickness = 1)]
        public IndicatorDataSeries Top { get; set; }

        [Output("Bottom", LineColor = "Red", PlotType = PlotType.Line, Thickness = 1)]
        public IndicatorDataSeries Bottom { get; set; }

        private BollingerBands _bollingerBands;

        protected override void Initialize()
        {
            _bollingerBands = Indicators.BollingerBands(Bars.ClosePrices, 20, 2, MovingAverageType.Simple);
        }

        public override void Calculate(int index)
        {
            Main[index] = _bollingerBands.Main[index];
            Top[index] = _bollingerBands.Top[index];
            Bottom[index] = _bollingerBands.Bottom[index];
        }
    }
}

We rebuild the algorithm and then check our indicator to see what has changed.

You should see a red cloud between the bands. If you change the Top line colour, the cloud colour will be updated automatically.

We return to the code editor and change the Cloud attribute to draw a cloud only before the Main (yellow) line. 

1
[Cloud("Top", "Main", Opacity = 0.2)]

Rebuild the indicator and then check it to confirm its new look.

Add cloud to MA crossover

We will create a new indicator and use it to demonstrate how clouds with different colours can be added to a chart. We intend to develop a Moving Average (MA) Crossover indicator with a green cloud for uptrends and red cloud for downtrends.

Repeat the steps from the previous section to create a new indicator. This time, the indicator name should be "MA Cloud".

We start modifying the new indicator by setting its IsOverlay property to True. 

1
[Indicator(AccessRights = AccessRights.None, IsOverlay = true)]

Add the required Cloud attribute.

1
[Cloud("Fast", "Slow", Opacity = 0.2)]

Add the output lines and declare the moving averages.

1
2
3
4
5
6
7
8
[Output("Fast", LineColor = "Green", PlotType = PlotType.Line, Thickness = 1)]
public IndicatorDataSeries Fast { get; set; }

[Output("Slow", LineColor = "Red", PlotType = PlotType.Line, Thickness = 1)]
public IndicatorDataSeries Slow { get; set; }

SimpleMovingAverage _fastMA;
SimpleMovingAverage _slowMA;

Repeat the step from the previous example (Bollinger Bands). Initialise the moving averages and pass the resulting values to the lines so that they are displayed on the chart. 

1
2
3
4
5
_fastMA = Indicators.SimpleMovingAverage(Bars.ClosePrices, 7);
_slowMA = Indicators.SimpleMovingAverage(Bars.ClosePrices, 13);

Fast[index] = _fastMA.Result[index];
Slow[index] = _slowMA.Result[index];

You can copy the full code below:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
using System;
using cAlgo.API;
using cAlgo.API.Collections;
using cAlgo.API.Indicators;
using cAlgo.API.Internals;

namespace cAlgo
{
    [Indicator(AccessRights = AccessRights.None, IsOverlay = true)]
    [Cloud("Top", "Bottom", Opacity = 0.2)]

    public class BollingerBandsCloud : Indicator
    {

        [Output("Main", LineColor = "Yellow", PlotType = PlotType.Line, Thickness = 1)]
        public IndicatorDataSeries Main { get; set; }

        [Output("Top", LineColor = "Red", PlotType = PlotType.Line, Thickness = 1)]
        public IndicatorDataSeries Top { get; set; }

        [Output("Bottom", LineColor = "Red", PlotType = PlotType.Line, Thickness = 1)]
        public IndicatorDataSeries Bottom { get; set; }

        private BollingerBands _bollingerBands;

        protected override void Initialize()
        {
            _bollingerBands = Indicators.BollingerBands(Bars.ClosePrices, 20, 2, MovingAverageType.Simple);
        }

        public override void Calculate(int index)
        {
            Main[index] = _bollingerBands.Main[index];
            Top[index] = _bollingerBands.Top[index];
            Bottom[index] = _bollingerBands.Bottom[index];
        }
    }
}

Build the indicator and add an instance to view the indicator on a chart.

The cloud colours change on each cross (intersection) of the moving averages.

This article showed you how to add useful clouds to indicators in cTrader.

Image title