Allow stacking on different types of series
So, we have 2 columns series and 2 scatter series and all these 4 are pointing to a single category item.
Occasionally, there is a need to show stacked points scaling together with the transforming columns whenever we show or hide column series belong to a single category point.
Unfortunately, currently even if we stack column 1 and scatter 1 & column 2 and scatter 2, the scatter points are staying on the exact same spot whereas the columns are transforming during show and hide.
the only thing necessary is to adjust the "x" value of the scatter points to be shown just in the same vertical line as the corresponding columns.
I believe it can be a rare occasion but it is very simple to adjust it script-wise so it can be an easy addition as we already have series.stack='something' option.
I created a plugin to allow the scatter points to align to a column series. See http://www.highcharts.com/jsbin/omevud/edit .
-
Mik commented
Great plugin! Tested and works fine, Hoping that it would be included on the next Highcharts release :)
-
Jamie commented
"Could not connect: Access denied for user 'highcharts'@'ec2-54-221-87-5.compute-1.amazonaws.com' (using password: YES)"
can't get to the plugin...
-
Josh commented
Has this functionality been implemented at all yet? I'm trying to achieve the same thing and for the life of me cannot figure out how.
-
xquad commented
that's true, however, when one of the columns are closed, the open column will transform to a wider column and the corresponding scatter point will remain on the same spot. Something like this: http://i55.tinypic.com/zvwgo8.jpg
Well, i am trying to fake it by update function at the moment for each click in series hide/show.
-
Based on your image, you can actually try to hack those point positions for the spline by adding intermediate x values. The categories are internally handled as values 0,1,2,3 etc. By adding float x values you can place the points anywhere: http://jsfiddle.net/highcharts/LLExL/407/
-
xquad commented
I do not know if this helps but the code breakdown for the image I have provided ( http://i56.tinypic.com/2cxypow.jpg ) is below, kindly note these parts: series[x].stack = 'something'; they work for getting column series on the same vertical line however, not for the spline points.
options.series[0] = new Object();
options.series[0].name = 'Scored Half Time';
options.series[0].data = new Array;
options.series[0].type = 'column';
options.series[0].color = '#BCED91';
$.each(s5, function(index) { options.series[0].data.push(parseFloat(s5[index])); });
options.series[0].stack = 'halftime';options.series[1] = new Object();
options.series[1].name = 'Conceded Half Time';
options.series[1].data = new Array;
options.series[1].type = 'column';
options.series[1].color = 'lightcoral';
$.each(s6, function(index) { options.series[1].data.push(parseFloat(-s6[index])); });
options.series[1].stack = 'halftime';
options.series[2] = new Object();
options.series[2].name = 'Scored Full Time';
options.series[2].data = new Array;
options.series[2].type = 'column';
options.series[2].color = 'green';
$.each(s3, function(index) { options.series[2].data.push(parseFloat(s3[index])); });
options.series[2].stack = 'fulltime';options.series[3] = new Object();
options.series[3].name = 'Conceded Full Time';
options.series[3].data = new Array;
options.series[3].type = 'column';
options.series[3].color = 'red';
$.each(s4, function(index) { options.series[3].data.push(parseFloat(-s4[index])); });
options.series[3].stack = 'fulltime';options.series[4] = new Object();
options.series[4].name = 'Full Time Results';
options.series[4].data = new Array;
options.series[4].yAxis = 1;
$.each(s1, function(index) { if(s1[index]=="1") { options.series[4].data.push(parseFloat($minmax-1)); }; if(s1[index]=="0") { options.series[4].data.push(parseFloat(s1[index])); }; if(s1[index]=="-1") { options.series[4].data.push(parseFloat(-$minmax+1)); } });
markNegative(options.series[4].data, 'red');
options.series[4].stack = 'fulltime';options.series[5] = new Object();
options.series[5].name = 'Half Time Results';
options.series[5].data = new Array;
options.series[5].yAxis = 1;
options.series[5].color = 'purple';
$.each(s2, function(index) { if(s2[index]=="1") { options.series[5].data.push(parseFloat($minmax-1)); }; if(s2[index]=="0") { options.series[5].data.push(parseFloat(s2[index])); }; if(s2[index]=="-1") { options.series[5].data.push(parseFloat(-$minmax+1)); } });
markNegativex(options.series[5].data, 'lightcoral');
options.series[5].stack = 'halftime'; -
xquad commented
yes you are right about grouping, but the spline points should also be stacked with the column.
thanks for clearing that out, it is kinda hard to explain it to be honest. -
Jamie commented
Just to clarify, this issue seems to be about grouping rather than stacking.
I had a very hard time figuring out what you were asking for until I realized that... -
xquad commented
example: http://i56.tinypic.com/2cxypow.jpg
so basically if the half time result and the full time result (spline points) are same, they are on the same spot not in the same vertical line with the related columns although they are stacked with the columns.