Set space between 2 bars using JQuery Flot

Question

How can I set the space between 2 bars ? I want 2 bars, side by side in each month.

Javascript Code

var data3 = [
    [gd(2014, 1, 1), 800], [gd(2014, 2, 2), 500], [gd(2014, 3, 3), 600], [gd(2014, 4, 4), 700],
    [gd(2014, 5, 5), 500], [gd(2014, 6, 6), 456], [gd(2014, 7, 7), 800], [gd(2014, 8, 8), 589],
    [gd(2014, 9, 9), 467], [gd(2014, 10, 10), 876], [gd(2014, 11, 11), 689], [gd(2014, 12, 12), 700]
];

    var data2 = [
        [gd(2014, 1, 1), 700], [gd(2014, 2, 2), 300], [gd(2014, 3, 3), 400], [gd(2014, 4, 4), 200],
        [gd(2014, 5, 5), 200], [gd(2014, 6, 6), 100], [gd(2014, 7, 7), 500], [gd(2014, 8, 8), 400],
        [gd(2014, 9, 9), 300], [gd(2014, 10, 10), 400], [gd(2014, 11, 11), 200], [gd(2014, 12, 12), 300]
    ];       

    var dataset = [
        {
            label: "Receber",
            data: data3,
            color: "#1ab394",
            bars: {
                show: true,
                align: "center",
                barWidth: 999999999,
                lineWidth: 1
            }
        },
        {
            label: "Pagar",
            data: data2,
            color: "#464f88",
            bars: {
                lineWidth: 1,
                show: true,
                fill: true,
                barWidth: 999999999
            },
        }
    ];
var options = {
            xaxis: {
                mode: "time",
                tickSize: [1, "month"],
                tickLength: 0,
                axisLabel: "Date",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: 'Arial',
                axisLabelPadding: 10,
                color: "#838383",                
                timeformat: "%b/%y"
            },
            yaxes: [{
                position: "left",
                max: 1070,
                color: "#838383",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: 'Arial',
                axisLabelPadding: 3
            }, {
                position: "right",
                clolor: "#838383",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: ' Arial',
                axisLabelPadding: 67
            }
            ],
            legend: {
                noColumns: 1,
                labelBoxBorderColor: "#000000",
                position: "nw"
            },
            grid: {
                hoverable: true, // Usa o plugin "jquery.flot.tooltip" para quando passar o mouse sob os pontos do grafico
                borderWidth: 0,
                color: '#838383',
                clickable: true

            },
            tooltip: true
        };

function gd(year, month, day) {
            return new Date(year, month - 1, day).getTime();
        }

My Chart

Answer 1

Have you looked at the flot.orderbars plugin? It allows you to order your bars by adding an order property to the bars property thus placing the bars next to each other:

var dataset = [{
    label: "Receber",
    data: data3,
    color: "#1ab394",
    bars: {
        show: true,
        lineWidth: 1,
        barWidth: 60 * 60 * 24 * 1000 * 7, //set the barWidth to 7 days
        order: 1
    }
}, {
    label: "Pagar",
    data: data2,
    color: "#464f88",
    bars: {
        show: true,
        lineWidth: 1,
        barWidth: 60 * 60 * 24 * 1000 * 7,
        order: 2
    },
}];

I've created an example JSFiddle with your code and the orderbars plugin.