Series is a visual representation of the data provider on the chart. Several series can show the same data provider in different way (for example as a Line and as an Area) and in different charts. There are several types of series and each of them has the list of required named fields that should be declared in data provider.
AnyChart Stock supports several types of series, each chart can contain one or several series and there is no limitation on the number of series, but it is not recommended to use more than ten series on one chart because the large number of series make your charts unreadable.
You can add series to the chart only when its Data Provider is ready, and there is a Data Set, which contains data for Data Provider.
See below a sample series definition XML:
Please note that this XML doesn't show data set and data provider definition.
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="s1" color="#26499D"> |
09 |
</series> |
10 |
</series_list> |
11 |
</chart> |
12 |
</charts> |
13 |
</settings> |
14 |
</stock> |
01 | { |
02 | settings: { |
03 | charts: [ |
04 | { |
05 | seriesList: [ |
06 | { |
07 | type: "Line", |
08 | dataProvider: "s1", |
09 | color: "#26499D", |
10 | name: "^IXIC" |
11 | } |
12 | ] |
13 | } |
14 | ] |
15 | } |
16 | } |
<series> node has the following required attributes:
| Attributes | Description |
|---|---|
| type | Series type. AnyChart Stock Component support several chart types. |
| data_provider | Sets the Data Provider. Required attribute. |
| color | Sets the color of the series. When the color isn't set - the series is drawn in Black. |
and the following subnodes:
| Subnodes | Description |
|---|---|
| <name> | This subnode contains the name of the series. This name is used legend. It is required parameter. |
AnyChart Stock Component supports several series types and each type requires certain named fields to be declared in the data set. In terms of XML this means the following: if you declare, for example, the series of RangeArea type - the data provider should contain fields with high and low fields. See XML below for the clarification:
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_sets> |
05 |
<data_set id="dataSet1" source_url="./sample-data/weather_data.csv" /> |
06 |
</data_sets> |
07 |
<data_providers> |
09 |
<data_provider data_set="dataSet1" id="dp1"> |
10 |
<fields> |
11 |
<field type="High" column="2" approximation_type="High" /> |
12 |
<field type="Low" column="3" approximation_type="Low" /> |
13 |
</fields> |
14 |
</data_provider> |
15 |
</general_data_providers> |
16 |
</data_providers> |
17 |
</data> |
18 |
<settings> |
19 |
<charts> |
20 |
<chart> |
21 |
<series_list> |
22 |
<series type="RangeArea" data_provider="dp1" color="#DC3912"> |
24 |
</series> |
25 |
</series_list> |
26 |
</chart> |
27 |
</charts> |
28 |
</settings> |
29 |
</stock> |
01 | { |
02 | data: { |
03 | dataSets: [ |
04 | { |
05 | id: "dataSet1", |
06 | sourceUrl: "./sample-data/weather_data.csv" |
07 | } |
08 | ], |
09 | dataProviders: { |
10 | generalDataProviders: [ |
11 | { |
12 | dataSet: "dataSet1", |
13 | id: "dp1", |
14 | fields: [ |
15 | { |
16 | type: "High", |
17 | column: 2, |
18 | approximationType: "High" |
19 | }, |
20 | { |
21 | type: "Low", |
22 | column: 3, |
23 | approximationType: "Low" |
24 | } |
25 | ] |
26 | } |
27 | ] |
28 | } |
29 | }, |
30 | settings: { |
31 | charts: [ |
32 | { |
33 | seriesList: [ |
34 | { |
35 | type: "RangeArea", |
36 | dataProvider: "dp1", |
37 | color: "#DC3912", |
38 | name: "High/Low Temp. (C)" |
39 | } |
40 | ] |
41 | } |
42 | ] |
43 | } |
44 | } |
The table below shows the list of supported series types and required fields.
| Series Type | Required fields |
|---|---|
| Line | "value" or "close" |
| Spline | "value" or "close" |
| SplineArea | "value" or "close" |
| Bar | "value" or "close" |
| Area | "value" or "close" |
| RangeArea | "high", "low" |
| RangeBar | "high", "low" |
| RangeSplineArea | "high", "low" |
| StepLine | "value" or "close" |
| StepLineArea | "value" or "close" |
| Candlestick | "open", "high", "low", "close" |
| OHLC | "open", "high", "low", "close" |
| Marker | "value" or "close" |
| Stick | "value" or "close" |
Each series type has a lot of configuration options, some of these options are common for all types and some are unique, to learn more about possible settings please see: