Obtaining Actual Chart Information
Overview
When you create a Rich Internet Application and use AnyChart Stock Component you can always determine what happens on the chart, what values are shown, hovered, what range is shown and even more.
This article describes basic functions that are used to obtain actual chart data and features a lot of samples that help to understand how all these functions are used.
Current Date
One of the first things one would want to know is the current date - date that user currently hovers. This date comes as the parameter in the following chart mouse events:
| Event | Description |
|---|---|
| onChartMouseDown | This event is dispatched when the mouse button is pressed above the chart. |
| onChartMouseMove | This event is dispatched when the mouse is moving above the chart. |
| onChartMouseOver | This event is dispatched when the chart is hovered by mouse. |
| onChartMouseUp | This event is dispatched when the mouse button is released. |
Please note that these events are fired only when user moves the mouse over the plotting area, which is highlighted for the one of the charts (and applies to the one below as well) on the illustration below:
Full events guide is available in Events Handling article and chart events comprehensive sample is available at:
Current Values
When any of the events described in the section above are fired you can use several "get value" methods to get Current Values of the series. These methods return object that holds more information, than only current value of some field - the structure of this object is described below:
Current Object
Current object returned by any "get value" method has the properties listed in the table:
| Property Name | Description |
|---|---|
| first | Value of the field from the first point in a series. |
| last | Value of the field from the last point in a series. |
| firstVisible | Value of the field from the first visible point in a series. |
| lastVisible | Value of the field from the last visible point in a series. |
| min | Minimal value of the field in a series. |
| max | Maximal value of the field in a series. |
| minVisible | Minimal value of the field in the visible range of a series. |
| maxVisible | Maximal value of the field in the visible range of a series. |
| current | Value of the field from the point with the hovered date. If series doesn't have a point with the hovered date property returns empty string. |
Illustration shows what properties mean basing on the sample of the object returned by getSeriesValue(). You can see the chart in the state when user zoomed to some range and all series data is not shown on the screen. Blue regions on the left and on the right are imaginable - user can't see the first and the last point, but these values can be obtained:
Depending on the series or indicator type you can use different set of "get value" methods and their use is a little bit different in every case. Below you can find sample and nuance notes for all methods and series types.
One value
Series of the following types: Line, Spline, SplineArea, Bar, Area, StepLine, StepLineArea, Marker, Stick - are based on one value, and only one method is used to get this value:
The use of this method is demonstrated in the sample:
Two values
Series of RangeArea, RangeBar and RangeSplineArea are based on two values, so we need two methods to obtain full information:
You can learn how to handle this situation in the sample:
Four values
Two series types are based on four values: Candlestick and OHLC, and there are four methods for them:
Working with four values is, actually, pretty much the same as one or two values, and here is a sample for that:
Changes
When Y Axis scale mode is set to "Changes" or "PercentChanges" the chart displays in other way, than it does in "Values", and you can use two special functions to obtain the changes:
Note that you can use getSeriesValue function too, even when the chart is in changes mode.
Using these functions is demonstrated in two samples:
Custom fields
Besides the fields with charted data you can use any number of additional fields in data sets and data providers, and have access to them in tooltips, legend and from JavaScript. You can work with them in the same way, as with all other fields and get the first, the last, first visible and so on, as described above.
Creation of custom fields is described in Data Provider Configuration: Custom Fields and to get the values of these fields you should use:
This feature is demonstrated in the sample:
Technical indicators
Obtaining actual data from technical indicators is a little bit different from the series, because of their complex nature: most of the technical indicators consist of several series of different type. But this complexness just adds one step to the procedure of obtaining current values: you have to get the indicator, then choose what part of it (which one of the series it consists of) you need, and then work with this part of indicator as if is a series.
Method used to obtain actual technical indicator values is the same for all indicators:
but depending on the type of indicator this method returns hash map with a different content. Table below lists that:
| Technical Indicator | getTechnicalIndicatorValue returns: |
|---|---|
| Simple Moving Average (SMA) | series |
| Exponential Moving Average (EMA) | series |
| Bollinger Bands (BBands) | upperSeries lowerSeries |
| Money Flow Index (MFI) | series |
| Moving Average Convergence/Divergence (MACD) | macdSeries signalSeries histogramSeries |
| Parabolic SAR (PSAR) | series |
| Rate of Change (ROC) | series |
| Relative Strength Index (RSI) | series |
| Stochastic Oscillator (Fast,Slow) | kSeries dSeries |
| Volume | series |
| Volume + MA | volumeSeries maSeries |
| Williams %R | series |
In other words: getTechnicalIndicatorValue returns one or several Current Objects - one for each series it consists of, so you can handle them in almost similar way, as you do with series.
Getting values from all types of technical indicators is demonstrated in the sample:
Global and selected ranges
When user interacts with the chart, he can change the visible date time range via dragging the chart, using preset panel, scroller and so on, also, the visible range can be changed programmatically. It may be useful to know what range is shown, as well as have an ability to determine the full date time range of the data shown on the chart
Illustration below shows what we are talking about (note that "Invisible Range" areas to the left and to the right are imaginable):
To get these values you can use four special functions:
Please check online sample that shows how to use them: