Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Stacked Charts - restack from zero if a series has no data #326

Open
dnschnur opened this Issue · 16 comments

3 participants

@dnschnur
Owner

Original author: mathes....@gmail.com (October 28, 2009 22:23:56)

Stacked charts will restack from zero if one of the series has no data

See attached example (it's full html/javascript).

Original issue: http://code.google.com/p/flot/issues/detail?id=247

@dnschnur
Owner

From mathes....@gmail.com on October 28, 2009 22:25:20
Notice that d1...d4 all stack correctly on each other, but if you turn off one of the
series by setting its data to null (to keep it in the legend), series after that point
will restack from zero, causing bars to overlap.

@dnschnur
Owner

From mathes....@gmail.com on November 03, 2009 07:34:51
I've fixed this locally -- instead of only looking at the previous series to see where to build from, this
stores an accumulator, which handles empty series.

Here's the updated jquery.flot.stack.js

(function ($) {
var options = {
series: { stack: null } // or number/string
};

function init(plot) {

    // will be built up dynamically as a hash from x-value to
    var stackBases = {};

    function findMatchingSeries(s, allseries) {
        var res = null
        for (var i = 0; i < allseries.length; ++i) {
            if (s == allseries[i])
                break;

            if (allseries[i].stack == s.stack)
                res = allseries[i];
        }

        return res;
    }

    function stackData(plot, s, datapoints) {
        if (s.stack == null)
            return;

        var newPoints = [];

        for (var i=0; i <  datapoints.points.length; i += 3) {

            if (!stackBases[datapoints.points[i]]) {
                stackBases[datapoints.points[i]] = 0;
            }

            // note that the values need to be turned into absolute y-values.
            // in other words, if you were to stack (x, y1), (x, y2), and (x, y3),
            // (each from different series, which is where stackBases comes in),
            // you'd want the new points to be (x, y1, 0), (x, y1+y2, y1), (x, y1+y2+y3, y1+y2)
            // generally, (x, thisValue + (base up to this point), (base up to this point))

            newPoints[i] = datapoints.points[i];
            newPoints[i+1] = datapoints.points[i+1] + stackBases[datapoints.points[i]];
            newPoints[i+2] = stackBases[datapoints.points[i]];

            stackBases[datapoints.points[i]] += datapoints.points[i+1];

        }

        datapoints.points = newPoints;
    }

    plot.hooks.processDatapoints.push(stackData);
}

$.plot.plugins.push({
    init: init,
    options: options,
    name: 'stack',
    version: '1.0'
});

})(jQuery);

@dnschnur
Owner

From mathes....@gmail.com on November 03, 2009 07:35:34
Oops, I left in findMatchingSeries(), even though it's not needed anymore:

(function ($) {
var options = {
series: { stack: null } // or number/string
};

function init(plot) {

    // will be built up dynamically as a hash from x-value to
    var stackBases = {};

    function stackData(plot, s, datapoints) {
        if (s.stack == null)
            return;

        var newPoints = [];

        for (var i=0; i <  datapoints.points.length; i += 3) {

            if (!stackBases[datapoints.points[i]]) {
                stackBases[datapoints.points[i]] = 0;
            }

            // note that the values need to be turned into absolute y-values.
            // in other words, if you were to stack (x, y1), (x, y2), and (x, 

y3),
// (each from different series, which is where stackBases comes in),
// you'd want the new points to be (x, y1, 0), (x, y1+y2, y1), (x,
y1+y2+y3, y1+y2)
// generally, (x, thisValue + (base up to this point), + (base up to
this point))

            newPoints[i] = datapoints.points[i];
            newPoints[i+1] = datapoints.points[i+1] + 

stackBases[datapoints.points[i]];
newPoints[i+2] = stackBases[datapoints.points[i]];

            stackBases[datapoints.points[i]] += datapoints.points[i+1];

        }

        datapoints.points = newPoints;
    }

    plot.hooks.processDatapoints.push(stackData);
}

$.plot.plugins.push({
    init: init,
    options: options,
    name: 'stack',
    version: '1.0'
});

})(jQuery);

