Multi axes flot chart with orderd stacked bars, not stacking neither adjusting bar position

Question

I need help with the following chart, is a multiseries with multiaxes and I need the some bars stacked and others not. I paste the code and here is a demo http://jsfiddle.net/Willem/aAb3E/17/

This are my first axis data (lines not stacked):

var data1 = [
[1375302600000, 33],
[1375300800000, 26]
];
var data2 = [
[1375302600000, 0],
[1375300800000, 12]
];

These are the bars (stacked by user and date(first value)):

var user1_estado1 = [
[1375302600000, 20],
[1375300800000, 40]
];
var user1_estado2 = [
[1375302600000, 10],
[1375300800000, 90]
];
var user1_estado3 = [
[1375302600000, 30],
[1375300800000, 70]
];

var user2_estado1 = [
[1375302600000, 20],
[1375300800000, 40]
];
var user2_estado2 = [
[1375302600000, 10],
[1375300800000, 90]
];
var user2_estado3 = [
[1375302600000, 30],
[1375300800000, 70]
];

I set the dataset options by series; data1 and data2 no bars and stack false; others bars show: true and the order set because I want them to solape by user and datetime.

var dataset = [{
    label: "Answer",
    data: data1,
    bars: {
        show: false
    },
    stack: false,
    xaxis: 2
}, {
    label: "Not answer",
    data: data2,
    bars: {
        show: false
    },
    stack: false,
    xaxis: 2
}, {
    label: "User1_estado1",
    data: user1_estado1,
    bars: {
        show: true,
        order:1
    },
    xaxis: 1,
    yaxis: 2,
}, {
    label: "User1_estado2",
    data: user1_estado2,
    bars: {
        show: true,
        order:1
    },
    xaxis: 1,
    yaxis: 2,
}, {
    label: "User1_estado3",
    data: user1_estado3,
    bars: {
        show: true,
        order:1
    },
    xaxis: 1,
    yaxis: 2,
}, {
    label: "User2_estado1",
    data: user2_estado1,
    bars: {
        show: true,
        order:2
    },
    xaxis: 1,
    yaxis: 2,
}, {
    label: "User2_estado2",
    data: user2_estado2,
    bars: {
        show: true,
        order:2
    },
    xaxis: 1,
    yaxis: 2,
}, {
    label: "User2_estado3",
    data: user2_estado3,
    bars: {
        show: true,
        order:2
    },
    xaxis: 1,
    yaxis: 2,
}];

Plot them, setting barwith (each half time) this I don´t know how to adjust :(, and the diferent axes, xaxes now by time but I need the xaxe1 to show each user.

var plot = $.plot(
$("#placeholder"), dataset, {
series: {
    bars: {
        barWidth: 60*30*1000,
        align: "center",
        fill: true,
    },
    //pointLabels:{show:true, stackedValue: true},
},
grid: {
    hoverable: true,
    clickable: true,
    tickColor: "#f9f9f9",
    borderWidth: 2,
    mouseActiveRadius: 10
},
xaxes: [{
    show: true,
    mode: "time",
    timeformat: "%H:%M",
    tickSize: [0.5, "hour"],
    axisLabel: "Usuario",
    axisLabelFontSizePixels: 3,
    axisLabelPadding: 5
}, {
    show: true,
    mode: "time",
    timeformat: "%H:%M",
    tickSize: [0.5, "hour"],
    axisLabel: "Usuarios ocupados",
    axisLabelFontSizePixels: 3,
    axisLabelPadding: 5
}],
yaxes: {
    color: "black",
    axisLabel: "Usuarios ocupados",
    axisLabelUseCanvas: true,
    axisLabelFontSizePixels: 8,
    axisLabelFontFamily: 'Verdana, Arial',
    axisLabelPadding: 5,
    tickDecimals: 0
}
});

Here I add some interactive to the graph showing some tooltips.

var previousPoint = null,
previousLabel = null;
$("#placeholder").bind("plothover", function (event, pos, item) {
if (item) {
    if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) {
        previousPoint = item.dataIndex;
        previousLabel = item.series.label;
        $("#tooltip").remove();

        var x = new Date(item.datapoint[0]);
        var y = item.datapoint[1];
        var color = item.series.color;

        showTooltip(item.pageX, item.pageY, color,
            "<strong>" + item.series.label + "</strong><br>" + (x.getMonth() + 1) + "/"     + x.getDate() +
            " : <strong>" + y + "</strong> llamadas");
    }
} else {
    $("#tooltip").remove();
    previousPoint = null;
}
});

function showTooltip(x, y, color, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
    position: 'absolute',
    display: 'none',
    top: y - 40,
    left: x - 30,
    border: '2px solid ' + color,
    padding: '3px',
        'font-size': '9px',
        'border-radius': '5px',
        'background-color': '#fff',
        'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
    opacity: 0.9
}).appendTo("body").fadeIn(200);
}

My problem is to align the bars per user and time (better being stacked) and to not stack the two lines. I also like to show in the axis1 the ticks by user (not the time).

You can see it here http://jsfiddle.net/Willem/aAb3E/17/

Please need some help for driving this :).

Thank you very much!

DNS DNS · Accepted Answer · 2013-10-14T02:12:36

To prevent the lines from stacking, get rid of some options that you don't really need:

var dataset = [{
    label: "Answer",
    data: data1,
    xaxis: 2
}, {
    label: "Not answer",
    data: data2,
    xaxis: 2
}, ...

To be honest I'm not entirely sure why 'false' caused them to stack; that seems like a bug, but in any case simply removing the option solves the problem, since the default is not to stack.

I'm not clear on what you mean by 'align the bars per user and time'; can you explain?

Multi axes flot chart with orderd stacked bars, not stacking neither adjusting bar position

1 Answers