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.
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">