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 < zdata.length; i++) {
    if (zdata[i].TargetTime == null) zdata[i].TargetTime = 0;
    if (zdata[i].TimePlayed == null) zdata[i].TimePlayed = 0;

    if (zdata[i].TargetTime >= zdata[i].TimePlayed) {
        zdata[i]['Color'] = 'green';
    } else {
        zdata[i]['Color'] = 'red';
    }
}
//localsitelist
var element = {
    rt: 'D',
    Id: rid,
    courselist: clist,
    selcourseId: selCid,
    selcourse: selCname,
    cartlist: wData,
    selSiteId: lsid,
    selsite: sitename,
    dataList: zdata
}; //, carts: _mVM.availableCarts()}; //
//if rid exists, is update, else its new
var found = -1;
for (var k = 0; k < document.pvm.rapArray().length; k++) {
    if (document.pvm.rapArray()[k].Id() == rid) {
        document.pvm.rapArray()[k].update(element);
        //build chart data
        var values = []; //, series = Math.floor(Math.random() * 6) + 6;

        for (var i = 0; i < zdata.length; i++) {
            values[i] = {
                data: [
                    [zdata[i].HoleSequence, zdata[i].TimePlayed]
                ],
                color: zdata[i].Color
            };
        }
        //var data = [{ data: [[0, 1]], color: "red" },  { data: [[1, 2]], color: "yellow" },{ data: [[2, 3]], color: "green" }];
        BarChart('#ChartD-Overview' + rid, values);
        found = 1;
        break;
    }
}
if (found == -1) {
    var rvm = new panelViewModel(element);
    document.pvm.rapArray.push(rvm);
    //build chart data
    var values = []; //, series = Math.floor(Math.random() * 6) + 6;

    for (var i = 0; i < zdata.length; i++) {
        values[i] = {
            data: [
                [zdata[i].HoleSequence, zdata[i].TimePlayed]
            ],
            color: zdata[i].Color
        };
    }
    BarChart('#ChartD-Overview' + rvm.Id(), values);
}

and the BarChart function:

function BarChart(id, data) {

    $.plot(id, data, {
        series: {
            bars: {
                show: true,
                barWidth: 0.6,
                align: "center"
            }
        },
        stack: true,
        xaxis: {
            mode: "categories",
            tickLength: 0
        }
    });
}

The problem is that I can't manage to get something like this https://imageshack.us/i/expGGpOkp, the little line should be zdata[i].TargetTime. I've tried something using stacked bar chart idea but the result was way different... What am I doing wrong? Can anyone help me with a suggestion to start with to get the same bar chart like in the last image?

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
        }
    });

});