1

I've been using Flot charts for a short period of time and I need to display a bar chart with one or two series depending on the selection:

if (lC2 != 'None') {
      values = [
          { label: lC1, data: arrC1, color: cC1 },
          { label: lC2, data: arrC2, color: cC2 }
               ];
      bWidth = 0.15;
 }
 else {
      values = [{ data: arrC1, color: cC1 }];
      bWidth = 0.3;
}

and my function that draws the chart is:

function BarChartH(id, data, ticksl) {

$.plot(id, data, {
    series:{
        bars: {
            show: true,
            barWidth: bWidth,
            order: 1,
            horizontal: true    
        }
    },
    grid: {
        hoverable: true
        , align: "center"
        //,horizontal: true
    },
    legend: {
        show: true
    }
    , yaxis: { ticks: ticksl }
});
}

But when it needs to display both series (lC2 != 'None') it appears only the second one (the bars become stacked).

The thing is that if I remove 'order:1' from the function and add the order for each data like:

values.push({ label: lC1, bars: { order:1 }, data: arrC1, color: cC1 });
values.push({ label: lC2, bars: { order:2 }, data: arrC2, color: cC2 });

OR

values = [
    { label: lC1, bars: { order:1 }, data: arrC1, color: cC1 },
    { label: lC2, bars: { order:2 }, data: arrC2, color: cC2 }];

it displays both of the series but with a lot of space between the bars and when there are many they overlap (the lC2 bar from the first Y label overlaps with the lC1 bar from the second Y label like in the attached image).

I need to get both the bars of the same Y label closer to make a difference between them, but I don't know what am I doing wrong.

EDIT: Added: fiddle

4
  • Can you build a fiddle that shows the problem?
    – Raidri
    Sep 30, 2015 at 9:00
  • @Raidiri Edited the question and added the fiddle link.
    – LAffair
    Sep 30, 2015 at 9:38
  • That fiddle dowsn't show your problem. In fact, it doesn't run at all.
    – Raidri
    Sep 30, 2015 at 10:06
  • @Raidri Sorry for that. Edited the fiddle and now it works.
    – LAffair
    Sep 30, 2015 at 10:39

1 Answer 1

1

you have to use this plugin orderBars ... check this fiddle i used the orderBars plugin for that ... also you can increase the value of bWidth to decrease the space between bars.

also here is what i did:

var arrC1 = [[7,5], [3,4],[4,3],[6,2],[4,1]];
var arrC2 = [[2,5], [1,4],[0,3],[5,2],[4,1]];

var ticksl = [[5, "Five"], [4, "Four"], [3, "Three"], [2,"Two"], [1,"One"]];

var data = [{bars:{order:1},data: arrC1,color: 'red'}, 
        {bars:{order:2},data: arrC2,color: 'green'}];

var bWidth=0.43;

$.plot($('#Chart'), data, {
    series: {
        bars: {
            show:true,
            lineWidth: 1,
            barWidth: bWidth,
            order: 1,
            horizontal: true
        }
    },
    grid: {
        align: "center"
    },
    legend: {
        show: true
    },
    yaxis:{
        ticks: ticksl,
        autoscaleMargin: 0.8
    }
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.