• Introduction
• Developing a base custom graphics class
• CCircleSimple indicator class
• CCircleArc indicator class
• CCircleSection indicator class
• CLineGraph linear graph class

To develop a base class, we need to write a set of methods creating the foundation of any custom graphics object and including a common set of properties. To do this, create the CanvasBase.mqh file in the CustomGUI folder of the <data folder>\MQL5\Include directory. This file will contain the CCanvasBase base class for all future types of custom graphics.

//+------------------------------------------------------------------+
//|                                                  CCanvasBase.mqh |
//|                                Copyright 2017, Alexander Fedosov |
//|                           https://www.mql5.com/en/users/alex2356 |
//+------------------------------------------------------------------+
#include <Canvas\Canvas.mqh>
//+------------------------------------------------------------------+
//| Base class for custom graphics development                       |
//+------------------------------------------------------------------+
class CCanvasBase
  {
private:
   //--- Canvas name
   string            m_canvas_name;
   //--- Canvas coordinates
   int               m_x;
   int               m_y;
   //--- Canvas size
   int               m_x_size;
   int               m_y_size;
protected:
   CCanvas           m_canvas;
   //--- Create the graphical resource for the object
   bool              CreateCanvas(void);
   //--- Delete the graphical resource
   bool              DeleteCanvas(void);
public:
                     CCanvasBase(void);
                    ~CCanvasBase(void);
   //--- Set and get coordinates
   void              X(const int x)                         { m_x=x;                      }
   void              Y(const int y)                         { m_y=y;                      }
   int               X(void)                                { return(m_x);                }
   int               Y(void)                                { return(m_y);                }
   //--- Set and get size
   void              XSize(const int x_size)                { m_x_size=x_size;            }
   void              YSize(const int y_size)                { m_y_size=y_size;            }
   int               XSize(void)                            { return(m_x_size);           }
   int               YSize(void)                            { return(m_y_size);           }
   //--- Set the indicator name when creating
   void              Name(const string canvas_name) { m_canvas_name=canvas_name;  }
  };
//+------------------------------------------------------------------+
//| Constructor                                                      |
//+------------------------------------------------------------------+
CCanvasBase::CCanvasBase(void) : m_x(0),
                                 m_y(0),
                                 m_x_size(200),
                                 m_y_size(200)
  {
  }
//+------------------------------------------------------------------+
//| Destructor                                                       |
//+------------------------------------------------------------------+
CCanvasBase::~CCanvasBase(void)
  {
  }
//+------------------------------------------------------------------+
//| Create the graphical resource for an object                      |
//+------------------------------------------------------------------+
bool CCanvasBase::CreateCanvas(void)
  {
   ObjectDelete(0,m_canvas_name);
   if(!m_canvas.CreateBitmapLabel(m_canvas_name,m_x,m_y,m_x_size,m_y_size,COLOR_FORMAT_ARGB_NORMALIZE))
      return(false);
   ObjectSetInteger(0,m_canvas_name,OBJPROP_CORNER,CORNER_LEFT_UPPER);
   ObjectSetInteger(0,m_canvas_name,OBJPROP_ANCHOR,ANCHOR_CENTER);
   ObjectSetInteger(0,m_canvas_name,OBJPROP_BACK,false);
   return(true);
  }
//+------------------------------------------------------------------+
//| Delete the graphical resource                                    |
//+------------------------------------------------------------------+
bool CCanvasBase::DeleteCanvas()
  {
   return(ObjectDelete(0,m_canvas_name)?true:false);
  }
//+------------------------------------------------------------------+

As we can see, the initial object coordinates, name and size are complemented with the graphical resource creation and deletion methods that form the foundation (canvas) the custom graphics elements are plotted on. Further on, CreateCanvas() and DeleteCanvas() methods are to be applied during the initial construction of any graphical object at all times. Therefore, the variables used in these methods should be initialized, like it is done in the constructor.

Let's use the "simple-to-complex basis" in order to grasp the principles of developing custom graphics. First, we are going to develop a simple circular indicator featuring a frame, numerical value and description. The Fig. 1 shows the structure of the basic elements.

• Frame (border). An outlined edging.
• Background. The space the text elements are located in.
• Value. A text element displaying a numerical value.
• Description. Indicator description text (name, period and other distinctive information).

Fig. 1. Basic structure of the simple circular indicator

Let's create yet another folder and name it Indicator in the previously created CustomGUI one. The folder is to contain all classes of future indicators. Create the first one named CircleSimple.mqh. First, we need to include the previously created CanvaseBase.mqh file to the base class for all types of graphical objects and make the CCanvaseBase class basic for the current one, so that all methods of the class are available for the current CCircleSimple.

//+------------------------------------------------------------------+
//|                                                 CircleSimple.mqh |
//|                                Copyright 2017, Alexander Fedosov |
//|                           https://www.mql5.com/en/users/alex2356 |
//+------------------------------------------------------------------+
#include "..\CanvasBase.mqh"
//+------------------------------------------------------------------+
//| Circular indicator with numerical value and description          |
//+------------------------------------------------------------------+
class CCircleSimple : public CCanvasBase

In order not to enter graphical objects manually every time we need them in EA and indicator files, let's create CustomGUI.mqh file in the CustomGUI folder. The file is to contain all inclusions of classes from the Indicators folder. Thus, we need to include only this file to access all library classes. Now, let's include the current one:

//+------------------------------------------------------------------+
//|                                                    CustomGUI.mqh |
//|                                Copyright 2017, Alexander Fedosov |
//|                           https://www.mql5.com/en/users/alex2356 |
//+------------------------------------------------------------------+
#include "Indicators\CircleSimple.mqh"

When implementing the simple circular indicator class, it is also necessary to carefully consider the set of properties and methods providing the ability to set this seemingly simple graphical indicator pattern. The listing below contains the set:

