多条浮动图表-条形图距离太远

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), ie 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:

Any help on this? Thx.

Answer 1

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>