Flot Bar Chart design

Question

I\'ve made this bar chart http://imageshack.com/a/img901/7186/cnOfhh.png, and the code for it is:

//compute & mark average color
for (var i = 0; i < z         


        

Answer 1

Here is something like your second picture using another bar dataseries where the start and end of the bars are the same thereby reducing them to lines, you don't need to stack any of the bars just give them the right y-values (fiddle):

$(function () {

    var dataBarsRed = {
        data: [
            [2, 3], ],
        label: 'Bars in Red',
        color: 'red'
    };
    var dataBarsGreen = {
        data: [
            [1, 2],
            [3, 1],
            [4, 3]
        ],
        label: 'Bars in Green',
        color: 'green'
    };
    var dataLines = {
        data: [
            [1, 3, 3],
            [2, 3.5, 3.5],
            [3, 1.5, 1.5],
            [4, 2.5, 2.5]
        ],
        label: 'Lines',
        color: 'navy',
        bars: {
            barWidth: 0.5
        }
    };

    var plot = $.plot("#placeholder", [dataBarsRed, dataBarsGreen, dataLines], {
        points: {
            show: false
        },
        lines: {
            show: false
        },
        bars: {
            show: true,
            align: 'center',
            barWidth: 0.6
        },
        grid: {
            hoverable: true,
            autoHighlight: true
        },
        xaxis: {
            min: 0,
            max: 5
        },
        yaxis: {
            min: 0,
            max: 5
        }
    });

});