//+------------------------------------------------------------------+
//| Circular indicator with numerical value and description          |
//+------------------------------------------------------------------+
class CCircleSimple : public CCanvasBase
  {
private:
   //--- Background color 
   color             m_bg_color;
   //--- Frame color
   color             m_border_color;
   //--- Value text color
   color             m_font_color;
   //--- Label text color
   color             m_label_color;
   //--- Transparency
   uchar             m_transparency;
   //--- Frame width
   int               m_border;
   //--- Indicator size
   int               m_radius;
   //--- Value font size
   int               m_font_size;
   //--- Label font size
   int               m_label_font_size;
   //---
   int               m_digits;
   //--- Label
   string            m_label;
public:
                     CCircleSimple(void);
                    ~CCircleSimple(void);
   //--- Set and get background color
   color             Color(void)                      { return(m_bg_color);            }
   void              Color(const color clr)           { m_bg_color=clr;                }
   //--- Set and get size
   int               Radius(void)                     { return(m_radius);              }
   void              Radius(const int r)              { m_radius=r;                    }
   //--- Set and get value font size
   int               FontSize(void)                   { return(m_font_size);           }
   void              FontSize(const int fontsize)     { m_font_size=fontsize;          }
   //--- Set and get label font size
   int               LabelSize(void)                  { return(m_label_font_size);    }
   void              LabelSize(const int fontsize)    { m_label_font_size=fontsize;   }
   //--- Set and get value font color
   color             FontColor(void)                  { return(m_font_color);          }
   void              FontColor(const color fontcolor) { m_font_color=fontcolor;        }
   //--- Set and get label font color
   color             LabelColor(void)                 { return(m_label_color);         }
   void              LabelColor(const color fontcolor){ m_label_color=fontcolor;       }
   //--- Set frame color and width
   void              BorderColor(const color clr)     { m_border_color=clr;            }
   void              BorderSize(const int border)     { m_border=border;               }
   //--- Set and get transparency
   uchar             Alpha(void)                      { return(m_transparency);        }
   void              Alpha(const uchar alpha)         { m_transparency=alpha;          }
   //--- Set and get label value
   string            Label(void)                      { return(m_label);               }
   void              Label(const string label)        { m_label=label;                 }
   //--- Create the indicator
   void              Create(string name,int x,int y);
   //--- Remove the indicator
   void              Delete(string name);
   //--- Set and get the indicator value
   void              NewValue(int value);
   void              NewValue(double value);
  };

The purpose of the variables and methods they are used in can be seen from the description. Let's consider in details the methods implementing the plotting of the indicator in the form, in which it is presented in Fig. 1. The first method we are going to consider is CreateCanvas(). As we can see in the listing, it has only three arguments. I found them the most important. Providing additional arguments is redundant, since this complicates the method implementation. Therefore, all other properties are put into separate methods. Consequently, all variables are initialized in the class constructor:

//+------------------------------------------------------------------+
//| Constructor                                                      |
//+------------------------------------------------------------------+
CCircleSimple::CCircleSimple(void) : m_bg_color(clrAliceBlue),
                                     m_border_color(clrRoyalBlue),
                                     m_font_color(clrBlack),
                                     m_label_color(clrBlack),
                                     m_transparency(255),
                                     m_border(5),
                                     m_radius(40),
                                     m_font_size(17),
                                     m_label_font_size(20),
                                     m_digits(2),
                                     m_label("label")
  {
  }

This is convenient because when you create an indicator of that type, you just need to create an instance of its class and use the CreateCanvas () method only. Before creating, you can specify only the properties you want to change. When constructing complex graphical objects using the CCanvas library, keep in mind that methods implementing primitives are drawn sequentially and in layers. This has much in common with an actual canvas. First, artists usually draw a background, then they portray objects which in turn are followed by details, etc. 

//+------------------------------------------------------------------+
//| Create the indicator                                             |
//+------------------------------------------------------------------+
void CCircleSimple::Create(string name,int x,int y)
  {
   int r=m_radius;
//--- Modify the indicator location relative to the radius
   x=(x<r)?r:x;
   y=(y<r)?r:y;
   Name(name);
   X(x);
   Y(y);
   XSize(2*r+1);
   YSize(2*r+1);
   if(!CreateCanvas())
      Print("Error. Can not create Canvas.");
   if(m_border>0)
      m_canvas.FillCircle(r,r,r,ColorToARGB(m_border_color,m_transparency));
   m_canvas.FillCircle(r,r,r-m_border,ColorToARGB(m_bg_color,m_transparency));
//---
   m_canvas.FontSizeSet(m_font_size);
   m_canvas.TextOut(r,r,"0",ColorToARGB(m_font_color,m_transparency),TA_CENTER|TA_VCENTER);
//---
   m_canvas.FontSizeSet(m_label_font_size);
   m_canvas.TextOut(r,r+m_label_font_size,m_label,ColorToARGB(m_label_color,m_transparency),TA_CENTER|TA_VCENTER);
   m_canvas.Update();
  }

We will not dwell on the method implementation details. Let's highlight some basics only:

• First, adjust the location of the graphical resource relative to the actual indicator size, so that it does not go beyond the main chart.
• Then, use the setting and work with the name, size and coordinate methods. The foundation is created from the CCanvasBase base class.
• When implementing the frame, we used the superimposing principle described above. In particular, we have created the two circles: the first one (filled) and the second one with its radius lesser than the first circle's one by the value of the frame width.
• Numerical value and description elements are created above these objects.

Next, let's consider the NewValue() method that implements the display of the indicator's numerical value updating in real time:

