Navigator
The Navigator allows the user to zoom or scroll through the data over a certain period of time. The Navigator can be used will all types of stock charts.
In this article you will find:
Basics
To enable data navigation you have to:
- set up a
<TelerikStockChart> - add a
<StockChartNavigator>inside the main<TelerikStockChart> - add a
<StockChartNavigatorSeries>to the<StockChartNavigatorSeriesItems>collection. - set its
Typeproperty to one of the following:StockChartSeriesType.ColumnStockChartSeriesType.AreaStockChartSeriesType.LineStockChartSeriesType.CandlestickStockChartSeriesType.OHCL
- provide a data model collection to its
Dataproperty. The data source should be the same as the one used for the<StockChartSeries>. - set the following properties depending on what
Typethe Navigator is:
Column,AreaandLine-FieldandCategoryFieldto the corresponding fields in the model that carry the valuesOHLCandCandlestick-OpenField,ClosedField,HighFieldandLowFieldproperties to the corresponding fields in the model that carry the values.
Data Navigation in a stock chart.
Navigator Settings
The Navigator is defined closely to the way the charts are. As such you can use the nested tags settings to apply different customizations.
To programmatically set a time interval to the Navigator upon initialization use the From and To parameters of the <StockChartNavigatorSelect> and pass valid DateTime values according to your data.
To control whether the Navigator renders below or on top of the Stock Chart, set the Position parameter to a member of the StockChartNavigatorPosition enum.
You can control from which side (or both) the data navigation with shorten the time interval when the users cursor is located inside Navigator and is using the mouse wheel. To set it use the Zoom parameter of the <StockChartNavigatorSelectMousewheel>, child of <StockChartNavigatorSelect> to a member of the ChartMousewheelZoom enum:
ChartMousewheelZoom.LeftChartMousewheelZoom.RightChartMousewheelZoom.Both
Common settings for the Navigator