Rate of change (ROC) is a simple technical analysis indicator showing the difference between today's closing price and the close N days ago.
AnyChart Stock allows you to add ROC with desired period to any of your charts.
Mathematical description of the indicator please see at: Mathematical Description of Technical Indicators
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.
ROC indicator needs Data Provider with Close or Value fields.
Sample XML of Data Provider, which can be used to create ROC indicator:
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> |
06 |
<data_provider data_set="dataSet1" id="dpMsft"> |
07 |
<fields> |
08 |
<field type="Value" column="4" approximation_type="Close" /> |
09 |
</fields> |
10 |
</data_provider> |
11 |
</general_data_providers> |
12 |
</data_providers> |
13 |
</data> |
14 |
</stock> |
01 | { |
02 | data: { |
03 | dataProviders: { |
04 | generalDataProviders: [ |
05 | { |
06 | dataSet: "dataSet1", |
07 | id: "dpMsft", |
08 | fields: [ |
09 | { |
10 | type: "Value", |
11 | column: 4, |
12 | approximationType: "Close" |
13 | } |
14 | ] |
15 | } |
16 | ] |
17 | } |
18 | } |
19 | } |
As soon as Data Provider is ready you can add an indicator to a chart.
ROC indicator is usually shown on the chart 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 for ROC declaration, note that there are two charts defined - one is used to show the stock data, and another one contains technical indicator:
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="ROC" data_provider="dpMsft" /> |
08 |
</technical_indicators> |
09 |
</chart> |
10 |
<chart> |
11 |
<series_list> |
12 |
<series type="Line" data_provider="dpMsft" /> |
13 |
</series_list> |
14 |
</chart> |
15 |
</charts> |
16 |
</settings> |
17 |
</stock> |
01 | { |
02 | settings: { |
03 | charts: [ |
04 | { |
05 | technicalIndicators: [ |
06 | { |
07 | type: "ROC", |
08 | dataProvider: "dpMsft" |
09 | } |
10 | ] |
11 | }, |
12 | { |
13 | seriesList: [ |
14 | { |
15 | type: "Line", |
16 | dataProvider: "dpMsft" |
17 | } |
18 | ] |
19 | } |
20 | ] |
21 | } |
22 | } |
Live Sample:
Rate of Change has only one type specific parameter - period. Period is set in <roc_indicator> node, where all settings for ROC indicator are set.
XML for setting ROC period:
01 |
<chart> |
02 |
<technical_indicators> |
03 |
<technical_indicator type="ROC" data_provider="dpMsft"> |
04 |
<roc_indicator period="30" /> |
05 |
</technical_indicator> |
06 |
</technical_indicators> |
07 |
</chart> |
01 | { |
02 | technicalIndicators: [ |
03 | { |
04 | type: "ROC", |
05 | dataProvider: "dpMsft", |
06 | rocIndicator: { |
07 | period: 30 |
08 | } |
09 | } |
10 | ] |
11 | } |
As you can see you just need to set period attribute in <roc_indicator> node, this attribute accepts any integer greater than 1.
Live sample below shows ROC(30):
To visualize and tune visualization of technical indicators AnyChart Stock Component uses the same methods as for the data series.
By default ROC is shown as series of Line type, but you can use almost any of available series types to show it on the chart - Spline, Area or Stick, for example.
ROC indicator settings are contained in <roc_indicator> node, also in this node you can put <series> subnode - this node defines how exactly indicator is displayed on the chart. This node is identical to <series> node used to describe data series, so you can do with indicator anything you can do with series.
Sample XML for changing indicator visualization:
01 |
<chart> |
02 |
<technical_indicators> |
03 |
<technical_indicator type="ROC" data_provider="dpMsft"> |
04 |
<roc_indicator period="12"> |
07 |
<line_series thickness="2" opacity="1" /> |
08 |
</series> |
09 |
</roc_indicator> |
10 |
</technical_indicator> |
11 |
</technical_indicators> |
12 |
</chart> |
01 | { |
02 | technicalIndicators: [ |
03 | { |
04 | type: "ROC", |
05 | dataProvider: "dpMsft", |
06 | rocIndicator: { |
07 | period: 12, |
08 | series: { |
09 | type: "Spline", |
10 | color: "#7C8514", |
11 | name: "Rate of Change(12)", |
12 | lineSeries: { |
13 | thickness: 2, |
14 | opacity: 1 |
15 | } |
16 | } |
17 | } |
18 | } |
19 | ] |
20 | } |
Live sample below shows settings shown above:
