New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

stacked areaspline #1041

Closed
horstlaubenthal opened this Issue Jun 12, 2012 · 39 comments

Comments

Projects
None yet
7 participants
@horstlaubenthal

horstlaubenthal commented Jun 12, 2012

Hi,
if there is a stacked area, the fillcolor is stacked too. (the fillcolor of above series are not drawn to the bottom of the chart but to next serie beneath only)
But when using areaspline, the color is filled from bottom up for all series. Could be seen on stacked area demo in jsfiddle. when toggling the blue serie, the red area get more red (caused by blue colors absence)

this happens in highcharts and in highstocks.

@horstlaubenthal

This comment has been minimized.

Show comment
Hide comment
@horstlaubenthal

horstlaubenthal Jun 29, 2012

Hi,
I tried to activate drawing areaspline in stacked mode.
But it seems that the splines are drawn differntly if the Path goes other way round (from right to left). If there are many points connected by the spline, the chart looks good, but if there are only 5 points left, the area to be filled doesn't follow the underlying spline. Additionally there are som Errors noticed in the console (chrome):
Error: Problem parsing d="M 0 262.4 C 0 262.4 26.279999999999994 266.7 43.8 266.7 C 61.31999999999999 266.7 70.08 53.6 87.6 53.6 C 105.11999999999998 53.6 113.88000000000002 53.6 131.4 53.6 C 148.92000000000002 53.6 157.67999999999998 146.3 175.2 146.3 C 192.71999999999997 146.3 201.48 53.6 219 53.6 C 236.48000000000002 53.6 245.21999999999997 53.6 262.7 53.6 C 280.21999999999997 53.6 288.98 53.6 306.5 53.6 C 324.02 53.6 332.78000000000003 53.6 350.3 53.6 C 367.82000000000005 53.6 376.58000000000004 53.6 394.1 53.6 C 411.62000000000006 53.6 420.37999999999994 53.6 437.9 53.6 C 455.41999999999996 53.6 464.17999999999995 53.6 481.7 53.6 C 499.21999999999997 53.6 507.98 53.6 525.5 53.6 C 543.02 53.6 551.78 53.6 569.3 53.6 C 586.8199999999999 53.6 595.58 53.6 613.1 53.6 C 630.6200000000001 53.6 639.3799999999999 53.6 656.9 53.6 C 674.3799999999999 53.6 700.6 53.6 700.6 53.6 700.6 94 700.6 94 700.6 94 656.9 189 656.9 189 613.1 134 613.1 134 569.3 104 569.3 104 525.5 189 525.5 189 481.7 238 481.7 238 437.9 249 437.9 249 394.1 242 394.1 242 350.3 234 350.3 234 306.5 81 306.5 81 262.7 158 262.7 158 219 268 219 268 175.2 268 175.2 268 131.4 268 131.4 268 87.6 268 87.6 268 43.8 268 43.8 268 0 268 0 268"

Could you give me hint?

Code:
line 11915:

