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:

protected void BeginCloud(int line1Index, int line2Index, Color color, int offset = 0)

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";​this.AddLineSeries("Fast SMA line", Color.Red, 3, LineStyle.Solid);this.AddLineSeries("Slow SMA line", Color.Green, 3, LineStyle.Solid);​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(){     this.fastSma = Core.Instance.Indicators.BuiltIn.SMA(this.FastPeriod, PriceType.Close);     this.slowSma = Core.Instance.Indicators.BuiltIn.SMA(this.SlowPeriod, PriceType.Close);​     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){     var currFastValue = this.fastSma.GetValue();     var currSlowValue = this.slowSma.GetValue();​     var prevFastValue = this.fastSma.GetValue(1);     var prevSlowValue = this.slowSma.GetValue(1);​     var isCrossing = currFastValue > currSlowValue && prevFastValue < prevSlowValue ||                      currFastValue < currSlowValue && prevFastValue > prevSlowValue;​     this.SetValue(currFastValue, 0);     this.SetValue(currSlowValue, 1);​     if (isCrossing)     {        this.EndCloud(0, 1, Color.Empty);​        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.