Using Clouds in Indicator

Draw highlighted areas between two indicator lines.

Theory

“Clouds” are areas highlighted with a special color drawn between two line series. Usually, they are used to highlight some special region on the chart. So, it’s one more great visual effect which can make your script more user friendly and even more useful.

To start drawing a cloud area we need to invoke the ‘BeginCloud’ method and pass required parameters. If we want to end drawing the area - invoke ‘EndCloud’ method. These methods are available for every indicator.

Let’s figure out the meaning of these parameters:

/// <summary>
/// Marks cloud begin between two line series with specific color
/// </summary>
/// <param name="line1Index">First line series index</param>
/// <param name="line2Index">Second line series index</param>
/// <param name="color">Cloud color</param>
/// <param name="offset">Offset</param>
protected void BeginCloud(int line1Index, int line2Index, Color color, int offset = 0)

/// <summary>
///  Marks cloud end between two line series with specific color
/// </summary>
/// <param name="line1Index">First line series index</param>
/// <param name="line2Index">Second line series index</param>
/// <param name="color">Cloud color</param>
/// <param name="offset">Offset</param>
protected void EndCloud(int line1Index, int line2Index, Color color, int offset = 0)

Practice

It will be a simple indicator that will draw two SMA lines with different periods and сloud areas between of them. Periods and colors can be changed in settings.

Input parameters

Let’s create an empty indicator project and define input parameters.

[InputParameter("Fast SMA period", 10, 1, 9999, 1, 0)]
public int FastPeriod = 50;

[InputParameter("Slow SMA period", 20, 1, 9999, 1, 0)]
public int SlowPeriod = 100;

[InputParameter("Fast line above cloud style", 30)]
public Color FastAboveCloudColor;

[InputParameter("Slow line above cloud style", 40)]
public Color SlowAboveCloudColor;

private Indicator fastSma;
private Indicator slowSma;

Class constructor

Populate constructor of our class. Define script name, add line series and set default colors of cloud areas.

this.Name = "Crossing lines";

// define two lines
this.AddLineSeries("Fast SMA line", Color.Red, 3, LineStyle.Solid);
this.AddLineSeries("Slow SMA line", Color.Green, 3, LineStyle.Solid);

// set default cloud colors
this.FastAboveCloudColor = Color.FromArgb(127, Color.Green);
this.SlowAboveCloudColor = Color.FromArgb(127, Color.Red);

OnInit method

In the ‘OnInit ‘ method we create two SMA indicators and attach them to our main ‘HistoricalData’.

Notice, we use Quantower built-in indicator collection.

protected override void OnInit()
{
     // create SMA indicators
     this.fastSma = Core.Instance.Indicators.BuiltIn.SMA(this.FastPeriod, PriceType.Close);
     this.slowSma = Core.Instance.Indicators.BuiltIn.SMA(this.SlowPeriod, PriceType.Close);

     // attach them to HistoricalData
     this.AddIndicator(this.fastSma);
     this.AddIndicator(this.slowSma);
}

OnUpdate method

The main calculation is performed in the "OnUpdate" method.

Notice the line '20'. When lines are crossed we invoke the ‘EndCloud’ method to close the last area. After that we invoke ‘BeginCloud’ to start drawing the new area with specified color.

protected override void OnUpdate(UpdateArgs args)
{
     // get current values (offset is '0' by default)
     var currFastValue = this.fastSma.GetValue();
     var currSlowValue = this.slowSma.GetValue();

     // get previous values (offset is '1')
     var prevFastValue = this.fastSma.GetValue(1);
     var prevSlowValue = this.slowSma.GetValue(1);

     // check if our lines are crossed.
     var isCrossing = currFastValue > currSlowValue && prevFastValue < prevSlowValue ||
                      currFastValue < currSlowValue && prevFastValue > prevSlowValue;

     // draw lines
     this.SetValue(currFastValue, 0);
     this.SetValue(currSlowValue, 1);

     // Notice!!!
     if (isCrossing)
     {
        // finish drawing the current cloud.
        this.EndCloud(0, 1, Color.Empty);

        // start drawing a new cloud.
        if (currFastValue > currSlowValue)
             this.BeginCloud(0, 1, this.FastAboveCloudColor);
        else if (currFastValue < currSlowValue)
             this.BeginCloud(0, 1, this.SlowAboveCloudColor);
     }
}

OnClear method

Don’t forget to remove indicators we created in the method "OnClear"

protected override void OnClear()
{
     this.RemoveIndicator(this.fastSma);
     this.RemoveIndicator(this.slowSma);
}

A complete example is available on our Github.