I spent alot of time on this question and can finally a post solution to all of your problems.
Firstly you forgot to include <script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.stack.min.js"></script> in your index. This meant that stacked charts werent really getting drawn. Secondly I cleaned up your data a bit and removed unnecessary double declarations in your data. I then fixed your mouseover displaying the incorrect amount of tasks after I included the stack script.
Lastly I tried to find out why flot was overlapping and came to the following conclusion: flot does not know how to handle data series with varying length. This means that if you have 3 data series each with a different length, the bars overwright each other seemingly random. If however you make sure that all series are the same length, the bars stack without problems.
The best solution for this in my opinion is to make sure on the server side, that all your series are the same length and have a value at every data tick. Ideally you would add zero values into all series that have missing values at data ticks and make sure that all series are the same length this way.
Here is the code for my solution:
Data and options:
$scope.tasksRunChartOptions = {
xaxis: {
mode: "time",
timeformat: "%m/%d/%y",
minTickSize: [1, "day"]
},
grid: {
labelMargin: 10,
hoverable: true,
borderWidth: 0
},
series: {
stack: true,
"bars":{
"show":"true",
"barWidth":36000000,
"order":1,
"align":"center"
}
},
colors: colorCodes,
tooltip: true,
legend: {
show: true,
noColumns: 0, // number of colums in legend table
labelFormatter: null, // fn: string -> string
labelBoxBorderColor: "#888", // border color for the little label boxes
container: "#adoptionLegendContainer", // container (as jQuery object) to put legend in, null means default on top of graph
position: "nw", // position of default legend container within plot
margin: [5, 10], // distance from grid edge to default legend container within plot
backgroundOpacity: 0 // set to 0 to avoid background
}
};
$scope.translate = function(value) {
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var myDate = new Date(value);
return myDate.getDate() + " " + monthNames[myDate.getMonth()] + " " + myDate.getFullYear();
}
$scope.reportTasksRunRange = {
min: 1415059200000,
max: 1418342400000,
floor: 1415059200000,
ceil: 1418342400000,
step: (1412467200000 - 1412380800000)
};
$scope.tasksRunData = [
{
"data":
[[1415491200000,1],[1415577600000,3],[1415664000000,2],[1415750400000,1],[1415836800000,3],[1415923200000,1],[1416009600000,7],[1416096000000,2],[1416268800000,2],[1416441600000,1],[1416528000000,12],[1416787200000,1],[1416873600000,1],[1416960000000,3],[1417046400000,2],[1417132800000,2],[1417392000000,4],[1417478400000,3],[1417737600000,1],[1417910400000,4],[1417996800000,6],[1418083200000,2],[1418169600000,4],[1418256000000,3]],
"label":"ICS-MANG"
},
{
"data":
[[1415491200000,2],[1415577600000,3],[1415664000000,3],[1415750400000,1],[1415836800000,1],[1415923200000,2],[1416009600000,15],[1416096000000,4],[1416268800000,1],[1416441600000,3],[1416528000000,1],[1416787200000,1],[1416873600000,1],[1416960000000,3],[1417046400000,3],[1417132800000,2],[1417392000000,4],[1417478400000,3],[1417737600000,3],[1417910400000,1],[1417996800000,6],[1418083200000,5],[1418169600000,4],[1418256000000,3]],
"label":"Neeraj_secure"
},
{
"data":
[[1415491200000,2],[1415577600000,3],[1415664000000,3],[1415750400000,1],[1415836800000,1],[1415923200000,3],[1416009600000,1],[1416096000000,2],[1416268800000,4],[1416441600000,1],[1416528000000,1],[1416787200000,1],[1416873600000,1],[1416960000000,3],[1417046400000,4],[1417132800000,2],[1417392000000,4],[1417478400000,3],[1417737600000,7],[1417910400000,20],[1417996800000,6],[1418083200000,4],[1418169600000,4],[1418256000000,3]],
"label":"Bkrishna",
}];
And a plnkr displaying my solution is here.
