Still have questions?
Contact support
You are looking at an outdated 7.12.0 version of this document. Switch to the 7.13.0 version to see the up to date information.

Data Grouping

Overview

AnyStock Charts processes table-formatted data using table data model. Working with data in AnyStock is described in AnyStock Data article.

To work with large data sets and represent them successfully on the screen AnyStock is able to group data points using Grouping methods.

Settings

There are several methods for adjusting Grouping. We can define the maximum number of the points show using the maxVisiblePoints() method, the minimum width for each point using minPixPerPoint() and work with grouping states using other settings that are described in this article.

Default

There is a sample with the default grouping settings:

JsFiddle Playground

As can be clearly seen from the sample, grouping is enabled by default. The levels of grouping are chosen automatically from the list of levels depending of the categories defined in the data set. The maximum number of simultaneously shown points is 500, so as we have less all points are shown; the minimum width value of each point is not specified.

List of levels

  • 1 millisecond
    • 5 ms
    • 10 ms
    • 25 ms
    • 50 ms
    • 100 ms
    • 250 ms
    • 500 ms
    • 1 second
    • 5 s
    • 10 s
    • 20 s
    • 30 s
    • 1 minute
    • 5 min
    • 15 min
    • 30 min
    • 1 hour
    • 2 h
    • 6 h
    • 12 h
    • 1 day
    • 1 week
    • 1 month
    • 3 months
    • 6 months
    • 1 year

Adjusting

Let's consider all methods that can adjust the grouping feature of a stock chart.

Levels

There is a list of levels where you can find the necessary one or take one of them as the unit and set the necessary count of these units using the levels() method. Note that if your data might be grouped in several non-default levels, you should define them all, so the parameter of the levels() method looks like an array of objects, like in the sample below:

// define the grouping
grouping = chart.grouping();

// set the levels of grouping
grouping.levels([
        {unit: 'year', count: 5},
        {unit: 'year', count: 10},
        {unit: 'year', count: 15},
        {unit: 'year', count: 20}
]);
JsFiddle Playground

In this sample we've got 46 points, each point represents a period of 5 years, while the maximum level by default is 1 year. So, to make the data group in longer periods - in 10 or 20 years - we need to set all these levels using the levels() method.

Set Maximum Points Number

If it is necessary to change the maximum default number of the points that can be shown on the chart simultaneously, use the maxVisiblePoints() method. Choose the maximum number of points depending on your needs. Let's take an Area Stock Chart as an example (check the Stock Chart Manual to know how to create a Stock Chart).

// set the maximal number of points
grouping.maxVisiblePoints(20);

JsFiddle Playground

Note that in case you've got the same situation when your data doesn't work the default levels, you should set the levels properly to make the maxVisiblePoints() method effective.

Set Minimum Width for a Point

Another way to set the maximum number of points is to set the minimum value for the width of each point of a stock chart, using the minPixPerPoint() method. When this value (due to changing the scroller width) reaches the defined one, all data points gets grouped into longer categories to fit the setting.

This sample demonstrates an OHLC Stock Chart with a great amount of data with minimum point width set to 10px.

// set the minimum point width
grouping.minPixPerPoint(10);

JsFiddle Playground

Force settings

There can be a situation when your data is arranged in smaller levels than you need to demonstrate, or there are custom grouping settings that you need to apply no matter what. Use forced() with "true" parameter to force a stock chart to group points even when it's not necessary.

// force the series to group always
grouping.forced(true);

JsFiddle Playground

Grouping interval

To get the current grouping interval use the getCurrentDataInterval() method.

// Get the current data interval and show it in the title.
chart.title("The current level is " + grouping.getCurrentDataInterval().count + " " + grouping.getCurrentDataInterval().unit + "s");

JsFiddle Playground

Disable

To enable or disable grouping use enabled() method. It works the same as with other features. As it is enabled by default, we've disabled it in the next sample.

// disable the grouping feature
grouping.enabled(false);

JsFiddle Playground

Get the grouping state

You can use isGrouped() method to determine if the data is grouped at the moment. You can create a special element on your chart or use some default elements to demonstrate if the grouping is enabled or not. In the following sample we've used the chart title to show that.


JsFiddle Playground