Flot graphing stacks from opposite axies

Question

I'm working a display where I don't know where the end point is (100% is an evolving figure... graph will update via ajax). The data is going to a mix of completed records against an estimated count where it will complete.

As time goes on, the counts go up and the estimated completion point becomes tighter.

not sure that image ^ is working... (most things are blocked here, sorry)

ascii example as a horiz bar:

[///////40%////// ******SPACE*******/////20%//////]

I've tried using data like

var rawData = [
    [40, 0], 
    [-20, 0], 
    ];

to show 40% done and 20% as potential end point range. but that doesn't work. at all

var rawData = [
    [40, 0], 
    [20, 0], 
    ];

shows as 60% in stacked format which is not what I want.

Can I have 2 bars on the same 'row' that are stacked, but not stacked from the same axis?

Answer 1

As far as I know there is no way to stack a single series against itself. With that said here's my 5 min attempt to replicate your image:

As @DNS had suggested, I used a transparent middle series to space the complete/estimated bars. To keep it easier to track where the points belong, I added each bar as it's own series.

Fiddle is here.

var data = [];
// 10 passes
data.push({data:[[40,2]], color: 'green'});
data.push({data:[[40,2]], color: 'transparent'});
data.push({data:[[20,2]], color: 'silver'});
// 100 passes
data.push({data:[[50,1]], color: 'green'});
data.push({data:[[20,1]], color: 'transparent'});
data.push({data:[[30,1]], color: 'silver'});
// 1000 passes
data.push({data:[[70,0]], color: 'green'});
data.push({data:[[20,0]], color: 'transparent'});
data.push({data:[[10,0]], color: 'silver'});


$.plot($("#placeholder"), data, {
    series: {
        stack: true,
        lines: { show:false },
        bars: { show: true, horizontal:true, barWidth: 0.6 }
    },
    xaxis: {min: 0, max: 100, ticks: [[0, '<span style="color: green">Completed<br/>0%</span>'],[100, '<span style="color: gray">Estimated End Point<br/>100%</span>']]},
    legend: {show: false},
    yaxis: {tickColor: 'transparent',position: 'right',
            ticks: [[0.25,'as of 1000 passes'],
                    [1.25,'as of 100 passes'],
                    [2.25,'as of 10 passes']]}
});

Answer 2

Create 3 bars instead of 2, with the middle bar filling the remaining space up to 100. Use series objects, so you can assign the middle one an 'empty' color, like white.

So with your example above, where you have 40 and 20, your middle bar would have a value of 100 - 40 - 20 = 40.