@dnschnur
Owner

From L0n3.R4n...@gmail.com on November 17, 2009 14:01:59
Thank you so much! :-) I had the exact same issue and your fix works nicely.

@dnschnur
Owner

From alexandre.alapetite on November 18, 2009 18:17:27
Hello, based on the last version by mathes, here is a version that can now stack
horizontally.

bars: { horizontal:true, show:true },

The tick algorithm seems to need some help or update.

Best regards,
Alexandre
http://alexandre.alapetite.fr

@dnschnur
Owner

From alexandre.alapetite on November 20, 2009 16:11:47
Line 51 should be replace to allow stack not to be defined:

  • if (s.stack == null)

  • if (!s.stack)

Demo:
http://alexandre.alapetite.fr/divers/vrac/20091118-flot-stack-horizontal.html

Best regards,
Alexandre
http://alexandre.alapetite.fr

@dnschnur
Owner

From schae...@dfn-cert.de on March 26, 2010 12:35:25
There is another(?) bug where leaving out data from a data set for certain data
points will cause stacking to fail. See attached example.

@dnschnur
Owner

From yuhongch...@gmail.com on April 21, 2010 19:41:38
problem at
http://groups.google.com/group/flot-graphs/browse_thread/thread/5cd1ea353c37cc39
still remains.

line 333 of jquery.flot.js
Message "s[v] is null"
name "TypeError"

This would have the problem solved:
src="http://flot.googlecode.com/svn/trunk/jquery.flot.js"
src="http://flot.googlecode.com/svn/trunk/jquery.flot.stack.js"

However, if use the jquery.flot.stack.js downloaded from this page, and the
jquery.flot.js released at http://code.google.com/p/flot/downloads/list, problem remains.

@dnschnur
Owner

From guillaum...@gmail.com on May 05, 2010 14:25:54
hello,

I had to find a way to make the stack plugin works with empty series, and series that don't contain the same
number of datapoints. So I did a few change to the plugin's code (see attached patchfile - made against the
trunk). Hope it helps :)

Guillaume

Keyade.com

@dnschnur
Owner

From Buddy...@gmail.com on July 15, 2010 16:39:19
@guillaume.conte

Thank you. your changes worked! I had some data points in the middle of the series that suddenly stopped working.

Your fix introduced a new bug, (or revealed) my graph renders the boarder of the bar on top even if it has size 0.
a work around is setting lineWidth to 0.

@dnschnur
Owner

From Buddy...@gmail.com on August 04, 2010 18:23:40
@alexandre.alapetite

I just went through the code to try to fix what was wrong. I tried your fix and it worked! and it didn't have the error like my previous post.

@dnschnur
Owner

From BrianKim...@gmail.com on November 22, 2010 01:38:29
Is this still an issue? And was this patch for flot v 0.6? I applied the patch but I am still getting a small line for series with data = 0. Is anyone else having this problem?

@dnschnur
Owner

From sec...@ichi2.net on March 26, 2011 01:53:32
I've just hit exactly the same problems. The 0.7 changelog indicates that empty data is now accounted for in the stack plugin, but that does not appear to be the case. Attaching a small file which demonstrates two problems:

  • notice the red on the left is overlapping the green, instead of being drawn above it, because I removed -4, 0 from the young data
  • notice a yellow line drawn even though cram data is 0.

The latter issue is not specific to the stack plugin, and happens every time a bar with a value of 0 is drawn. Would it be possible to skip the drawing in that case? Setting fillWidth to 0 works around the issue, but makes the graphs less pretty.

@dnschnur
Owner

From Dieter.V...@gmail.com on June 23, 2012 20:42:34
The problem still exists in the latest flot...

@ta2-1 ta2-1 referenced this issue from a commit in evernote/pootle
@ta2-1 ta2-1 Fix flot stack bars rendering
Don't draw zero height bar
200e70b
@PeterTheOne

I would like this being fixed.

@mihaisdm

Any chance for this issue to be fixed?
Any issues with the patch?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.