CODEWITHSUNDEEP
jqueryflot
eComEvo
eComEvo

Reputation: 12559

Flot chart xaxis values overlap instead of stacking

I'm trying to get my data to show as bars for each sku, with each bar representing either current stock or projected stock.

Currently the bars are showing as stacked, but that won't look right because sometimes the projected and current are identical, so they just overlap.

If I change stack to false it still stays stacked.

Additionally, the tooltip will not show up on any of the bars.

What is misconfigured here?

My fiddle: http://jsfiddle.net/eComEvo/4jjvkvsv/1/

Upvotes: 1

Views: 985

Answers (1)

Raidri
Raidri

Reputation: 17550

1) Stacking

If two identical bars are stacked, they don't overlap. Overlap only occurs if one of the bar values is negative and the other positive.

The stack option belongs in the series option object:

    series: {
        bars: {
            show: true,
            align: 'center',
            barWidth: 0.6
        },
        stack: true
    },

When you try true and false here you see the difference.

If you don't want any overlap at all you may want to look at or try side-by-side-bars (there are two plugins for that).

2) Tooltips

You have tooltip options but no tooltip plugin which understands and/or uses them. But you can simply build your own tooltip without a plugin. See the updated fiddle:

$("<div id='tooltip'></div>").css({
    position: "absolute",
    display: "none",
    border: "1px solid #fdd",
    padding: "2px",
    "background-color": "#fee",
    opacity: 0.80
}).appendTo("body");

$("#stock-projections-bar-chart").bind("plothover", function (event, pos, item) {
    if (item) {
        var x = item.datapoint[0].toFixed(2),
            y = item.datapoint[1].toFixed(2);
        $("#tooltip").html(item.series.label + " of " + x + " = " + y)
            .css({
            top: item.pageY + 5,
            left: item.pageX + 5
        }).fadeIn(200);
    } else {
        $("#tooltip").hide();
    }
});

Upvotes: 1

Related Questions