In this article we will explain how data grouping feature of stock chart works. Take a look at this example first. If you roll-over the chart so that chart cursor would appear, you will notice that each data point represents one day. This is quite expected, as we provided daily data for this chart. Now, zoom-out to “year” view by clicking on the 1 year button at the bottom and roll over the chart again – now, data points jump at 7 days (one week) interval. Again, zoom-out to the max so that all the data is visible (with a max button or scrollbar). One data point represents one month now!
Did we had to provide data for the different periods? No, the chart did all the grouping itself. This is a great feature of stock chart which was implemented mainly for the following reasons:
- in most cases, when a long period is selected, the data for a longer time interval is more interesting. You could even use this as a solution instead of drill-down.
- the chart works faster when less data points are displayed.
The critical number of data points, at which data is grouped to a longer period is set via maxSeries property of CategoryAxesSettings:
var categoryAxesSettings = new AmCharts.CategoryAxesSettings(); categoryAxesSettings.maxSeries = 100; chart.categoryAxesSettings = categoryAxesSettings;
The default value is 150, which means, that when there will be more then 150 data points in the selection, the chart will group data to a longer periods. If you don't want the chart to group data, simply make maxSeries equal 0.
Choosing which data should be used when grouping data
The next question is: how does the chart groups the data? There are several options and every graph can act individually. For example, if your graph shows visitors of a web site, most likely you will want to show the sum of all visitors for a week or a month or a year. If you show stock value, it is common practice to show the value of the last day of the week/month/year. In some cases you might want to show the first value, the average, the minimum or the maximum value of a period. The StockGraph’s property periodValue is used to indicate how data should be grouped, for example:
stockGraph.periodValue = "Sum";
The above means that when grouping data, all the values of the period will be summed. The default value is "Close" - the last value of a period will be used if you don’t set other value. This is common practice when displaying stock's price.
The other possible settings are:
- Open - will use the value of the first data point of a period
- Sum - will use the sum of all data points of a period
- Average - will use the average value of a period
- Low - will use the minimum value of a period
- High - will use the maximum value of a period
Speeding up the chart by specifying periods to which data should be grouped
When parsing data, stock chart prepares grouped data for all periods longer than your minimum period – in case you have daily data, the chart will group data into weeks, months and years. If your minimum period is minute, the chart will group data into 10, 30 minutes, an hour, a day, a week, a month and a year. This takes some time, so you might want to limit data grouping to fewer periods – it might happen that you don’t want them all. To do this, you should modify groupToPeriods property of CategoryAxesSettings. The default values is:
["ss", "10ss", "30ss", "mm", "10mm", "30mm", "hh", "DD", "WW", "MM", "YYYY"];
So, as you guessed, all you need to do is to delete unwanted periods from this array. Assume, you have hourly data :
categoryAxesSettings.groupToPeriods = ["DD", "WW"];
The above means that your hourly data will only be grouped into days and weeks.
Side note: in all cases, except when working with daily data, you should remember setting minPeriod of CategoryAxesSettings to the period you use. For example, if your data is hourly, you should set:
categoryAxesSettings.minPeriod = "hh";
This is quite a common mistake which causes unexpected results.