how to display bar graph using stack - flot

Question

My bar graph is not stacking plus its also display extra 2 bars
var datasets = [{"label":"Amend Existing Report","data":[{"0":-61666272000000,"1":2},{"0":-61665667200000,"1":6},{"0":-61665062400000,"1":1},{"0":-61664457600000,"1":1},{"0":-61663852800000,"1":1},{"0":-61663248000000,"1":3},{"0":-61662643200000,"1":1},{"0":-61661433600000,"1":2},{"0":-61660828800000,"1":7},{"0":-61660224000000,"1":3},{"0":-61659619200000,"1":4},{"0":-61659014400000,"1":4}],"idx":0},{"label":"Investigate Report Problem","data":[{"0":-61659014400000,"1":1}],"idx":1},{"label":"New Request (One Off Report)","data":[{"0":-61666876800000,"1":4},{"0":-61666272000000,"1":19},{"0":-61665667200000,"1":7},{"0":-61665062400000,"1":5},{"0":-61664457600000,"1":2},{"0":-61663852800000,"1":3},{"0":-61662038400000,"1":8},{"0":-61661433600000,"1":2},{"0":-61660828800000,"1":8},{"0":-61660224000000,"1":6},{"0":-61659619200000,"1":4},{"0":-61659014400000,"1":5}],"idx":2},{"label":"New Request (Regular Report)","data":[{"0":-61666272000000,"1":4},{"0":-61665667200000,"1":2},{"0":-61665062400000,"1":3},{"0":-61664457600000,"1":1},{"0":-61662038400000,"1":1},{"0":-61660828800000,"1":2},{"0":-61659619200000,"1":2},{"0":-61659014400000,"1":1}],"idx":3},{"label":"Other","data":[{"0":-61665667200000,"1":1},{"0":-61665062400000,"1":1},{"0":-61664457600000,"1":4},{"0":-61663852800000,"1":1},{"0":-61660224000000,"1":2}],"idx":4},{"label":"Special Events","data":[{"0":-61666272000000,"1":1}],"idx":5}];
var options = {"legend":{"position":"ne","noColumns":6},"yaxis":{"min":0},"xaxis":{"mode":"time","timeformat":"%d %b"},"grid":{"clickable":true,"hoverable":true},"series":{"stack":true,"bars":{"show":true,"barWidth":181440000.00000003,"align":"center"}}};
$.plot($('#CAGraph'), datasets, options);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://rawgit.com/flot/flot/master/jquery.flot.js"></script>
<script src="https://rawgit.com/Codicode/flotanimator/master/jquery.flot.animator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.stack.js"></script>
<div id = "choices_CAGraph">
</div>
<div id="CAGraph" style="width:910px;height:400px">
How can i add 0 for undefined as mentioned in below answer
for (i = 0; i < data.length; i++) {
var val = parseInt(data[i].COUNT);
var to_seconds = moment(data[i].TIMESTAMP, 'YYYY-MM-DD').unix() * 1000;
if (typeof arr[data[i][id]] == 'undefined' && !(arr[data[i][id]] instanceof Array) ) {
arr[data[i][id]] = [];
}
if (typeof arr[data[i][id]][to_seconds] == 'undefined' && !(arr[data[i][id]][to_seconds] instanceof Array)) {
arr[data[i][id]][to_seconds] = [];
}
old_value = arr[data[i][id]][to_seconds];
arr[data[i][id]][to_seconds] = null;
if (typeof old_value === "object") // required for 0 values
old_value = 0;
arr[data[i][id]][to_seconds] = (parseInt(old_value) + val);
}
data consists of records, which have timestamp, id, and value. some ids may not all have timestamp. this is coming from db.

Answer 1

