CODEWITHSUNDEEP
javascripthighcharts
Adrian Petrescu
Adrian Petrescu

Reputation: 493

Highstock columnrange data grouping values not consistent

The highstock column range with dataGrouping enabled seems not to be computing dataAggregation correctly.

The aggregated values seem to change when changing the range. March 2014 will show different values if scrolling more towards the right. issue highlighted

Code and jsfiddle:

dataGrouping: {
          enabled: true,
          approximation: function() {
            const indices = _.range(this.dataGroupInfo.start, this.dataGroupInfo.start + this.dataGroupInfo.length);
            const low = _.min(indices.map(i => this.options.data[i][1]));
            const high = _.max(indices.map(i => this.options.data[i][2]));

            return [low, high];
          },
          groupPixelWidth: 50
        }

See jsfiddle

Upvotes: 0

Views: 265

Answers (1)

morganfree
morganfree

Reputation: 12472

The columns are changed only when the navigator does not start from the beggining - and that happens because the way you defined approximation callback.

dataGroupInfo contains information according to the visible points (which fall into x axis range, cropped points) in the chart, not all the points - so to have proper indices for the initial data, you need to add this.cropStart - it is the index from which points are visible.

approximation: function() {
                const start = this.cropStart + this.dataGroupInfo.start;
                const stop = start + this.dataGroupInfo.length;

                const indices = _.range(start, stop);
                const low = _.min(indices.map(i => this.options.data[i][1]));
                const high = _.max(indices.map(i => this.options.data[i][2]));

                return [ low, high ];
              },

example: https://jsfiddle.net/12o4e84v/7/

The same functionality can be implemented easier

approximation: function(low, high) {
    return [ _.min(low), _.max(high) ];
}

example: https://jsfiddle.net/12o4e84v/8/

Or even simpler: 

approximation: 'range',

However, by default approximation for columns is set to range, so you do not have to do it manually.

example: https://jsfiddle.net/12o4e84v/9/

Upvotes: 2

Related Questions