flot multibar chart -- bars too far away

Question

I'm having an issue with flot multibar chart (using orderBars plugin) -- the bars are too far from each other, when having many (=24) columns. I started up from this example, directly from http://en.benjaminbuffet.com/labs/flot/

<script type='text/javascript' src='jquery.flot.min.js'></script>
<script type='text/javascript' src='jquery.flot.orderBars.js'></script>

...

var d1 = [];
for (var i = 0; i <= 5; i += 1)
    d1.push([i, parseInt(Math.random() * 30)]);

var d2 = [];
for (var i = 0; i <= 5; i += 1)
    d2.push([i, parseInt(Math.random() * 30)]);

ds.push({
    data:d1,
    bars: {
        show: true, 
        barWidth: 0.3, 
        order: 1,
        lineWidth : 2
    }
});
ds.push({
    data:d2,
    bars: {
        show: true, 
        barWidth: 0.3, 
        order: 2
    }
});

$.plot($("#placeholder"), ds, {
    grid:{
        hoverable:true
    }
});

The bars are nicely next to each other, pairs separated by a space.

But, if I put there 24 columns (yes, I want to create chart for values on 24 hours), i.e. change the beginning of the code:

var d1 = [];
for (var i = 0; i <= 23; i += 1)
    d1.push([i, parseInt(Math.random() * 30)]);

var d2 = [];
for (var i = 0; i <= 23; i += 1)
    d2.push([i, parseInt(Math.random() * 30)]);

There is a space between the bars that belong to the one x-value; and no space between the two pairs. This is very confusing, user is mismatching the pairs. I need no space (or very little space) between the corresponding bars, and reasonable space between the pairs.

Here is a picture of both graphs, so you can see the problem:

enter image description here

Any help on this? Thx.

Mark Mark · Accepted Answer · 2014-09-30T16:18:48

You have 24 bars in a confined space. You want more space between the groups of bars. Your options are:

1.) you increase width of your plot.

2.) you decrease the size of each bar.

You can't adjust the space between the bars directly. From the comments to the plugin:

The plugin adjust the point by adding a value depanding of the barwidth
 * Exemple for 3 series (barwidth : 0.1) :
 *
 *          first bar décalage : -0.15
 *          second bar décalage : -0.05
 *          third bar décalage : 0.05

Here's some code snips with possible fixes:

var d1 = [];
for (var i = 0; i <= 23; i += 1)
  d1.push([i, parseInt(Math.random() * 30)]);

var d2 = [];
for (var i = 0; i <= 23; i += 1)
  d2.push([i, parseInt(Math.random() * 30)]);

ds = [];
ds.push({
  data: d1,
  bars: {
    show: true,
    barWidth: 0.3,
    order: 1,
    lineWidth: 2
  }
});
ds.push({
  data: d2,
  bars: {
    show: true,
    barWidth: 0.3,
    order: 2
  }
});

$.plot($("#placeholder"), ds, {
  grid: {
    hoverable: true
  }
});

ds1 = [];
ds1.push({
  data: d1,
  bars: {
    show: true,
    barWidth: 0.005,
    order: 1,
    lineWidth: 2
  }
});
ds1.push({
  data: d2,
  bars: {
    show: true,
    barWidth: 0.005,
    order: 2
  }
});

$.plot($("#placeholder1"), ds1, {
  grid: {
    hoverable: true
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
<script src="http://rawgit.com/emmerich/flot-orderBars/master/js/jquery.flot.orderBars.js"></script>

<div id="placeholder" style="width:3000px; height:300px"></div>
<div id="placeholder1" style="width:600px; height:300px"></div>

EDITS - UPDATED ANSWER

Another idea if you could drop the plugin and jitter the values yourself. This would allow better control on the spacing.

See this snip:

var barWidth = 0.2;
var jitterVal = barWidth / 1.5;

var d1 = [];
for (var i = 0; i <= 23; i += 1)
  d1.push([i - jitterVal, parseInt(Math.random() * 30)]);

var d2 = [];
for (var i = 0; i <= 23; i += 1)
  d2.push([i + jitterVal, parseInt(Math.random() * 30)]);

ds = [];
ds.push({
  data: d1,
  bars: {
    show: true,
    barWidth: barWidth
  }
});
ds.push({
  data: d2,
  bars: {
    show: true,
    barWidth: barWidth
  }
});

$.plot($("#placeholder"), ds, {
  grid: {
    hoverable: true
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>

<div id="placeholder" style="width:400px; height:300px"></div>

flot multibar chart -- bars too far away

1 Answers