Highcharts wrap processData on line charts doesn't draw right data points

Question

My goal is to have a new option on the Y axis of a line chart that allows to toggle between regular Y data series (e.g. [1,2,3]) or the accumulation of the original data series ([1,3,6]).

I started by wrapping the processData method as follows

(function (H) {

  H.wrap(H.seriesTypes.line.prototype, 'processData', function(force) {
    var yData = this.yData;

    for (var i = 1; i < yData.length; i++) {
      yData[i] = yData[i] + yData[i-1];
    };

    //alert(this.yData);

    force.apply(this, Array.prototype.slice.call(arguments, 1));
  });


} (Highcharts));

The this.yData gives me access to the right data and the rest is pretty straight forward. When plotted I do see the Y-axis limit change as expected, but the data points are still drawn according to their original values (here's a fiddle: http://jsfiddle.net/oL3LfrLr/)

I suspect it might be some scoping issue but I don't really see what's wrong in the above. Any tips?

Why wrap processData?

Not sure to be honest. I'm fairly new to javascript and HighCharts and this is my first extension. I looked at the Waterfall Series which does part of what I want and from the source of that I 'guessed' it would either be the translate or processData method. The latter sounded most promising so I started there.

Paweł Fus Paweł Fus · Accepted Answer · 2016-03-03T11:16:23

In fact you need to wrap both methods, just like waterfall series. processData is necessary for yAxis extremes, and translate is responsible for translating point's value to x-y coordinates.

Personally, I would use generatePoints, instead of translate. Something like this:

(function (H) {

  H.wrap(H.seriesTypes.line.prototype, 'processData', function (proceed) {
            var yData = this.yData,
            points = this.points;

    if(!this.afterCalc) {
      for (var i = 1; i < yData.length; i++) {
        yData[i] = yData[i] + yData[i-1];
      };
    }
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));
  });

  H.wrap(H.seriesTypes.line.prototype, 'generatePoints', function (proceed) {
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));
            var yData = this.yData,
            points = this.data;
    if(!this.afterCalc) {
      for (var i = 1; i < yData.length; i++) {
        points[i].y = yData[i];
      };
      this.afterCalc = true; // calculate this only once
    }
  });


} (Highcharts));

And demo: http://jsfiddle.net/oL3LfrLr/2/

Highcharts wrap processData on line charts doesn't draw right data points

1 Answers