DMI Indicator

Overview

The concept of Directional Movement is based on the assumption that in an upward trend today’s highest price is higher than yesterday’s highest price, and in a downward trend today’s lowest price is lower than yesterday’s lowest price. If this is the case, it is a matter of the so-called Outside Days. The difference between today’s high and yesterday’s high corresponds to the Plus Directional Movement (+DI). The difference between today’s low and yesterday’s low is the Minus Directional Movement (-DI). These Outside Days consist of a +DI as well as an -DI. Modified moving average of the difference of +DI and -DI divided by the sum of +DI and -DI, multiplied by 100 is an ADX.

Days in which yesterday’s highest price or yesterday’s lowest price are not exceeded are described as Inside Days and contain a +DI and a -DI, or zero. Do not let the plus or minus sign designation mislead you. They only indicate upward or downward movement, not values. The directional movement value is always a positive number of absolute value, regardless of upward or downward movement. In the Directional Movement calculation, Inside Days are consequently not taken into account. It is possible for the directional movement to be zero. This occurs when the current trading range is inside the previous trading range, or when the trading ranges, current versus previous, are equal.

Mathematical description of the indicator please see at: Mathematical Description of Technical Indicators

to top

Adding indicator

To add any indicator to the chart, you need to use Data Provider with the fields required by the indicator. When such Data Provider is ready - you can add indicator to the chart.

Preparing Data Provider

DMI indicator needs data provider with High, Low and Close or Value fields.

Sample XML/JSON of Data Provider, which can be used to create DMI indicator:

XML/JSON Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <stock xmlns="http://anychart.com/products/stock/schemas/1.9.0/schema.xsd">
03   <data>
04     <data_providers>
05       <general_data_providers>
06         <data_provider data_set="dataSet1" id="dp1">
07           <fields>
08             <field type="High" column="2" approximation_type="High" />
09             <field type="Low" column="3" approximation_type="Low" />
10             <field type="Close" column="4" approximation_type="Close" />
11           </fields>
12         </data_provider>
13       </general_data_providers>
14     </data_providers>
15   </data>
16 </stock>
01{
02  data: {
03    dataProviders: {
04      generalDataProviders: [
05        {
06          dataSet: "dataSet1",
07          id: "dp1",
08          fields: [
09            {
10              type: "High",
11              column: 2,
12              approximationType: "High"
13            },
14            {
15              type: "Low",
16              column: 3,
17              approximationType: "Low"
18            },
19            {
20              type: "Close",
21              column: 4,
22              approximationType: "Close"
23            }
24          ]
25        }
26      ]
27    }
28  }
29}

to top

Indicator Declaration

As soon as Data Provider is ready you can add an indicator to a chart.

DMI indicator is usually shown on the chart above or below the chart with data (stock data). So we should declare it in another chart. Learn more about charts and layout in Chart Layout article.

XML/JSON for DMI declaration, note that there are two charts defined - one is used to show the stock data, and another one contains technical indicator:

XML/JSON Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <stock xmlns="http://anychart.com/products/stock/schemas/1.9.0/schema.xsd">
03   <settings>
04     <charts>
05       <chart>
06         <series_list>
07           <series type="Line" data_provider="dpMsft" />
08         </series_list>
09       </chart>
10       <chart>
11         <technical_indicators>
12           <technical_indicator type="DMI" data_provider="dpMsft" />
13         </technical_indicators>
14       </chart>
15     </charts>
16   </settings>
17 </stock>
01{
02  settings: {
03    charts: [
04      {
05        seriesList: [
06          {
07            type: "Line",
08            dataProvider: "dpMsft"
09          }
10        ]
11      },
12      {
13        technicalIndicators: [
14          {
15            type: "DMI",
16            dataProvider: "dpMsft"
17          }
18        ]
19      }
20    ]
21  }
22}

After all things mentioned above are done, you can create a chart with DMI indicator, see basic Live Sample with it below:

Live Sample:  Technical Indicators - Adding DMI Indicator

to top

Indicator parameters

DMI indicator has three type specific parameters - DM period, DM smoothing type and ADX period. All three are set in <dmi_indicator> node, where all settings for DMI indicator are set.

XML/JSON for setting DMI parameters:

XML/JSON Syntax
Plain code
01 <chart>
03     <technical_indicator type="DMI" data_provider="dpMsft">
04       <dmi_indicator period="25" use_wilders_smoothing="true" adx_period="25" />
05     </technical_indicator>
07 </chart>
01{
03    {
04      type: "DMI",
05      dataProvider: "dpMsft",
06      dmiIndicator: {
07        period: 25,
08        useWildersSmoothing: true,
09        adxPeriod: 25
10      }
11    }
12  ]
13}

As you can see you just need to set period, adx_period and use_wilders_smoothing attributes in <dmi_indicator> node, period and adx_period attribute accept any integer greater than 1, and smoothing one accepts boolean values. Smoothing can be made by original Wilder's smoothing technic or as an exponential moving average.

Live sample below shows DMI(25) with Wilder smoothing:

Live Sample:  Technical Indicators - DMI Parameters

to top

Visualization

To visualize and tune visualization of technical indicators AnyChart Stock Component uses the same methods as for the data series.

DMI indicator settings are contained in <dmi_indicator> node, also in this node you can put three subnodes: <pdi_series>, <ndi_series> and <adx_series> - these nodes define how exactly indicator is displayed on the chart. These nodes are identical to <series> node used to describe data series, so you can do with indicator anything you can do with series.

Note: By default ADX series is disabled in order to maintain backward compatibility, you need to enable it explicitly if you want to display it.

Sample XML/JSON for changing indicator visualization:

XML/JSON Syntax
Plain code
01 <chart>
03     <technical_indicator type="DMI" data_provider="dpMsft">
04       <dmi_indicator period="25">
05         <pdi_series type="Line" color="#1b8d1b">
06           <name><![CDATA[+DI(25)]]></name>
07           <line_series thickness="2" />
08         </pdi_series>
09         <ndi_series type="Line" color="#d01414">
10           <name><![CDATA[-DI(25)]]></name>
11           <line_series thickness="2" />
12         </ndi_series>
13         <adx_series type="Line" color="#FF0000" enabled="true">
14           <name><![CDATA[ADX(25)]]></name>
15           <line_series thickness="2" />
16         </adx_series>
17       </dmi_indicator>
18     </technical_indicator>
20 </chart>
01{
03    {
04      type: "DMI",
05      dataProvider: "dpMsft",
06      dmiIndicator: {
07        period: 25,
08        pdiSeries: {
09          type: "Line",
10          color: "#1b8d1b",
11          name: "+DI(25)",
12          lineSeries: {
13            thickness: 2
14          }
15        },
16        ndiSeries: {
17          type: "Line",
18          color: "#d01414",
19          name: "-DI(25)",
20          lineSeries: {
21            thickness: 2
22          }
23        },
24        adxSeries: {
25          type: "Line",
26          color: "#FF0000",
27          enabled: true,
28          name: "ADX(25)",
29          lineSeries: {
30            thickness: 2
31          }
32        }
33      }
34    }
35  ]
36}

Live sample below shows settings shown above:

Live Sample:  Technical Indicators - DMI Visualization Settings

to top