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

[GoogleCodeExporter]

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

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

Original issue reported on code.google.com by mathes....@gmail.com on 28 Oct 2009 at 10:23

Attachments:

• [flot stack example.html](https://storage.googleapis.com/google-code-attachments/flot/issue-247/comment-0/flot stack example.html)

[GoogleCodeExporter]

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.

Original comment by mathes....@gmail.com on 28 Oct 2009 at 10:25

[GoogleCodeExporter]

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);

Original comment by mathes....@gmail.com on 3 Nov 2009 at 7:34

[GoogleCodeExporter]

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);

Original comment by mathes....@gmail.com on 3 Nov 2009 at 7:35

[GoogleCodeExporter]

Thank you so much! :-) I had the exact same issue and your fix works nicely.

Original comment by L0n3.R4n...@gmail.com on 17 Nov 2009 at 2:01

[GoogleCodeExporter]

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

Original comment by alexandre.alapetite on 18 Nov 2009 at 6:17

[GoogleCodeExporter]

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

Original comment by alexandre.alapetite on 20 Nov 2009 at 4:11

Attachments:

• jquery.flot.stack.js
• 20091118-flot-stack-horizontal.html

[GoogleCodeExporter]

There is another(?) bug where leaving out data from a data set for certain data
points will cause stacking to fail. See attached example.

Original comment by schae...@dfn-cert.de on 26 Mar 2010 at 12:35

Attachments:

• flot-bug.html

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

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.

Original comment by yuhongch...@gmail.com on 21 Apr 2010 at 7:41

[GoogleCodeExporter]

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

Original comment by guillaum...@gmail.com on 5 May 2010 at 2:25

Attachments:

• jquery.flot.stack.js.patch
• screen1.png
• screen2.png

[GoogleCodeExporter]

@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.

Original comment by Buddy...@gmail.com on 15 Jul 2010 at 4:39

Attachments:

• glitch.PNG

[GoogleCodeExporter]

@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.

Original comment by Buddy...@gmail.com on 4 Aug 2010 at 6:23

[GoogleCodeExporter]

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?

Original comment by BrianKim...@gmail.com on 22 Nov 2010 at 1:38

[GoogleCodeExporter]

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.

Original comment by sec...@ichi2.net on 26 Mar 2011 at 1:53

Attachments:

• bug.html

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Original comment by dnsch...@gmail.com on 9 May 2012 at 1:53

• Changed state: Accepted

[GoogleCodeExporter]

The problem still exists in the latest flot...

Original comment by Dieter.V...@gmail.com on 23 Jun 2012 at 8:42

[GoogleCodeExporter]

What worked for me was editing the findMatchingSeries Method on line 50+ 
(original file):
if (allseries[i].stack == s.stack) {
    if(!res) res={};
        $.extend(true,res,allseries[i]);
}

My series are pretty small in size so I don't know how the performance will be 
with big data.

Original comment by Johannes...@gmail.com on 17 Mar 2014 at 12:42

[GoogleCodeExporter]

none of the fixes work for me. I don't know why. I have the latest 0.8.2 flot 
charts. Is there any workaround for this to work ?

Original comment by harishba...@gmail.com on 3 Apr 2014 at 6:43

[GoogleCodeExporter]

Back in 2008/9 when I submitted my patch, I don't know if it got
incorporated or not. I haven't used it in a few years, so am unfortunately
unable to confirm for you.

Original comment by mathes....@gmail.com on 3 Apr 2014 at 7:28

[GoogleCodeExporter]

Sorry about that to ask a follow up here as I am totally new to javascript, 
just a beginner. I am trying to produce a stock volume profile chart, e.g. 
http://www.analystz.hk/trade/stock-volume-profile.php

is the graph in the middle, with date on x-axis, price chart and horizontal 
volume bar with 2 different color solely made by the script above?  thanks.

Original comment by fishmkt2...@gmail.com on 30 Jan 2015 at 4:19

Attachments:

• VolumeProfile.JPG