//+------------------------------------------------------------------+
//| Set and update the indicator value                               |
//+------------------------------------------------------------------+
void CCircleSimple::NewValue(int value)
  {
   int r=m_radius;
   m_canvas.FillCircle(r,r,r-m_border,ColorToARGB(m_bg_color,m_transparency));
//---
   m_canvas.FontSizeSet(m_font_size);
   m_canvas.TextOut(r,r,IntegerToString(value),ColorToARGB(m_font_color,m_transparency),TA_CENTER|TA_VCENTER);
//---
   m_canvas.FontSizeSet(m_label_font_size);
   m_canvas.TextOut(r,r+m_label_font_size,m_label,ColorToARGB(m_label_color,m_transparency),TA_CENTER|TA_VCENTER);
   m_canvas.Update();
  }

In order for the indicator's numerical value to update correctly, we need to re-draw the three objects (background and text elements) in the same order as when creating them. Therefore, the background is re-drawn in the NewValue() method followed by value and description text elements.

Now, it is time to check the implementation of the circular indicator in the MetaTrader 5 terminal. To do this, let's create an empty indicator, include the CustomGUI.mqh file in it and create two instances of the CCircleSimple class:

//+------------------------------------------------------------------+
//|                                              CustomIndicator.mq5 |
//|                                Copyright 2017, Alexander Fedosov |
//|                           https://www.mql5.com/en/users/alex2356 |
//+------------------------------------------------------------------+
#property copyright "Copyright 2017, Alexander Fedosov"
#property link      "https://www.mql5.com/en/users/alex2356"
#property version   "1.00"
#property indicator_plots 0
#property indicator_chart_window

#include <CustomGUI\CustomGUI.mqh>
//---
CCircleSimple ind1,ind2;

Then, in the indicator initialization, take the standard indicators having the values that are to be used in circular indicators:

