CODEWITHSUNDEEP
flot
PhoebeB
PhoebeB

Reputation: 8570

Flot Stacked Horizontal Bar not formatting correctly

Stacked Vertical is working fine: http://jsfiddle.net/Q28Aj/1/ vertical ok But if I change the bar to horizontal (and the labels to the other axis) the formatting is wrong: http://jsfiddle.net/e4Rkd/1/

horizontal

Any idea where I have gone wrong?

Upvotes: 4

Views: 2986

Answers (1)

Ryley
Ryley

Reputation: 21226

You have to reverse your x/y data if you want horizontal stacking to work:

//reverse data
for (series in data){
  var s = data[series];
    for (i=0;i<s.data.length;i++){
       var tmp = s.data[i][0];
       s.data[i][0] = s.data[i][1];
       s.data[i][1] = tmp;        
    }
}

Everything else will be the same as your working vertical stacked bar graph, except you move your ticks to the y axis (which you've done in the screenshot).

var options = {
    series: {
        stack: true,
        lines: {
            show: false,
            steps: false
        },
        bars: {
            show: true,
            horizontal: true
        },
    },
    yaxis: {
        ticks: tick_labels
    }
};

$.plot($("#placeholder"), data, options);

See it working here: http://jsfiddle.net/ryleyb/Q28Aj/2/

Upvotes: 5

Related Questions