Area Chart + TimeSeries + Values crossing positiveToNegative - Fail to rappresent

[maxcuttins]

I have several series to stack. Some of these series are always positive, other negative, other can be both positive and negative at some point in the graph.

It seems that JQplot is breaking the chart every time a series pass from positive to negative and viceversa.
I tried also starting with your example and put some data positive and negative and it show the same issue:

<script class="code" language="javascript" type="text/javascript">
$(document).ready(function(){   
    var l5 = [20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20];
    var l6 = [2, 3, 1, 3, 3, 2, 1, 0, -1, -2, 2, 1,0];
    var plot1c = $.jqplot('chart1c',[l5,l6],{
       stackSeries: true,
       showMarker: false,
       seriesDefaults: {
           fill: true,
           fillToZero: true,
           rendererOptions: {
               highlightMouseDown: true
           }
       }
    });

    $('#chart1c').bind('jqplotDataClick', 
        function (ev, seriesIndex, pointIndex, data) {
            $('#info1c').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
        }
    );
});
</script>

[dg-hub]

Hi @maxcuttins

This output is caused by the following block in jqplot.core.js

// only need to sum up the stack axis column of data
// and only sum if it is of same sign.
// if previous series isn't same sign, keep looking
// at earlier series untill we find one of same sign.
if (temp * prevval >= 0) {
	this._plotData[index][k][sidx] += prevval;
	this._stackData[index][k][sidx] += prevval;
	break;
} 

note that temp is the value being considered and preval is the value from the previous series. So if one of them is negative the exact value will be plotted not theresult of subtraction.

Actual:

Expected: (comment out if statement)

var a = [10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10];
var b = [2 , 1 , 1 , 1 , 1 , 1 , -2 , 1 , 1 , 1 , 2 , 2 ,2];
var c = [1 , 1 , 1 , 1 , 1 , 1 , 4 , 1, 1 , 1 , 1 , 1 ,1];
var data = [a,b,c];

I am not exactly sure why this condition exists, however commenting it out will produce your expected result. @johanbove do you have any input?

[johanbove]

@dg-hub I don’t know why this if branch is there. I don’t understand the comment before it either. What if we drop this if statement and fix the reported issue?

[maxcuttins]

No @dg-hub, your results are both wrong.
When a serie goes negative, the chart have to go negative and not above the other positive values.

The issue is not about go negative, the issue is about drawing the starting point of the series on top of the last positive series (and not from the zero line). So while the series is negative the entiry area of the series overlap all the previuous series. This is the issue.

at the moment the "ACTUAL" is better than what you suggest.
The issue is only about overlapping the other series

[johanbove]

@maxcuttins That is interesting. So how do we proceed here? How do we deal with overlap in stacked charts ? Make the layers somewhat transparent ?

[dg-hub]

Hi @maxcuttins

Thanks for your comments, the expected example is how a stacked filled chart is rendered in Microsoft Excel. When a series has negative values. It is subtracted from the prior series. I can send a screen shot of this soon. The same issue exists in Excel, there is overlap in stacked series.

Do you have a proposed solution as to how you would prefer it to be rendered? Can you provide a screen shot or example?

[maxcuttins]

Microsoft Excel have toons of bug and it's not a good example.
To give you an example that works I can give you a working example from another library:

http://www.chartjs.org/samples/latest/charts/area/line-stacked.html

In this case the only overlapping point is the moment that series go negative (so just one data point).
But from that point over the series is drawned under the zero or stacked to another negative series. The same happen when the series go positive, there is a switch with the overlapping due to the move of the whole series (start-end drawing point over the zero), but after serie are perfectly stacked without overlap to others.

This is the right behaviour that let you have perfectly stacked charts without overlap (without counting the switching points). Note that in this example there is too much curvy lines instead of sharp ones. So the example is a bit messy, but however the behaviour is right.