//---
int InpInd_Handle,InpInd_Handle1;
double adx[],rsi[];
//+------------------------------------------------------------------+
//| Custom indicator initialization function                         |
//+------------------------------------------------------------------+
int OnInit()
  {

//---- get the indicator handle
   InpInd_Handle=iADX(Symbol(),PERIOD_CURRENT,10);
   InpInd_Handle1=iRSI(Symbol(),PERIOD_CURRENT,10,PRICE_CLOSE);
   if(InpInd_Handle==INVALID_HANDLE)
     {
      Print("Failed to get indicator handle");
      return(INIT_FAILED);
     }
   ArraySetAsSeries(adx,true);
   ArraySetAsSeries(rsi,true);

Let's define some properties of circular indicators for illustrative purposes and create them:

//---
   ind1.Radius(60);
   ind1.Label("ADX");
   ind1.Color(clrWhiteSmoke);
   ind1.LabelColor(clrBlueViolet);
   ind1.Create("adx",100,100);
//---
   ind2.Radius(55);
   ind2.BorderSize(8);
   ind2.FontSize(22);
   ind2.LabelColor(clrCrimson);
   ind2.BorderColor(clrFireBrick);
   ind2.Label("RSI");
   ind2.Create("rsi",250,100);

Now, we only need to enter the current numerical values ​​of standard indicators into the created ones in the indicator's calculation part:

int OnCalculate(const int rates_total,
                const int prev_calculated,
                const datetime &time[],
                const double &open[],
                const double &high[],
                const double &low[],
                const double &close[],
                const long &tick_volume[],
                const long &volume[],
                const int &spread[])
  {
//---
   if(CopyBuffer(InpInd_Handle,0,0,2,adx)<=0 || 
      CopyBuffer(InpInd_Handle1,0,0,2,rsi)<=0
      )
      return(0);
   ind1.NewValue(adx[0]);
   ind2.NewValue(rsi[0]);
//--- return value of prev_calculated for next call
   return(rates_total);
  }

The only thing left to do is writing the methods for deleting graphical resources in the deinitialization, so that graphical objects are deleted correctly when the indicator is removed.

//+------------------------------------------------------------------+
//| Custom indicator deinitialization function                       |
//+------------------------------------------------------------------+
void OnDeinit(const int reason)
  {
   ind1.Delete();
   ind2.Delete();
   ChartRedraw();
  }
//+------------------------------------------------------------------+

The results are presented in Fig. 2. As we can see, the indicators differ significantly from each other in many parameters.

Fig. 2. Sample circular indicators

CCircleArc indicator class

We have considered a class providing the simplest form of implementing a circular indicator. Let's slightly complicate the task and create a class having an additional graphical display element besides the numerical one – an arc. The structure of the basic elements of the indicator with an arc indication is provided in Fig. 3.

Fig. 3. Basic structure of the circular indicator with the arc indication

As we can see, this type features the Arc indicator element. To implement the arc indication, we can use the method that draws the filled ellipse sector and is called Pie(). Of all the overloads of this method, I decided to use the following:

void  Pie( 
   int         x,       // X coordinate of the ellipse center 
   int         y,       // Y coordinate of the ellipse center 
   int         rx,      // ellipse radius X coordinate 
   int         ry,      // ellipse radius Y coordinate 
   int         fi3,     // ray angle from the ellipse center setting the first arc border 
   int         fi4,     // ray angle from the ellipse center setting the second arc border 
   const uint  clr,     // line color 
   const uint  fill_clr // filling color 
   );

fi3 sets the first arc border and is used as the beginning of the arc scale, while fi4 can dynamically change depending on the numerical value passed to our indicator. Create the CircleArc.mqh file in the Indicators folder and add the following string in the CustomGUI.mqh file:

#include "Indicators\CircleArc.mqh"

Thus, we add the future class to the overall list of inclusions of all indicators. Define the set of common properties and methods. They are not different from the previous class methods, however it is worth considering the ENUM_ORIENTATION enumeration. It has two values (VERTICAL and HORIZONTAL) and defines the location of the first arc border of the arc scale. If the value is vertical, the arc starts at 90 degrees and if it is horizontal — at zero. The indication is counted counter-clockwise.

//+------------------------------------------------------------------+
//|                                                    CircleArc.mqh |
//|                                Copyright 2017, Alexander Fedosov |
//|                           https://www.mql5.com/en/users/alex2356 |
//+------------------------------------------------------------------+
#include "..\CanvasBase.mqh"
//+------------------------------------------------------------------+
//| Circular indicator with numerical value and arc indication       |
//+------------------------------------------------------------------+
class CCircleArc : public CCanvasBase
  {
private:
   //--- Indicator background color
   color             m_bg_color;
   //--- Indicator arc color
   color             m_arc_color;
   //--- Indication area color
   color             m_area_color;
   //--- Indicator description color 
   color             m_label_color;
   //--- Indicator value color
   color             m_value_color;
   //--- Indicator transparency
   uchar             m_transparency;
   //--- Indicator size
   int               m_radius;
   //--- Indicator scale width 
   int               m_scale_width;
   //--- Description font size
   int               m_label_font_size;
   //--- Value font size
   int               m_value_font_size;
   //--- Indicator description
   string            m_label_value;
   //--- Indicator scale orientation type
   ENUM_ORIENTATION  m_orientation;
public:
                     CCircleArc(void);
                    ~CCircleArc(void);
   //--- Set and get the indicator background color
   color             BgColor(void)                                   { return(m_bg_color);            }
   void              BgColor(const color clr)                        { m_bg_color=clr;                }
   //--- Set and get the indicator arc color
   color             ArcColor(void)                                  { return(m_arc_color);           }
   void              ArcColor(const color clr)                       { m_arc_color=clr;               }
   //--- Set and get the indication area color
   color             AreaColor(void)                                 { return(m_area_color);          }
   void              AreaColor(const color clr)                      { m_area_color=clr;              }
   //--- Set and get the indicator description color 
   color             LabelColor(void)                                { return(m_label_color);         }
   void              LabelColor(const color clr)                     { m_label_color=clr;             }
   //--- Set and get the indicator value color
   color             ValueColor(void)                                { return(m_value_color);         }
   void              ValueColor(const color clr)                     { m_value_color=clr;             }
   //--- Set and get the indicator transparency 
   uchar             Alpha(void)                                     { return(m_transparency);        }
   void              Alpha(const uchar trn)                          { m_transparency=trn;            }
   //--- Set and get the indicator size
   int               Radius(void)                                    { return(m_radius);              }
   void              Radius(const int r)                             { m_radius=r;                    }
   //--- Set and get the indicator scale width
   int               Width(void)                                     { return(m_scale_width);         }
   void              Width(const int w)                              { m_scale_width=w;               }
   //--- Set and get the description font size
   int               LabelSize(void)                                 { return(m_label_font_size);     }
   void              LabelSize(const int sz)                         { m_label_font_size=sz;          }
   //--- Set and get the value font size
   int               ValueSize(void)                                 { return(m_value_font_size);     }
   void              ValueSize(const int sz)                         { m_value_font_size=sz;          }
   //--- Set and get the indicator description
   string            LabelValue(void)                                { return(m_label_value);         }
   void              LabelValue(const string str)                    { m_label_value=str;             }
   //--- Set and get the scale orientation type
   void              Orientation(const ENUM_ORIENTATION orietation)  { m_orientation=orietation;      }
   ENUM_ORIENTATION  Orientation(void)                               { return(m_orientation);         }
   //--- Create the indicator
   void              Create(string name,int x,int y);
   //--- Remove the indicator
   void              Delete(void);
   //--- Set and update the indicator value
   void              NewValue(double value,double maxvalue,int digits);
  };

Let's have a closer look at the Create() and NewValue() methods, since their implementation is not provided. Keep in mind that created objects are superimposed on each other in layers, so the sequence of creating them is as follows:

1. Arc indicator background. As a filled circle.
2. Arc indicator. As a filled ellipse sector.
3. Text background. As a filled circle.
4. Indicator numerical value and its description.

//+------------------------------------------------------------------+
//| Create the indicator                                             |
//+------------------------------------------------------------------+
void CCircleArc::Create(string name,int x,int y)
  {
   int r=m_radius;
   double a,b;
//--- Set the initial indicator location
   a=(m_orientation==VERTICAL)?M_PI_2:0;
   b=(m_orientation==VERTICAL)?M_PI_2:0;
   b+=90*M_PI/180;
//--- Correct the indicator location relative to the radius
   x=(x<r)?r:x;
   y=(y<r)?r:y;
   Name(name);
   X(x);
   Y(y);
   XSize(2*r+1);
   YSize(2*r+1);
   if(!CreateCanvas())
      Print("Error. Can not create Canvas.");
//---
   m_canvas.FillCircle(r,r,r,ColorToARGB(m_bg_color,m_transparency));
   m_canvas.Pie(r,r,XSize()/2,YSize()/2,a,b,ColorToARGB(m_arc_color,m_transparency),ColorToARGB(m_arc_color,m_transparency));
   m_canvas.FillCircle(r,r,r-m_scale_width,ColorToARGB(m_area_color,m_transparency));
//---
   m_canvas.FontSizeSet(m_value_font_size);
   m_canvas.TextOut(r,r,"0",ColorToARGB(m_value_color,m_transparency),TA_CENTER|TA_VCENTER);
//---
   m_canvas.FontSizeSet(m_label_font_size);
   m_canvas.TextOut(r,r+m_label_font_size,m_label_value,ColorToARGB(m_label_color,m_transparency),TA_CENTER|TA_VCENTER);
   m_canvas.Update();
  }

//+------------------------------------------------------------------+
//| Set and update the indicator value                               |
//+------------------------------------------------------------------+
void CCircleArc::NewValue(double value,double maxvalue,int digits=2)
  {
   int r=m_radius;
   double a,b,result;
//--- Checks for out of range
   value=(value>maxvalue)?maxvalue:value;
   value=(value<0)?0:value;
//--- Set the initial indicator location
   a=(m_orientation==VERTICAL)?M_PI_2:0;
   b=(m_orientation==VERTICAL)?M_PI_2:0;
//---
   result=value*(360.0/maxvalue);
   b+=result*M_PI/180;
   if(b>=2*M_PI)
      b=2*M_PI-0.02;
//---
   m_canvas.FillCircle(r,r,r,ColorToARGB(m_bg_color,m_transparency));
   m_canvas.Pie(r,r,XSize()/2,YSize()/2,a,b,ColorToARGB(m_arc_color,m_transparency),ColorToARGB(m_arc_color,m_transparency));
   m_canvas.FillCircle(r,r,r-m_scale_width,ColorToARGB(m_area_color,m_transparency));
//---
   m_canvas.FontSizeSet(m_value_font_size);
   m_canvas.TextOut(r,r,DoubleToString(value,digits),ColorToARGB(m_value_color,m_transparency),TA_CENTER|TA_VCENTER);
//---
   m_canvas.FontSizeSet(m_label_font_size);
   m_canvas.TextOut(r,r+m_label_font_size,m_label_value,ColorToARGB(m_label_color,m_transparency),TA_CENTER|TA_VCENTER);
   m_canvas.Update();
  }
//+------------------------------------------------------------------+

//+------------------------------------------------------------------+
//|                                                                  |
//|                                Copyright 2017, Alexander Fedosov |
//|                           https://www.mql5.com/en/users/alex2356 |
//+------------------------------------------------------------------+
#property copyright "Copyright 2017, Alexander Fedosov"
#property link      "https://www.mql5.com/en/users/alex2356"
#property version   "1.00"
#property indicator_plots 0
#property indicator_chart_window

#include <CustomGUI\CustomGUI.mqh>
//+------------------------------------------------------------------+
//|  Indicator inputs                                                |
//+------------------------------------------------------------------+
input double         maxspr=12;                 // Maximum value
input int            stepval=8;                 // Threshold value
input color          stepcolor=clrCrimson;      // Threshold value color
//---
CCircleArc arc;
double spr;
//+------------------------------------------------------------------+
//| Custom indicator initialization function                         |
//+------------------------------------------------------------------+
int OnInit()
  {
//---
   arc.Orientation(HORIZONTAL);
   arc.LabelValue("Spread");
   arc.Create("spread_ind",100,100);
//---
   return(INIT_SUCCEEDED);
  }
//+------------------------------------------------------------------+
//| Custom indicator iteration function                              |
//+------------------------------------------------------------------+
int OnCalculate(const int rates_total,
                const int prev_calculated,
                const datetime &time[],
                const double &open[],
                const double &high[],
                const double &low[],
                const double &close[],
                const long &tick_volume[],
                const long &volume[],
                const int &spread[])
  {
   spr=double(SymbolInfoInteger(Symbol(),SYMBOL_SPREAD));
   if(spr>=stepval)
      arc.ArcColor(stepcolor);
   else
      arc.ArcColor(clrForestGreen);
//---
   arc.NewValue(spr,maxspr,0);
//--- return value of prev_calculated for next call
   return(rates_total);
  }
//+------------------------------------------------------------------+
//| Custom indicator deinitialization function                       |
//+------------------------------------------------------------------+
void OnDeinit(const int reason)
  {
   arc.Delete();
   ChartRedraw();
  }
//+------------------------------------------------------------------+

Unlike a simple arc indication, the sectional one looks as if it has labels separating equal intervals. When creating a layout of the indicator of this type, I have decided to make ten sections and add a new element – the inner frame. The basic structure with the arc sectional indication is presented in Fig. 5.

Fig. 5. Basic structure of the circular indicator with the arc sectional indication

Displaying the arc indication with sections is completely different from the previous class, which is marked with one-time use of the Pie() method of the CCanvas library. In this method, the location of the second ellipse sector arc is modified when the value changes. Here, this method is applied ten times, and the arc locations remain static. Simply put, the indicator features 10 filled ellipse sectors following each other in a circle. Certain sections changing their colors serve as a visual indication.

Create the CircleSection.mqh file in the Indicators folder and include it in the CustomUI.mqh file like all previous ones. Now, its list looks as follows:

//+------------------------------------------------------------------+
//|                                                    CustomGUI.mqh |
//|                                Copyright 2017, Alexander Fedosov |
//|                           https://www.mql5.com/en/users/alex2356 |
//+------------------------------------------------------------------+
#include "Indicators\CircleSimple.mqh"
#include "Indicators\CircleArc.mqh"
#include "Indicators\CircleSection.mqh"

Since the indicator classes are presented in the order of complicating their construction and functionality, I will nor provide their common properties and methods. Instead, let's focus our attention on the ones that add new functionality and have a different implementation. Therefore, in the current class, most methods are similar to the previous one with the following additions:

//+------------------------------------------------------------------+
//|                                                CircleRounded.mqh |
//|                                Copyright 2017, Alexander Fedosov |
//|                           https://www.mql5.com/en/users/alex2356 |
//+------------------------------------------------------------------+
#include "..\CanvasBase.mqh"
//+--------------------------------------------------------------------------+
//| Circular indicator with numerical value and circular sectional indication|
//+--------------------------------------------------------------------------+
class CCircleSection : public CCanvasBase
  {
private:
   //--- Color of the scale active/inactive division
   color             m_scale_color_on;
   color             m_scale_color_off;
public:
   //--- Set the color of the active/inactive scale division
   void              ScaleColorOn(const color clr)                   { m_scale_color_on=clr;          }
   void              ScaleColorOff(const color clr)                  { m_scale_color_off=clr;         }
   //--- Create the indicator
   void              Create(string name,int x,int y);
   //--- Set and update the indicator value
   void              NewValue(double value,double maxvalue,int digits);
  };

The Create() and NewValue() methods are left since their implementation here is different from the previous ones. As we can see from the listing below, correction of the location relative to the radius is followed by the block for creating ten sections using a cycle. The starting point is considered: horizontal – from zero degrees, vertical – from 90 degrees.

//+------------------------------------------------------------------+
//| Create the indicator                                             |
//+------------------------------------------------------------------+
void CCircleSection::Create(string name,int x,int y)
  {
   int r=m_radius;
   double a,b;
//--- Modify the indicator location relative to the radius
   x=(x<r)?r:x;
   y=(y<r)?r:y;
   Name(name);
   X(x);
   Y(y);
   XSize(2*r+1);
   YSize(2*r+1);
   if(!CreateCanvas())
      Print("Error. Can not create Canvas.");
//--- Indicator sections
   for(int i=0;i<10;i++)
     {
      if(m_orientation==HORIZONTAL)
        {
         a=36*i*M_PI/180;
         b=36*(i+1)*M_PI/180;
         if(a>2*M_PI)
            a-=2*M_PI;
         if(b>2*M_PI)
            b-=2*M_PI;
        }
      else
        {
         a=M_PI_2+36*i*M_PI/180;
         b=M_PI_2+36*(i+1)*M_PI/180;
         if(a>2*M_PI)
            a-=2*M_PI;
         if(b>2*M_PI)
            b-=2*M_PI;
        }
      m_canvas.Pie(r,r,XSize()/2,YSize()/2,a,b,ColorToARGB(m_bg_color,m_transparency),ColorToARGB(m_scale_color_off,m_transparency));
     }
//--- Frame and background
   m_canvas.FillCircle(r,r,XSize()/2-m_scale_width,ColorToARGB(m_border_color,m_transparency));
   m_canvas.FillCircle(r,r,XSize()/2-m_scale_width-m_border_size,ColorToARGB(m_area_color,m_transparency));
//--- Description
   m_canvas.FontSizeSet(m_label_font_size);
   m_canvas.TextOut(r,r+m_value_font_size,m_label_value,ColorToARGB(m_label_color,m_transparency),TA_CENTER|TA_VCENTER);
//--- Numerical value
   m_canvas.FontSizeSet(m_value_font_size);
   m_canvas.TextOut(r,r,"0",ColorToARGB(m_value_color,m_transparency),TA_CENTER|TA_VCENTER);
   m_canvas.Update();
  }

As we have already said, in addition to changing the numerical value, the visual indication is represented in the form of a change in the sections color. The change should be sequential and based on the current and highest specified value. For example, if the numerical value is 20 and the maximum one is 100, two sections will change the color. But if the maximum one is 200, only one section changes its color. Let us consider in more detail how this is done in the NewValue() method:

//+------------------------------------------------------------------+
//| Set and update the indicator value                               |
//+------------------------------------------------------------------+
void CCircleSection::NewValue(double value,double maxvalue=100,int digits=2)
  {
//---
   int r=m_radius;
   double a,b;
   color clr;
//---
   for(int i=0;i<10;i++)
     {
      if(m_orientation==HORIZONTAL)
        {
         a=36*i*M_PI/180;
         b=36*(i+1)*M_PI/180;
         if(a>2*M_PI)
            a-=2*M_PI;
         if(b>2*M_PI)
            b-=2*M_PI;
        }
      else
        {
         a=M_PI_2+36*i*M_PI/180;
         b=M_PI_2+36*(i+1)*M_PI/180;
         if(a>2*M_PI)
            a-=2*M_PI;
         if(b>2*M_PI)
            b-=2*M_PI;
        }
      clr=(maxvalue/10*(i+1)<=value)?m_scale_color_on:m_scale_color_off;
      m_canvas.Pie(r,r,XSize()/2,YSize()/2,a,b,ColorToARGB(m_bg_color,m_transparency),ColorToARGB(clr,m_transparency));
     }
//---
   m_canvas.FillCircle(r,r,XSize()/2-m_scale_width,ColorToARGB(m_border_color,m_transparency));
   m_canvas.FillCircle(r,r,XSize()/2-m_scale_width-m_border_size,ColorToARGB(m_area_color,m_transparency));
//---
   m_canvas.FontSizeSet(m_label_font_size);
   m_canvas.TextOut(r,r+m_value_font_size,m_label_value,ColorToARGB(m_label_color,m_transparency),TA_CENTER|TA_VCENTER);
//---
   m_canvas.FontSizeSet(m_value_font_size);
   m_canvas.TextOut(r,r,DoubleToString(value,digits),ColorToARGB(m_value_color,m_transparency),TA_CENTER|TA_VCENTER);
   m_canvas.Update();
  }
//+------------------------------------------------------------------+

As we can see in the listing above, the implementation looks quite simple. The current value is checked relative to the maximum one. If it exceeds or becomes equal to the maximum value divided by the number of sections and multiplied by the current cycle iteration, the section color is changed from non-active to active.

As an example of using the class, I have implemented the drawdown indicator that displays the ratio of the equity to the current account balance. Thus, we can visually manage the drawdown on the account instead of tracking the numbers in the platform. The listing of the implementation of such an indicator is presented below.

//+------------------------------------------------------------------+
//|                                              CustomIndicator.mq5 |
//|                                Copyright 2017, Alexander Fedosov |
//|                           https://www.mql5.com/en/users/alex2356 |
//+------------------------------------------------------------------+
#property copyright "Copyright 2017, Alexander Fedosov"
#property link      "https://www.mql5.com/en/users/alex2356"
#property version   "1.00"
#property indicator_plots 0
#property indicator_chart_window

#include <CustomGUI\CustomGUI.mqh>
//---
CCircleSection ind;
//+------------------------------------------------------------------+
//| Custom indicator initialization function                         |
//+------------------------------------------------------------------+
int OnInit()
  {
//---
   ind.Radius(70);
   ind.LabelValue("Drawdown");
   ind.Create("drawdown",150,150);
//---
   return(INIT_SUCCEEDED);
  }
//+------------------------------------------------------------------+
//| Custom indicator iteration function                              |
//+------------------------------------------------------------------+
int OnCalculate(const int rates_total,
                const int prev_calculated,
                const datetime &time[],
                const double &open[],
                const double &high[],
                const double &low[],
                const double &close[],
                const long &tick_volume[],
                const long &volume[],
                const int &spread[])
  {
//---
   ind.NewValue(AccountInfoDouble(ACCOUNT_EQUITY),AccountInfoDouble(ACCOUNT_BALANCE));
//--- return value of prev_calculated for next call
   return(rates_total);
  }
//+------------------------------------------------------------------+
//| Custom indicator deinitialization function                       |
//+------------------------------------------------------------------+
void OnDeinit(const int reason)
  {
   ind.Delete();
   ChartRedraw();
  }
//+------------------------------------------------------------------+

Do not forget to use the Delete() method in deinitialization to delete the indicator from the chart correctly.

CLineGraph linear graph class

To create a linear graph using custom graphics, you should first determine the elements of the graph itself, namely:

• Graph backdrop. It is to have two features: size (which also the size of the object itself) and color.
• Graph frame. Only color. The element consists of the two filled rectangles. The coordinates of the last one (which also serves as the graph background) are shifted by one providing the frame effect.
• Graph background. Only color. 
• Graph axes. Only color. Implemented the same way as the graph frame by overlaying two rectangles, where the upper one shifts the coordinates by one.
• Axis scale. Only color. Set of lines implemented using the LineHorizontal() methods for Y axis and LineVertical() for Х axis.
• Axis value. Color and font size properties. Set of text objects using the TextOut() method.
• Grid. Only color. The LineAA() method is selected for implementing the grid, since it allows to set the line style.
• Graph. Only color. The element consists of line and filled circle — the FillCircle() method. 

//+------------------------------------------------------------------+
#include "Indicators\CircleSimple.mqh"
#include "Indicators\CircleArc.mqh"
#include "Indicators\CircleSection.mqh"
#include "Indicators\LineGraph.mqh"
//+------------------------------------------------------------------+

//+------------------------------------------------------------------+
//|                                                    LineGraph.mqh |
//|                                Copyright 2017, Alexander Fedosov |
//|                           https://www.mql5.com/en/users/alex2356 |
//+------------------------------------------------------------------+
#include "..\CanvasBase.mqh"
//+------------------------------------------------------------------+
//| Linear graph                                                     |
//+------------------------------------------------------------------+
class CLineGraph : public CCanvasBase
  {
private:
   //--- Graph backdrop color
   color             m_bg_color;
   //--- Graph background color
   color             m_bg_graph_color;
   //--- Graph frame color
   color             m_border_color;
   //--- Graph axes values color
   color             m_axis_color;
   //--- Graph grid color
   color             m_grid_color;
   //--- Graph axes scale color
   color             m_scale_color;
   //--- Graph line color
   color             m_graph_color;
   //--- Graph size
   int               m_x_size;
   int               m_y_size;
   //--- Graph indent from the backdrop edge
   int               m_gap;
   //--- Value font size on graph axes
   int               m_font_size;
   //--- Array of Y axis values
   int               m_x[];
   //--- Minimum and maximum Y axis value
   double            m_y_min;
   double            m_y_max;
   //--- Number of Y axis scales
   int               m_num_grid;
   //--- Graph transparency
   uchar             m_transparency;
public:
                     CLineGraph(void);
                    ~CLineGraph(void);
   //--- Set and get the graph backdrop color
   color             BgColor(void)                                   { return(m_bg_color);                  }
   void              BgColor(const color clr)                        { m_bg_color=clr;                      }
   //--- Set and get the graph background color
   color             BgGraphColor(void)                              { return(m_bg_graph_color);            }
   void              BgGraphColor(const color clr)                   { m_bg_graph_color=clr;                }
   //--- Set and get the graph frame color
   color             BorderColor(void)                               { return(m_border_color);              }
   void              BorderColor(const color clr)                    { m_border_color=clr;                  }
   //--- Set and get the color of the graph axes values
   color             AxisColor(void)                                 { return(m_axis_color);                }
   void              AxisColor(const color clr)                      { m_axis_color=clr;                    }
   //--- Set and get the graph grid color
   color             GridColor(void)                                 { return(m_grid_color);                }
   void              GridColor(const color clr)                      { m_grid_color=clr;                    }
   //--- Set and get the graph axes scale color
   color             ScaleColor(void)                                { return(m_scale_color);               }
   void              ScaleColor(const color clr)                     { m_scale_color=clr;                   }
   //--- Set and get the graph line color
   color             GraphColor(void)                                { return(m_graph_color);               }
   void              GraphColor(const color clr)                     { m_graph_color=clr;                   }
   //--- Set and get the graph size
   int               XGraphSize(void)                                { return(m_x_size);                    }
   void              XGraphSize(const int x_size)                    { m_x_size=x_size;                     }
   int               YGraphSize(void)                                { return(m_y_size);                    }
   void              YGraphSize(const int y_size)                    { m_y_size=y_size;                     }
   //--- Set and get the value font size on the graph axes
   int               FontSize(void)                                  { return(m_font_size);                 }
   void              FontSize(const int fontzise)                    { m_font_size=fontzise;                }
   //--- Set and get the raph indent from the backdrop edge
   int               Gap(void)                                       { return(m_gap);                       }
   void              Gap(const int g)                                { m_gap=g;                             }
   //--- Set and get the minimum and maximum Y axis value
   double            YMin(void)                                      { return(m_y_min);                     }
   void              YMin(const double ymin)                         { m_y_min=ymin;                        }
   double            YMax(void)                                      { return(m_y_max);                     }
   void              YMax(const double ymax)                         { m_y_max=ymax;                        }
   //--- Set and get the number of Y axis scales
   int               NumGrid(void)                                   { return(m_num_grid);                  }
   void              NumGrid(const int num)                          { m_num_grid=num;                      }
   //--- Create the graph
   void              Create(string name,int x,int y);
   //--- Delete the graph 
   void              Delete(void);
   //--- Set the inputs array
   void              SetArrayValue(double &data[]);
private:
   //---
   void              VerticalScale(double min,double max,int num_grid);
   void              HorizontalScale(int num_grid);
  };

//+------------------------------------------------------------------+
//| Create the graph                                                 |
//+------------------------------------------------------------------+
void CLineGraph::Create(string name,int x,int y)
  {
//--- Modify the indicator location relative to
   x=(x<m_x_size/2)?m_x_size/2:x;
   y=(y<m_y_size/2)?m_y_size/2:y;
   Name(name);
   X(x);
   Y(y);
   XSize(m_x_size);
   YSize(m_y_size);
   if(!CreateCanvas())
      Print("Error. Can not create Canvas.");
//--- Create the graph frame and backdrop
   m_canvas.FillRectangle(0,0,XSize(),YSize(),ColorToARGB(m_border_color,m_transparency));
   m_canvas.FillRectangle(1,1,XSize()-2,YSize()-2,ColorToARGB(m_bg_color,m_transparency));
//--- Create axes and graph background
   m_canvas.FillRectangle(m_gap-1,m_gap-1,XSize()-m_gap+1,YSize()-m_gap+1,ColorToARGB(m_border_color,m_transparency));
   m_canvas.FillRectangle(m_gap,m_gap,XSize()-m_gap,YSize()-m_gap,ColorToARGB(m_bg_graph_color,m_transparency));
//--- Create axis scales and their values
   VerticalScale(m_y_min,m_y_max,m_num_grid);
   HorizontalScale(5);
   m_canvas.Update();
  }

//+------------------------------------------------------------------+
//| Set the input array                                              |
//+------------------------------------------------------------------+
void CLineGraph::SetArrayValue(double &data[])
  {
   int y0,y1;
//---  Create the graph frame and backdrop
   m_canvas.FillRectangle(0,0,XSize(),YSize(),ColorToARGB(m_border_color,m_transparency));
   m_canvas.FillRectangle(1,1,XSize()-2,YSize()-2,ColorToARGB(m_bg_color,m_transparency));
//--- Create the axes and the graph background
   m_canvas.FillRectangle(m_gap-1,m_gap-1,XSize()-m_gap+1,YSize()-m_gap+1,ColorToARGB(m_border_color,m_transparency));
   m_canvas.FillRectangle(m_gap,m_gap,XSize()-m_gap,YSize()-m_gap,ColorToARGB(m_bg_graph_color,m_transparency));
//--- If the maximum data array value exceeds the upper Y border, the axis is scaled.
   if(data[ArrayMaximum(data)]>m_y_max)
      m_y_max=data[ArrayMaximum(data)];
//--- Create the axis scales and their values
   VerticalScale(m_y_min,m_y_max,m_num_grid);
   HorizontalScale(ArraySize(data));
//--- Create the graph by the data array
   for(int i=0;i<ArraySize(data)-1;i++)
     {
      y0=int((YSize()-2*m_gap)*(1-data[i]/m_y_max));
      y0=int((YSize()-m_gap)-(YSize()-2*m_gap)/m_y_max*data[i]);
      y0=(y0<m_gap)?m_gap:y0;
      y1=int((YSize()-m_gap)-(YSize()-2*m_gap)/m_y_max*data[i+1]);
      y1=(y1<m_gap)?m_gap:y1;
      m_canvas.LineAA(m_x[i+1],y0,m_x[i+2],y1,ColorToARGB(m_graph_color,m_transparency),STYLE_SOLID);
      m_canvas.FillCircle(m_x[i+1],y0,2,ColorToARGB(m_graph_color,m_transparency));
      m_canvas.FillCircle(m_x[i+2],y1,2,ColorToARGB(m_graph_color,m_transparency));
     }
   m_canvas.Update();
  }

//+------------------------------------------------------------------+
//|                                                            4.mq5 |
//|                                Copyright 2017, Alexander Fedosov |
//|                           https://www.mql5.com/en/users/alex2356 |
//+------------------------------------------------------------------+
#property copyright "Copyright 2017, Alexander Fedosov"
#property link      "https://www.mql5.com/en/users/alex2356"
#property version   "1.00"
#property indicator_plots 0
#property indicator_chart_window

#include <CustomGUI\CustomGUI.mqh>
//---
CLineGraph ind;
int InpInd_Handle;
double rsi[];
//+------------------------------------------------------------------+
//| Custom indicator initialization function                         |
//+------------------------------------------------------------------+
int OnInit()
  {
//---- get the indicator handle
   InpInd_Handle=iRSI(Symbol(),PERIOD_CURRENT,10,PRICE_CLOSE);
   if(InpInd_Handle==INVALID_HANDLE)
     {
      Print("Failed to get indicator handle");
      return(INIT_FAILED);
     }
//---
   ind.NumGrid(10);
   ind.YMax(100);
   ind.Create("rsi",350,250);

//---
   return(INIT_SUCCEEDED);
  }
//+------------------------------------------------------------------+
//| Custom indicator iteration function                              |
//+------------------------------------------------------------------+
int OnCalculate(const int rates_total,
                const int prev_calculated,
                const datetime &time[],
                const double &open[],
                const double &high[],
                const double &low[],
                const double &close[],
                const long &tick_volume[],
                const long &volume[],
                const int &spread[])
  {
//---
   if(CopyBuffer(InpInd_Handle,0,0,10,rsi)<=0)
      return(0);
   ind.SetArrayValue(rsi);
//--- return value of prev_calculated for next call
   return(rates_total);
  }
//+------------------------------------------------------------------+
//| Custom indicator deinitialization function                       |
//+------------------------------------------------------------------+
void OnDeinit(const int reason)
  {
   ind.Delete();
   ChartRedraw();
  }
//+------------------------------------------------------------------+

Note that the array the data is written to using the CopyBuffer method should have the original form. Unlike time series, no indexation change is required.