For the stacking to work, all data series must have a y-value for every x-value (timestamp). Use zero if no data is available. Otherwise flot calculates the top and bottom values for the stacks chart with something like bar3bottom = 2 + 4 + undefined = undefinedand then the bar starts at zero.
You can add the zero values to your data series on the server-side or with some JavaScript loops. See the updated code snippet below for that.
var datasets = [{
"label": "Amend Existing Report",
"data": [{
"0": -61666876800000,
"1": 0
}, {
"0": -61666272000000,
"1": 2
}, {
"0": -61665667200000,
"1": 6
}, {
"0": -61665062400000,
"1": 1
}, {
"0": -61664457600000,
"1": 1
}, {
"0": -61663852800000,
"1": 1
}, {
"0": -61663248000000,
"1": 3
}, {
"0": -61662643200000,
"1": 1
}, {
"0": -61661433600000,
"1": 2
}, {
"0": -61660828800000,
"1": 7
}, {
"0": -61660224000000,
"1": 3
}, {
"0": -61659619200000,
"1": 4
}, {
"0": -61659014400000,
"1": 4
}],
"idx": 0
}, {
"label": "Investigate Report Problem",
"data": [{
"0": -61666876800000,
"1": 0
}, {
"0": -61659014400000,
"1": 1
}],
"idx": 1
}, {
"label": "New Request (One Off Report)",
"data": [{
"0": -61666876800000,
"1": 4
}, {
"0": -61666272000000,
"1": 19
}, {
"0": -61665667200000,
"1": 7
}, {
"0": -61665062400000,
"1": 5
}, {
"0": -61664457600000,
"1": 2
}, {
"0": -61663852800000,
"1": 3
}, {
"0": -61662038400000,
"1": 8
}, {
"0": -61661433600000,
"1": 2
}, {
"0": -61660828800000,
"1": 8
}, {
"0": -61660224000000,
"1": 6
}, {
"0": -61659619200000,
"1": 4
}, {
"0": -61659014400000,
"1": 5
}],
"idx": 2
}, {
"label": "New Request (Regular Report)",
"data": [{
"0": -61666272000000,
"1": 4
}, {
"0": -61665667200000,
"1": 2
}, {
"0": -61665062400000,
"1": 3
}, {
"0": -61664457600000,
"1": 1
}, {
"0": -61662038400000,
"1": 1
}, {
"0": -61660828800000,
"1": 2
}, {
"0": -61659619200000,
"1": 2
}, {
"0": -61659014400000,
"1": 1
}],
"idx": 3
}, {
"label": "Other",
"data": [{
"0": -61665667200000,
"1": 1
}, {
"0": -61665062400000,
"1": 1
}, {
"0": -61664457600000,
"1": 4
}, {
"0": -61663852800000,
"1": 1
}, {
"0": -61660224000000,
"1": 2
}],
"idx": 4
}, {
"label": "Special Events",
"data": [{
"0": -61666272000000,
"1": 1
}],
"idx": 5
}];
var options = {
"legend": {
"position": "ne",
"noColumns": 6
},
"yaxis": {
"min": 0
},
"xaxis": {
"mode": "time",
"timeformat": "%d %b"
},
"grid": {
"clickable": true,
"hoverable": true
},
"series": {
"stack": true,
"bars": {
"show": true,
"barWidth": 181440000.00000003,
"align": "center"
}
}
};
var allXvalues = [];
for (var i = 0; i < datasets.length; i++) {
for (var j = 0; j < datasets[i].data.length; j++) {
if (allXvalues.indexOf(datasets[i].data[j][0]) < 0) {
allXvalues.push(datasets[i].data[j][0]);
}
}
}
for (var i = 0; i < datasets.length; i++) {
for (var j = 0; j < allXvalues.length; j++) {
var datasetHasXvalue = false;
for (var k = 0; k < datasets[i].data.length; k++) {
if (datasets[i].data[k][0] == allXvalues[j]) {
datasetHasXvalue = true;
break;
}
}
if (!datasetHasXvalue) {
datasets[i].data.push([allXvalues[j], 0]);
}
}
datasets[i].data.sort(dataSort);
}
function dataSort(d1, d2) {
return d2[0] - d1[0];
}
var plot = $.plot($('#CAGraph'), datasets, options);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://rawgit.com/flot/flot/master/jquery.flot.js"></script>
<script src="https://rawgit.com/Codicode/flotanimator/master/jquery.flot.animator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.stack.js"></script>
<div id="choices_CAGraph"></div>
<div id="CAGraph" style="width:910px;height:400px">