if (options.stacking && series.type !== 'areaspline') {
// Follow stack back. Todo: implement areaspline. A general solution could be to
// reverse the entire graphPath of the previous series, though may be hard with
// splines and with series with different extremes
for (i = segment.length - 1; i >= 0; i--) {

                    // step line?
                    console.log(options);
                    if (i < segment.length - 1 && options.step) {
                        areaSegmentPath.push(segment[i + 1].plotX, segment[i].yBottom);
                    }

                    areaSegmentPath.push(segment[i].plotX, segment[i].yBottom);
                }

        } else if (options.stacking && series.type == 'areaspline') {
              for (i = segment.length-1; i >= 0; i--) {
                  if (i < segment.length - 1 ) {
                      var bottom = mathRound(segment[i + 1].yBottom)
                      areaSegmentPath.push(segment[i + 1].plotX, bottom);
                  }
                  if(i == segment.length-1 || i == 0){
                      areaSegmentPath.push(segment[i].plotX, mathRound(segment[i].yBottom));
                  }
                  areaSegmentPath.push(segment[i].plotX, mathRound(segment[i].yBottom));
              }
          } else { // follow zero line back
                areaSegmentPath.push(

horstlaubenthal commented Jun 29, 2012

Hi,
I tried to activate drawing areaspline in stacked mode.
But it seems that the splines are drawn differntly if the Path goes other way round (from right to left). If there are many points connected by the spline, the chart looks good, but if there are only 5 points left, the area to be filled doesn't follow the underlying spline. Additionally there are som Errors noticed in the console (chrome):
Error: Problem parsing d="M 0 262.4 C 0 262.4 26.279999999999994 266.7 43.8 266.7 C 61.31999999999999 266.7 70.08 53.6 87.6 53.6 C 105.11999999999998 53.6 113.88000000000002 53.6 131.4 53.6 C 148.92000000000002 53.6 157.67999999999998 146.3 175.2 146.3 C 192.71999999999997 146.3 201.48 53.6 219 53.6 C 236.48000000000002 53.6 245.21999999999997 53.6 262.7 53.6 C 280.21999999999997 53.6 288.98 53.6 306.5 53.6 C 324.02 53.6 332.78000000000003 53.6 350.3 53.6 C 367.82000000000005 53.6 376.58000000000004 53.6 394.1 53.6 C 411.62000000000006 53.6 420.37999999999994 53.6 437.9 53.6 C 455.41999999999996 53.6 464.17999999999995 53.6 481.7 53.6 C 499.21999999999997 53.6 507.98 53.6 525.5 53.6 C 543.02 53.6 551.78 53.6 569.3 53.6 C 586.8199999999999 53.6 595.58 53.6 613.1 53.6 C 630.6200000000001 53.6 639.3799999999999 53.6 656.9 53.6 C 674.3799999999999 53.6 700.6 53.6 700.6 53.6 700.6 94 700.6 94 700.6 94 656.9 189 656.9 189 613.1 134 613.1 134 569.3 104 569.3 104 525.5 189 525.5 189 481.7 238 481.7 238 437.9 249 437.9 249 394.1 242 394.1 242 350.3 234 350.3 234 306.5 81 306.5 81 262.7 158 262.7 158 219 268 219 268 175.2 268 175.2 268 131.4 268 131.4 268 87.6 268 87.6 268 43.8 268 43.8 268 0 268 0 268"

Could you give me hint?

Code:
line 11915:

if (options.stacking && series.type !== 'areaspline') {
// Follow stack back. Todo: implement areaspline. A general solution could be to
// reverse the entire graphPath of the previous series, though may be hard with
// splines and with series with different extremes
for (i = segment.length - 1; i >= 0; i--) {

                    // step line?
                    console.log(options);
                    if (i < segment.length - 1 && options.step) {
                        areaSegmentPath.push(segment[i + 1].plotX, segment[i].yBottom);
                    }

                    areaSegmentPath.push(segment[i].plotX, segment[i].yBottom);
                }

        } else if (options.stacking && series.type == 'areaspline') {
              for (i = segment.length-1; i >= 0; i--) {
                  if (i < segment.length - 1 ) {
                      var bottom = mathRound(segment[i + 1].yBottom)
                      areaSegmentPath.push(segment[i + 1].plotX, bottom);
                  }
                  if(i == segment.length-1 || i == 0){
                      areaSegmentPath.push(segment[i].plotX, mathRound(segment[i].yBottom));
                  }
                  areaSegmentPath.push(segment[i].plotX, mathRound(segment[i].yBottom));
              }
          } else { // follow zero line back
                areaSegmentPath.push(
@horstlaubenthal

This comment has been minimized.

Show comment
Hide comment
@horstlaubenthal

horstlaubenthal Jun 29, 2012

I wanted to upload some screenshots, but did not know how to do that...

horstlaubenthal commented Jun 29, 2012

I wanted to upload some screenshots, but did not know how to do that...

@vargero

This comment has been minimized.

Show comment
Hide comment
@vargero

vargero Sep 13, 2012

Here's an example: http://jsfiddle.net/etJyU/
It's basically the stacked area example from the website, but instead of using the 'area' chart type, I used 'areaspline'. It doesn't stack at all.

vargero commented Sep 13, 2012

Here's an example: http://jsfiddle.net/etJyU/
It's basically the stacked area example from the website, but instead of using the 'area' chart type, I used 'areaspline'. It doesn't stack at all.

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Sep 17, 2012

Collaborator

Because splines are more complex than lines, we haven't implemented stacking of fills for spline areas. The setting for this is expressed here:

`closedStacks: true, // instead of following the previous graph back, follow the threshold back``

To implement this we would need some kind of advanced path calculation that looks at the path of the previous series instead of just the yBottom of each point. As long as there are no null points involved, reversing the path should be pretty simple, but when null points and different min/max are introduced it all becomes complicated.

@vargero You didnt't apply stacking for 'areaspline', so here it goes: http://jsfiddle.net/highcharts/etJyU/1/. This example has stacking, but the fill is drawn all the way to the axis.

Collaborator

TorsteinHonsi commented Sep 17, 2012

Because splines are more complex than lines, we haven't implemented stacking of fills for spline areas. The setting for this is expressed here:

`closedStacks: true, // instead of following the previous graph back, follow the threshold back``

To implement this we would need some kind of advanced path calculation that looks at the path of the previous series instead of just the yBottom of each point. As long as there are no null points involved, reversing the path should be pretty simple, but when null points and different min/max are introduced it all becomes complicated.

@vargero You didnt't apply stacking for 'areaspline', so here it goes: http://jsfiddle.net/highcharts/etJyU/1/. This example has stacking, but the fill is drawn all the way to the axis.

@mrbmc

This comment has been minimized.

Show comment
Hide comment
@mrbmc

mrbmc Sep 27, 2013

It's inconsistent. Sometimes it works: http://jsfiddle.net/mrbmc/Gk4Kd/

mrbmc commented Sep 27, 2013

It's inconsistent. Sometimes it works: http://jsfiddle.net/mrbmc/Gk4Kd/

@mitar

This comment has been minimized.

Show comment
Hide comment
@mitar

mitar Aug 12, 2015

Hm, in my data we do have nulls, but they are or always null for all series, or it is not null for all series. Would this simplify things? Also, min/max is the same (we reuse the same y-axis).

mitar commented Aug 12, 2015

Hm, in my data we do have nulls, but they are or always null for all series, or it is not null for all series. Would this simplify things? Also, min/max is the same (we reuse the same y-axis).

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Aug 12, 2015

Collaborator

For the records: mitar's question is regarding support for null values in the nosegment branch.

@mitar The problem can be seen here: http://jsfiddle.net/highcharts/38gvcavr/2/. The areas are not perfectly aligned next to a null point. You need to test if this is a problem for you particular case.

Collaborator

TorsteinHonsi commented Aug 12, 2015

For the records: mitar's question is regarding support for null values in the nosegment branch.

@mitar The problem can be seen here: http://jsfiddle.net/highcharts/38gvcavr/2/. The areas are not perfectly aligned next to a null point. You need to test if this is a problem for you particular case.

@mitar

This comment has been minimized.

Show comment
Hide comment
@mitar

mitar Aug 12, 2015

Good, it seems it works well if nulls are matched: http://jsfiddle.net/9ksvskzf/

mitar commented Aug 12, 2015

Good, it seems it works well if nulls are matched: http://jsfiddle.net/9ksvskzf/

@mitar

This comment has been minimized.

Show comment
Hide comment
@mitar

mitar Aug 12, 2015

Does nosegment branch add anything extra or is addressing only this issue?

mitar commented Aug 12, 2015

Does nosegment branch add anything extra or is addressing only this issue?

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Aug 12, 2015

Collaborator

It is only addressing stacking of areas and area splines.

Collaborator

TorsteinHonsi commented Aug 12, 2015

It is only addressing stacking of areas and area splines.

@mitar

This comment has been minimized.

Show comment
Hide comment
@mitar

mitar Aug 13, 2015

nosegments branch does not merge cleanly anymore with current master. :-(

mitar commented Aug 13, 2015

nosegments branch does not merge cleanly anymore with current master. :-(

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Aug 13, 2015

Collaborator
Collaborator

TorsteinHonsi commented Aug 13, 2015

@mitar

This comment has been minimized.

Show comment
Hide comment
@mitar

mitar Aug 13, 2015

Thanks! You are awesome!

mitar commented Aug 13, 2015

Thanks! You are awesome!

@mitar

This comment has been minimized.

Show comment
Hide comment
@mitar

mitar Aug 13, 2015

It does not work correctly in my case. So blue series is correctly cut, but others are not. Maybe because I am loading them asynchronously?

untitled

mitar commented Aug 13, 2015

It does not work correctly in my case. So blue series is correctly cut, but others are not. Maybe because I am loading them asynchronously?

untitled

@mitar

This comment has been minimized.

Show comment
Hide comment
@mitar

mitar Aug 13, 2015

Old version (current master) for comparison:

untitled

mitar commented Aug 13, 2015

Old version (current master) for comparison:

untitled

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Aug 13, 2015

Collaborator

Your gaps - are they null points or just large gaps in the data, determined by the gapSize option?

Collaborator

TorsteinHonsi commented Aug 13, 2015

Your gaps - are they null points or just large gaps in the data, determined by the gapSize option?

@mitar

This comment has been minimized.

Show comment
Hide comment
@mitar

mitar Aug 13, 2015

The are nulls.This is why in the old version there is space in between. I do not use/set gapSize at all in my code.

mitar commented Aug 13, 2015

The are nulls.This is why in the old version there is space in between. I do not use/set gapSize at all in my code.

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Aug 13, 2015

Collaborator

All right. I tried to reproduce it here, but it works: http://jsfiddle.net/hpz7edyr/. Can you help?

Collaborator

TorsteinHonsi commented Aug 13, 2015

All right. I tried to reproduce it here, but it works: http://jsfiddle.net/hpz7edyr/. Can you help?

@mitar

This comment has been minimized.

Show comment
Hide comment
@mitar

mitar Aug 13, 2015

I will take a look. I have to determine which parts of my codebase is relevant to this. :-)

mitar commented Aug 13, 2015

I will take a look. I have to determine which parts of my codebase is relevant to this. :-)

@mitar

This comment has been minimized.

Show comment
Hide comment
@mitar

mitar Aug 19, 2015

I see the following exceptions in the web console once I switch to the nosegment branch.

untitled2

But it does not seem to be related, because I get those errors even when I do not render the stacked chart.

mitar commented Aug 19, 2015

I see the following exceptions in the web console once I switch to the nosegment branch.

untitled2

But it does not seem to be related, because I get those errors even when I do not render the stacked chart.

@mitar

This comment has been minimized.

Show comment
Hide comment
@mitar

mitar commented Aug 19, 2015

I made a reproduction: http://jsfiddle.net/hpz7edyr/1/

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Aug 21, 2015

Collaborator

It doesn't reproduce for me... Using Chrome 44 on the Mac. Any steps
necessary for reproduction? Also try to set a specific with setting for the
chart, as it affects data grouping and other layout features.

Best regards,
Torstein Hønsi
CTO, Founder
Highsoft AS

2015-08-19 21:32 GMT+02:00 Mitar notifications@github.com:

I made a reproduction: http://jsfiddle.net/hpz7edyr/1/


Reply to this email directly or view it on GitHub
#1041 (comment)
.

Collaborator

TorsteinHonsi commented Aug 21, 2015

It doesn't reproduce for me... Using Chrome 44 on the Mac. Any steps
necessary for reproduction? Also try to set a specific with setting for the
chart, as it affects data grouping and other layout features.

Best regards,
Torstein Hønsi
CTO, Founder
Highsoft AS

2015-08-19 21:32 GMT+02:00 Mitar notifications@github.com:

I made a reproduction: http://jsfiddle.net/hpz7edyr/1/


Reply to this email directly or view it on GitHub
#1041 (comment)
.

@pawelfus

This comment has been minimized.

Show comment
Hide comment
@pawelfus

pawelfus Aug 21, 2015

Contributor

Tested also on Firefox - no errors.
However, when zooming in, graph is empty.

Contributor

pawelfus commented Aug 21, 2015

Tested also on Firefox - no errors.
However, when zooming in, graph is empty.

@mitar

This comment has been minimized.

Show comment
Hide comment
@mitar

mitar Aug 22, 2015

OK, maybe we are looking at a different thing? Because for me it works (in the sense that the problem is there) both in Chrome and Firefox on Mac: http://jsfiddle.net/hpz7edyr/1/

So I get this:

untitled

But what it should be is that there is for both series nothing in the middle, not just for the blue one.

mitar commented Aug 22, 2015

OK, maybe we are looking at a different thing? Because for me it works (in the sense that the problem is there) both in Chrome and Firefox on Mac: http://jsfiddle.net/hpz7edyr/1/

So I get this:

untitled

But what it should be is that there is for both series nothing in the middle, not just for the blue one.

@mitar

This comment has been minimized.

Show comment
Hide comment
@mitar

mitar Aug 22, 2015

Just to be clear, this is not a reproduction for error I reported in this comment, but problem I reported in this comment. The error comes from some of my other chart rendered at the same time (not even stacked ones). So there is some regression somewhere, but I did not investigate that yet. Does nosegment branch only change how things around stacked charts or also other things?

mitar commented Aug 22, 2015

Just to be clear, this is not a reproduction for error I reported in this comment, but problem I reported in this comment. The error comes from some of my other chart rendered at the same time (not even stacked ones). So there is some regression somewhere, but I did not investigate that yet. Does nosegment branch only change how things around stacked charts or also other things?

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Aug 24, 2015

Collaborator

It works when initiated with data, as generally recommended, and also when deferring the chart redraw, also as recommended when doing multiple updates.

Collaborator

TorsteinHonsi commented Aug 24, 2015

It works when initiated with data, as generally recommended, and also when deferring the chart redraw, also as recommended when doing multiple updates.

@mitar

This comment has been minimized.

Show comment
Hide comment
@mitar

mitar Aug 24, 2015

I cannot use it with initiated data because data is loading a bit longer from the server, but I would like to pre-create charts in advance to reserve DOM space.

It is strange that it works with deferring the redraw because in my original code I am doing that as well. So there might be some other difference in that case.

mitar commented Aug 24, 2015

I cannot use it with initiated data because data is loading a bit longer from the server, but I would like to pre-create charts in advance to reserve DOM space.

It is strange that it works with deferring the redraw because in my original code I am doing that as well. So there might be some other difference in that case.

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Aug 24, 2015

Collaborator
Collaborator

TorsteinHonsi commented Aug 24, 2015

@mitar

This comment has been minimized.

Show comment
Hide comment
@mitar

mitar Aug 24, 2015

It is easier to create an empty chart and ask Highcharts to show "loading" message. :-) I would like that it is the same look as later on when data is loaded again after the extremes change.

mitar commented Aug 24, 2015

It is easier to create an empty chart and ask Highcharts to show "loading" message. :-) I would like that it is the same look as later on when data is loaded again after the extremes change.

@mitar

This comment has been minimized.

Show comment
Hide comment
@mitar

mitar Aug 30, 2015

OK, I reproduced here something which I have in practice.

So notice again how the black one goes over the empty space, but it should not. Also, notice how in nosegment branch in navigator lines go the whole way, despite there being null values.

highcharts_stock_demo_-jsfiddle-_2015-08-30_10 29 31

With master branch things are rendered correctly, but of course the stacking goes the whole height there.

highcharts_stock_demo_-jsfiddle-_2015-08-30_10 29 56

mitar commented Aug 30, 2015

OK, I reproduced here something which I have in practice.

So notice again how the black one goes over the empty space, but it should not. Also, notice how in nosegment branch in navigator lines go the whole way, despite there being null values.

highcharts_stock_demo_-jsfiddle-_2015-08-30_10 29 31

With master branch things are rendered correctly, but of course the stacking goes the whole height there.

highcharts_stock_demo_-jsfiddle-_2015-08-30_10 29 56

@mitar

This comment has been minimized.

Show comment
Hide comment
@mitar

mitar Nov 21, 2015

nosegments branch does not merge cleanly anymore with current master. :-(

mitar commented Nov 21, 2015

nosegments branch does not merge cleanly anymore with current master. :-(

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Nov 24, 2015

Collaborator
Collaborator

TorsteinHonsi commented Nov 24, 2015

@mitar

This comment has been minimized.

Show comment
Hide comment
@mitar

mitar Nov 24, 2015

Any point at which this will be merged into master?

mitar commented Nov 24, 2015

Any point at which this will be merged into master?

@mitar

This comment has been minimized.

Show comment
Hide comment
@mitar

mitar Nov 24, 2015

(And thanks!)

mitar commented Nov 24, 2015

(And thanks!)

@sebastianbochan

This comment has been minimized.

Show comment
Hide comment
@sebastianbochan

sebastianbochan Apr 14, 2016

Contributor

Seems that is still buggy. Lets compare:

In the right side, stacking is incorrect.

Edit:
Extra demo: http://jsfiddle.net/vkkhny8y/

Contributor

sebastianbochan commented Apr 14, 2016

Seems that is still buggy. Lets compare:

In the right side, stacking is incorrect.

Edit:
Extra demo: http://jsfiddle.net/vkkhny8y/

@sebastianbochan

This comment has been minimized.

Show comment
Hide comment
@sebastianbochan

sebastianbochan Aug 4, 2016

Contributor

+1

Contributor

sebastianbochan commented Aug 4, 2016

+1

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Aug 4, 2016

Collaborator

Regarding your first sample from 14 Apr, you didn't apply stacking to the areaspline because you only provided plotOptions.area. Here's how it looks when applied: http://jsfiddle.net/highcharts/rk7kf539/1/ .

The Extra demo shows the problem.

Collaborator

TorsteinHonsi commented Aug 4, 2016

Regarding your first sample from 14 Apr, you didn't apply stacking to the areaspline because you only provided plotOptions.area. Here's how it looks when applied: http://jsfiddle.net/highcharts/rk7kf539/1/ .

The Extra demo shows the problem.

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Aug 4, 2016

Collaborator

I think the remaining fail case can be simplified to this: http://jsfiddle.net/highcharts/vkkhny8y/1/

Collaborator

TorsteinHonsi commented Aug 4, 2016

I think the remaining fail case can be simplified to this: http://jsfiddle.net/highcharts/vkkhny8y/1/

@mitar

This comment has been minimized.

Show comment
Hide comment
@mitar

mitar Aug 4, 2016

So all this is now available in master? Great!

mitar commented Aug 4, 2016

So all this is now available in master? Great!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment