01 | { |
02 | dataSet: "dataSet1", |
03 | id: "dpS1", |
04 | fields: [ |
05 | { |
06 | type: "Value", |
07 | column: 4, |
08 | approximationType: "Close" |
09 | } |
10 | ] |
11 | } |
Stepline Series
- Overview
- Adding Stepline Series
- Configuring Visualization
- Legend Element
- Tooltip
- Joining StepLine with Missing Points
- Defaults Section
Overview
Data that is arranged in columns or rows on a worksheet can be plotted in a Stepline chart. Stepline charts can display continuous data over time, set against a common scale, and are therefore ideal for showing trends in data at equal intervals.
Adding Stepline Series
Before you can add Stepline series to the chart you need to prepare Data Provider. You need one field to create Stepline chart: value. So the Data Provider should contain this field.
Data Provider
Sample XML for Stepline Data Provider:
XML/JSON Syntax
01 |
<data_provider data_set="dataSet1" id="dpS1"> |
02 |
<fields> |
03 |
<field type="Value" column="4" approximation_type="Close" /> |
04 |
</fields> |
05 |
</data_provider> |
As you can see only one value field is defined. Now you can declare series that will use this Data Provider.
Stepline Series Declaration
XML syntax to declare series with Data Provider shown above:
XML/JSON Syntax
01 |
<chart> |
02 |
<series_list> |
03 |
<series type="StepLine" color="#253992" data_provider="dpS1"> |
04 |
<line_series thickness="2" /> |
06 |
</series> |
07 |
</series_list> |
08 |
</chart> |
01 | { |
02 | seriesList: [ |
03 | { |
04 | type: "StepLine", |
05 | color: "#253992", |
06 | dataProvider: "dpS1", |
07 | lineSeries: { |
08 | thickness: 2 |
09 | }, |
10 | name: "MSFT" |
11 | } |
12 | ] |
13 | } |
Let's put this together and create the very basic Stepline sample:
Live Sample: Stepline Series
Configuring Visualization
All visual and specific settings for Stepline series are set in <line_series> in <series> node.
The thickness of line is set using thickness attribute: <line_series thickness="3">, which accepts values in pixels.
Sample XML with width and and different visualization:
XML/JSON Syntax
01 |
<series type="StepLine" color="DarkRed" data_provider="dpS1"> |
02 |
<line_series thickness="3" opacity="0.5" /> |
04 |
</series> |
01 | { |
02 | type: "StepLine", |
03 | color: "DarkRed", |
04 | dataProvider: "dpS1", |
05 | lineSeries: { |
06 | thickness: 3, |
07 | opacity: 0.5 |
08 | }, |
09 | name: "MSFT" |
10 | } |
Live Sample below shows to charts with different Stepline series, each with own specific settings:
Live Sample: Stepline Series Visual Settings
Legend Element
For each series you can define its element in legend. This element contains the settings for the formatting string of the text in legend that represents the series. Configuration of such elements is described in Legend: Series Labels article.
Tooltips
You can either use global tooltip settings or create personal tooltips for each series. See detailed description in Tooltips tutorial.
Joining StepLine with Missing Points
XML/JSON Syntax
01 |
<series type="StepLineArea" data_provider="dp1" color="#005ECB"> |
02 |
<area_series connect_missing_points="true" /> |
03 |
</series> |
01 | { |
02 | type: "StepLineArea", |
03 | dataProvider: "dp1", |
04 | color: "#005ECB", |
05 | areaSeries: { |
06 | connectMissingPoints: true |
07 | } |
08 | } |
Live Sample shows two similar series: one with with connect_missing_points set to true and another - to false.
Live Sample: StepLine Series - Connect Missing Points Settings
Defaults Section
There is a special section to set default values in AnyChart Stock component XML: <series_settings_defaults>, where you can define marker and value highlighter settings for all series of the given type in one place, instead of setting them for each series individually.
For example, to configure line in one chart for all series of Stepline type just set:
XML/JSON Syntax
01 |
<chart> |
03 |
<line_series thickness="3" opacity="0.5"> |
05 |
</line_series> |
06 |
</series_settings_defaults> |
07 |
</chart> |
01 | { |
02 | seriesSettingsDefaults: { |
03 | lineSeries: { |
04 | thickness: 3, |
05 | opacity: 0.5, |
06 | marker: { |
07 | size: 10 |
08 | } |
09 | } |
10 | } |
11 | } |
Live sample below has three series of Stepline type. All common settings defined in <line_series/> node :
Live Sample: Stepline Series - Using Defaults Section
