Adding Technical Indicators

Overview

A technical indicator is a type of analysis chart that indicates market direction. Indicators generally overlay on price chart data to indicate where the price is going, or whether the price is in an "overbought" condition or an "oversold" condition.

AnyChart Stock Chart Component supports automatic building of several types of technical indicators. Technical indicators are based on data from data providers and do not depend on series.

to top

Adding Indicator

You can add technical indicator to the chart only when its Data Provider is ready, and there is a Data Set, which contains data for Data Provider.

Here is a sample series definition XML:

Please note that this XML doesn't show data set and data provider definition.

 

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         <technical_indicators>
07           <technical_indicator type="SMA" data_provider="dpMsft">
08             <sma_indicator period="20">
09               <series type="Line" color="DarkRed">
10                 <name><![CDATA[SMA(20)]]></name>
11               </series>
12             </sma_indicator>
13           </technical_indicator>
14         </technical_indicators>
15       </chart>
16     </charts>
17   </settings>
18 </stock>
01{
02  settings: {
03    charts: [
04      {
05        technicalIndicators: [
06          {
07            type: "SMA",
08            dataProvider: "dpMsft",
09            smaIndicator: {
10              period: 20,
11              series: {
12                type: "Line",
13                color: "DarkRed",
14                name: "SMA(20)"
15              }
16            }
17          }
18        ]
19      }
20    ]
21  }
22}

As you can see there is a <technical_indicators> node with <technical_indicator> in it. Each indicator has the following common required attributes:

Attribute Description
type Sets the type of technical indicator
data_provider Sets the Data Provider.

to top

Indicator and Series on the Same Chart - SMA Sample

Take a look at the basic sample of the chart that contain two technical indicators: SMA(20) and SMA(50) that are displayed as the lines on the same chart with price line series:

Live Sample:  Adding Technical Indicators - SMA Basic

to top

Indicator and Series on the different Charts - ROC Sample

Take a look at the basic sample of the chart that contains ROC(12) that is displayed as the lines the synchronized chart below the main chart:

Live Sample:  Adding Technical Indicators - ROC Basic

Further configuration of the way the indicator is displayed on the chart and settings of analysis related parameters are done in a different way for each type of indicator. In the sample above that's the <sma_indicator> node with period attribute defined and <series> of Line type that describes how to color Simple Moving Average line on the chart. See more information about indicator types and their configuration below.

to top

Indicator Types and Configuration

To see the list of supported indicator types and study how to configure appearance and parameters please see:

to top