display total of bar on flot hover - flot

I would like to display total of bar on flot hover when I have multiple series. Also How can I hide the color from that stacked bar line of 0 values.
var datasets = [{
"label": "Amend Existing Report",
"data": [{
"0": 1446422400000,
"1": 0
}, {
"0": 1447027200000,
"1": 0
}, {
"0": 1447632000000,
"1": 0
}, {
"0": 1448236800000,
"1": 0
}, {
"0": 1448841600000,
"1": 0
}, {
"0": 1449446400000,
"1": 1
}, {
"0": 1450051200000,
"1": 0
}, {
"0": 1450656000000,
"1": 0
}, {
"0": 1451260800000,
"1": 0
}, {
"0": 1451865600000,
"1": 0
}, {
"0": 1452470400000,
"1": 0
}, {
"0": 1453075200000,
"1": 1
}, {
"0": 1453680000000,
"1": 1
}, {
"0": 1454284800000,
"1": 0
}],
"idx": 0
}, {
"label": "Investigate Report Problem",
"data": [{
"0": 1446422400000,
"1": 1
}, {
"0": 1447027200000,
"1": 0
}, {
"0": 1447632000000,
"1": 2
}, {
"0": 1448236800000,
"1": 4
}, {
"0": 1448841600000,
"1": 0
}, {
"0": 1449446400000,
"1": 1
}, {
"0": 1450051200000,
"1": 0
}, {
"0": 1450656000000,
"1": 2
}, {
"0": 1451260800000,
"1": 0
}, {
"0": 1451865600000,
"1": 0
}, {
"0": 1452470400000,
"1": 0
}, {
"0": 1453075200000,
"1": 5
}, {
"0": 1453680000000,
"1": 0
}, {
"0": 1454284800000,
"1": 0
}],
"idx": 1
}, {
"label": "New Request (One Off Report)",
"data": [{
"0": 1446422400000,
"1": 0
}, {
"0": 1447027200000,
"1": 0
}, {
"0": 1447632000000,
"1": 1
}, {
"0": 1448236800000,
"1": 0
}, {
"0": 1448841600000,
"1": 0
}, {
"0": 1449446400000,
"1": 0
}, {
"0": 1450051200000,
"1": 0
}, {
"0": 1450656000000,
"1": 0
}, {
"0": 1451260800000,
"1": 0
}, {
"0": 1451865600000,
"1": 0
}, {
"0": 1452470400000,
"1": 0
}, {
"0": 1453075200000,
"1": 0
}, {
"0": 1453680000000,
"1": 1
}, {
"0": 1454284800000,
"1": 0
}],
"idx": 2
}, {
"label": "New Request (Regular Report)",
"data": [{
"0": 1446422400000,
"1": 4
}, {
"0": 1447027200000,
"1": 0
}, {
"0": 1447632000000,
"1": 2
}, {
"0": 1448236800000,
"1": 2
}, {
"0": 1448841600000,
"1": 0
}, {
"0": 1449446400000,
"1": 1
}, {
"0": 1450051200000,
"1": 0
}, {
"0": 1450656000000,
"1": 0
}, {
"0": 1451260800000,
"1": 1
}, {
"0": 1451865600000,
"1": 1
}, {
"0": 1452470400000,
"1": 0
}, {
"0": 1453075200000,
"1": 3
}, {
"0": 1453680000000,
"1": 2
}, {
"0": 1454284800000,
"1": 0
}],
"idx": 3
}, {
"label": "Other",
"data": [{
"0": 1446422400000,
"1": 0
}, {
"0": 1447027200000,
"1": 0
}, {
"0": 1447632000000,
"1": 2
}, {
"0": 1448236800000,
"1": 4
}, {
"0": 1448841600000,
"1": 2
}, {
"0": 1449446400000,
"1": 0
}, {
"0": 1450051200000,
"1": 2
}, {
"0": 1450656000000,
"1": 0
}, {
"0": 1451260800000,
"1": 0
}, {
"0": 1451865600000,
"1": 0
}, {
"0": 1452470400000,
"1": 3
}, {
"0": 1453075200000,
"1": 0
}, {
"0": 1453680000000,
"1": 3
}, {
"0": 1454284800000,
"1": 0
}],
"idx": 4
}, {
"label": "Special Events",
"data": [{
"0": 1446422400000,
"1": 0
}, {
"0": 1447027200000,
"1": 0
}, {
"0": 1447632000000,
"1": 0
}, {
"0": 1448236800000,
"1": 1
}, {
"0": 1448841600000,
"1": 0
}, {
"0": 1449446400000,
"1": 3
}, {
"0": 1450051200000,
"1": 1
}, {
"0": 1450656000000,
"1": 0
}, {
"0": 1451260800000,
"1": 0
}, {
"0": 1451865600000,
"1": 0
}, {
"0": 1452470400000,
"1": 0
}, {
"0": 1453075200000,
"1": 0
}, {
"0": 1453680000000,
"1": 0
}, {
"0": 1454284800000,
"1": 0
}],
"idx": 5
}];
var ticks = [];
for (var i = 0; i < datasets[0].data.length; i++) {
ticks.push(datasets[0].data[i][0]);
}
var options = {
"legend": {
"position": "ne",
"noColumns": 6
},
"yaxis": {
"min": 0
},
"xaxis": {
"mode": "time",
"timeformat": "%d %b",
// "tickSize": [7, "day"],
ticks: ticks,
"min": 1446163200000,
"max": 1454544000000 // 1454284800000
},
"grid": {
"clickable": true,
"hoverable": true
},
"series": {
"stack": true,
"bars": {
"show": true,
"barWidth": 181440000.00000003,
align: 'center'
}
}
};
$.plot($('#CAGraph'), datasets, options);
$("#CAGraph").bind("plothover", function(event, pos, item) {
if (item) {
console.log(item);
var percent = item.datapoint[1].toFixed(0) - item.datapoint[2].toFixed(0);
var total = item.datapoint[1].toFixed(0);
$("#tooltip").show();
$("#tooltip").html(
item.series.label + " " + (percent) + "<br>Total: " + total)
.css({
top: item.pageY - 25,
left: item.pageX + 10
}).fadeIn(200);
} else {
$("#tooltip").hide();
}
});
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot.tooltip/0.8.5/jquery.flot.tooltip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw=="
crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
<div id="CAGraph" style="width:910px;height:400px"></div>
<div id=tooltip></div>


To get the total value per bar, run a loop over all data values and put them in a hashmap which you then can use in the tooltip generation. something like this:
var totals = {};
for (var i = 0; i < datasets.length; i++) {
var dataset = datasets[i];
for (var j = 0; j < dataset.data.length; j++) {
var timestamp = dataset.data[j][0];
var value = dataset.data[j][1];
if (totals['_' + timestamp]) {
totals['_' + timestamp] += value;
} else {
totals['_' + timestamp] = value;
}
}
}
To remove the bars width height zero, set the lineWidth option for the bars to zero:
"series": {
"stack": true,
"bars": {
"show": true,
"barWidth": 181440000.00000003,
align: 'center',
lineWidth: 0
}
}
Both changes are included in the updated code snippet below:
var datasets = [{
"label": "Amend Existing Report",
"data": [{
"0": 1446422400000,
"1": 0
}, {
"0": 1447027200000,
"1": 0
}, {
"0": 1447632000000,
"1": 0
}, {
"0": 1448236800000,
"1": 0
}, {
"0": 1448841600000,
"1": 0
}, {
"0": 1449446400000,
"1": 1
}, {
"0": 1450051200000,
"1": 0
}, {
"0": 1450656000000,
"1": 0
}, {
"0": 1451260800000,
"1": 0
}, {
"0": 1451865600000,
"1": 0
}, {
"0": 1452470400000,
"1": 0
}, {
"0": 1453075200000,
"1": 1
}, {
"0": 1453680000000,
"1": 1
}, {
"0": 1454284800000,
"1": 0
}],
"idx": 0
}, {
"label": "Investigate Report Problem",
"data": [{
"0": 1446422400000,
"1": 1
}, {
"0": 1447027200000,
"1": 0
}, {
"0": 1447632000000,
"1": 2
}, {
"0": 1448236800000,
"1": 4
}, {
"0": 1448841600000,
"1": 0
}, {
"0": 1449446400000,
"1": 1
}, {
"0": 1450051200000,
"1": 0
}, {
"0": 1450656000000,
"1": 2
}, {
"0": 1451260800000,
"1": 0
}, {
"0": 1451865600000,
"1": 0
}, {
"0": 1452470400000,
"1": 0
}, {
"0": 1453075200000,
"1": 5
}, {
"0": 1453680000000,
"1": 0
}, {
"0": 1454284800000,
"1": 0
}],
"idx": 1
}, {
"label": "New Request (One Off Report)",
"data": [{
"0": 1446422400000,
"1": 0
}, {
"0": 1447027200000,
"1": 0
}, {
"0": 1447632000000,
"1": 1
}, {
"0": 1448236800000,
"1": 0
}, {
"0": 1448841600000,
"1": 0
}, {
"0": 1449446400000,
"1": 0
}, {
"0": 1450051200000,
"1": 0
}, {
"0": 1450656000000,
"1": 0
}, {
"0": 1451260800000,
"1": 0
}, {
"0": 1451865600000,
"1": 0
}, {
"0": 1452470400000,
"1": 0
}, {
"0": 1453075200000,
"1": 0
}, {
"0": 1453680000000,
"1": 1
}, {
"0": 1454284800000,
"1": 0
}],
"idx": 2
}, {
"label": "New Request (Regular Report)",
"data": [{
"0": 1446422400000,
"1": 4
}, {
"0": 1447027200000,
"1": 0
}, {
"0": 1447632000000,
"1": 2
}, {
"0": 1448236800000,
"1": 2
}, {
"0": 1448841600000,
"1": 0
}, {
"0": 1449446400000,
"1": 1
}, {
"0": 1450051200000,
"1": 0
}, {
"0": 1450656000000,
"1": 0
}, {
"0": 1451260800000,
"1": 1
}, {
"0": 1451865600000,
"1": 1
}, {
"0": 1452470400000,
"1": 0
}, {
"0": 1453075200000,
"1": 3
}, {
"0": 1453680000000,
"1": 2
}, {
"0": 1454284800000,
"1": 0
}],
"idx": 3
}, {
"label": "Other",
"data": [{
"0": 1446422400000,
"1": 0
}, {
"0": 1447027200000,
"1": 0
}, {
"0": 1447632000000,
"1": 2
}, {
"0": 1448236800000,
"1": 4
}, {
"0": 1448841600000,
"1": 2
}, {
"0": 1449446400000,
"1": 0
}, {
"0": 1450051200000,
"1": 2
}, {
"0": 1450656000000,
"1": 0
}, {
"0": 1451260800000,
"1": 0
}, {
"0": 1451865600000,
"1": 0
}, {
"0": 1452470400000,
"1": 3
}, {
"0": 1453075200000,
"1": 0
}, {
"0": 1453680000000,
"1": 3
}, {
"0": 1454284800000,
"1": 0
}],
"idx": 4
}, {
"label": "Special Events",
"data": [{
"0": 1446422400000,
"1": 0
}, {
"0": 1447027200000,
"1": 0
}, {
"0": 1447632000000,
"1": 0
}, {
"0": 1448236800000,
"1": 1
}, {
"0": 1448841600000,
"1": 0
}, {
"0": 1449446400000,
"1": 3
}, {
"0": 1450051200000,
"1": 1
}, {
"0": 1450656000000,
"1": 0
}, {
"0": 1451260800000,
"1": 0
}, {
"0": 1451865600000,
"1": 0
}, {
"0": 1452470400000,
"1": 0
}, {
"0": 1453075200000,
"1": 0
}, {
"0": 1453680000000,
"1": 0
}, {
"0": 1454284800000,
"1": 0
}],
"idx": 5
}];
var ticks = [];
for (var i = 0; i < datasets[0].data.length; i++) {
ticks.push(datasets[0].data[i][0]);
}
var totals = {};
for (var i = 0; i < datasets.length; i++) {
var dataset = datasets[i];
for (var j = 0; j < dataset.data.length; j++) {
var timestamp = dataset.data[j][0];
var value = dataset.data[j][1];
if (totals['_' + timestamp]) {
totals['_' + timestamp] += value;
} else {
totals['_' + timestamp] = value;
}
}
}
var options = {
"legend": {
"position": "ne",
"noColumns": 6
},
"yaxis": {
"min": 0
},
"xaxis": {
"mode": "time",
"timeformat": "%d %b",
// "tickSize": [7, "day"],
ticks: ticks,
"min": 1446163200000,
"max": 1454544000000 // 1454284800000
},
"grid": {
"clickable": true,
"hoverable": true
},
"series": {
"stack": true,
"bars": {
"show": true,
"barWidth": 181440000.00000003,
align: 'center',
lineWidth: 0
}
}
};
$.plot($('#CAGraph'), datasets, options);
$("#CAGraph").bind("plothover", function(event, pos, item) {
if (item) {
var percent = item.datapoint[1].toFixed(0) - item.datapoint[2].toFixed(0);
var total = totals['_' + item.datapoint[0]]; //item.datapoint[1].toFixed(0);
$("#tooltip").show();
$("#tooltip").html(
item.series.label + " " + (percent) + "<br>Total: " + total)
.css({
top: item.pageY - 25,
left: item.pageX + 10
}).fadeIn(200);
} else {
$("#tooltip").hide();
}
});
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot.tooltip/0.8.5/jquery.flot.tooltip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw=="
crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
<div id="CAGraph" style="width:910px;height:400px"></div>
<div id=tooltip></div>

Related

How do I format data from front end component to a specfic format in node js?

I have the below data from a front end component
{
"columns": [
{
"header": "Student Name",
"colSpan": 1
},
{
"header": "Sam",
"colSpan": 1
},
{
"header": "Julian",
"colSpan": 1
}
],
"data": [
{
"label": "Section",
"placeholder": "",
"data": [
{
"0": "",
"dataType": "Sam"
},
{
"1": "",
"dataType": "Julian"
}
],
"isDropDown": false
},
{
"label": "FirstName",
"placeholder": "",
"data": [
{
"0": "Rogers",
"dataType": "Sam"
},
{
"1": "Blake",
"dataType": "Julian"
}
],
"isDropDown": false
},
{
"label": "City",
"placeholder": "",
"data": [
{
"0": "NY",
"dataType": "Sam"
},
{
"1": "Seattle",
"dataType": "Julian"
}
],
"isDropDown": false
},
{
"label": "Grade",
"placeholder": "",
"data": [
{
"0": "1st Grade",
"dataType": "Sam"
},
{
"1": "2nd Grade",
"dataType": "Julian"
}
],
"isDropDown": false
},
{
"label": "Section",
"placeholder": "",
"data": [
{
"0": "",
"dataType": "Sam"
},
{
"1": "",
"dataType": "Julian"
}
],
"isDropDown": false
}
]
}
I want this data to be modified into a different format as below object
[{Name:"Sam",Grade:"1stgrade",section:"",FirstName:"Rogers",City:"NY"},{Name:"Julian",Grade:"2ndgrade",section:"",FirstName:"Blake",City:"Seattle"}]
I tried creating a new object and add names first. Goal is to create the output shown above but am facing issues in the first step itself
const col=data.columns
const dat=data.data
var arr={}
console.log(col)
for(var i=0;i<col.length;i++)
{
arr[i]={}
arr[i].NAME=col[i].header
}
console.log(arr)
Am getting the desired name populated. Output is appended with index values. How do I implement it?

As per the sample data in the question, you can loop through the data key in the object:
const sampleData ={
"columns": [
{
"header": "Student Name",
"colSpan": 1
},
{
"header": "Sam",
"colSpan": 1
},
{
"header": "Julian",
"colSpan": 1
}
],
"data": [
{
"label": "Section",
"placeholder": "",
"data": [
{
"0": "",
"dataType": "Sam"
},
{
"1": "",
"dataType": "Julian"
}
],
"isDropDown": false
},
{
"label": "FirstName",
"placeholder": "",
"data": [
{
"0": "Rogers",
"dataType": "Sam"
},
{
"1": "Blake",
"dataType": "Julian"
}
],
"isDropDown": false
},
{
"label": "City",
"placeholder": "",
"data": [
{
"0": "NY",
"dataType": "Sam"
},
{
"1": "Seattle",
"dataType": "Julian"
}
],
"isDropDown": false
},
{
"label": "Grade",
"placeholder": "",
"data": [
{
"0": "1st Grade",
"dataType": "Sam"
},
{
"1": "2nd Grade",
"dataType": "Julian"
}
],
"isDropDown": false
},
{
"label": "Section",
"placeholder": "",
"data": [
{
"0": "",
"dataType": "Sam"
},
{
"1": "",
"dataType": "Julian"
}
],
"isDropDown": false
}
]
}
const results = sampleData.data.reduce((ini, el, index) => {
if (index == 0) {
ini['Name'] = `${el.data[0]['dataType']} ${el.data[1]['dataType']}`;
}
ini[el.label] = el.data[0][0];
return ini;
}, {});
console.log(results);

The below code works
var arr=[]
const col=data.columns
for(var i=0;i<col.length-1;i++)
{
const results = data.data.reduce((ini, el, index) => {
if (index == 0) {
ini['NAME'] = `${el.data[i]['dataType']}`;
}
ini[el.label] = el.data[i][i];
return ini;
},{});
arr.push(results)
}
console.log(arr)

Mongodb, nodejs: find an object and update its value

I am struggling to find a solution to update client's data to the database.
I have a document looking like this:
{
"_id": {
"$oid": "60249fccf992b73b340c7c94"
},
"username": "john",
"inv": {
"id01": {
"n": "Apple",
"r": "0"
},
"id02": {
"n": "Pear",
"r": "0"
},
"id03": {
"n": "Pear",
"r": "0"
},
"id04": {
"n": "GreenApple",
"r": "0"
}
}
}
and this is the json data sent from the client
{
"id02": {
"n": "Pear",
"r": "1",
"z": "-1.0001",
"x": "-2.34",
"y": "-2.41"
},
"id03": {
"n": "Pear",
"r": "1",
"z": "-1.0002",
"x": "-0.52",
"y": "-2.41"
}
}
I want to look for the objects from the json data sent by client in the database (for instance: "id02") and update its value. I am pretty new to Mongodb so I am struggling with finding the proper technique to do so.
The document should be looking like this
{
"_id": {
"$oid": "60249fccf992b73b340c7c94"
},
"username": "john",
"inv": {
"id01": {
"n": "Apple",
"r": "0"
},
"id02": {
"n": "Pear",
"r": "1",
"z": "-1.0001",
"x": "-2.34",
"y": "-2.41"
},
"id03": {
"n": "Pear",
"r": "1",
"z": "-1.0002",
"x": "-0.52",
"y": "-2.41"
},
"id04": {
"n": "GreenApple",
"r": "0"
}
}
}
I try this but it replaces everything in the "inv" with the new data
var addToSet = {};
for(var key in data)
{
addToSet[key] = data[key];
}
db.get().collection('userdata').updateOne({ username: ws.userId},{'$set': {'inv':addToSet}})

I use this :
const Product = require(Path Model Moongose);
const data = {
NameProducts: req.body.title,
TitleProducts: req.body.body,
PriceProducts: req.body.price,
TagesProducts: req.body.tags
};
await Product.updateOne({ _id: Find with your idea }, { $set: data });

How to iterate through an object that was passed from a database via ejs on the client

My last question was marked as a duplicate which is understandable because I didn't explain it enough so now i'll explain it in more depth.
Here is my node.js server code, i'm using ejs as my template engine and mongo.js to connect to my mongo database
server.get('/test', (req,res) => {
db.surveys.find((err,survey) => {
res.render('test',{
survey:survey
});
});
});
The object in my database that is being passed to my view is
[{
"surveyCode": 123456,
"1": {
"question": "What is your name?",
"1": {
"type": "text",
"placeholder": "Enter your name",
"header": ""
}
},
"2": {
"question": "What grade are you in?",
"1": {
"type": "radio",
"content": "9th"
},
"2": {
"type": "radio",
"content": "10th"
},
"3": {
"type": "radio",
"content": "11th"
},
"4": {
"type": "radio",
"content": "12th"
}
},
"3": {
"question": "What is your gender?",
"1": {
"type": "radio",
"content": "Male"
},
"2": {
"type": "radio",
"content": "Female"
},
"3": {
"type": "radio",
"content": "Other"
}
}
}]
I've tried everything to try to iterate through the object, for Each and for loops didn't work for me. How can I iterate though the object in my view so I can separate each object and store it in a variable. Keep in mind it's an object in an object in an object, and I've tried to do a loop in a loop in a loop.
Thank You!

Here is some code showing how to access the inner members of your object:
var a = [
{
"1":{
"1":{
"type":"text",
"placeholder":"Enter your name",
"header":""
},
"question":"What is your name?"
},
"2":{
"1":{
"type":"radio",
"content":"9th"
},
"2":{
"type":"radio",
"content":"10th"
},
"3":{
"type":"radio",
"content":"11th"
},
"4":{
"type":"radio",
"content":"12th"
},
"question":"What grade are you in?"
},
"3":{
"1":{
"type":"radio",
"content":"Male"
},
"2":{
"type":"radio",
"content":"Female"
},
"3":{
"type":"radio",
"content":"Other"
},
"question":"What is your gender?"
},
"surveyCode":123456
}
];
for(var idx=0; idx < a.length; idx++) {
var b = a[idx];
for(var bkey in b) {
var c = b[bkey];
for(var ckey in c) {
var d = c[ckey];
for(var dkey in d) {
if (typeof d === 'object') {
console.log(dkey);
console.log(d[dkey]);
}
}
}
}
}

flot displaying correct date figures on xaxis using time

I have 13 weeks of data which i want to display as bar graph. I want the dates to start from Monday each week. I have managed to get 13 weeks to display on xaxis and 13 bar lines to display. I cannot get the dates to start from Mondays and line up with the bar line.
var datasets = [{"label":"Amend Existing Report","data":[{"0":1446422400000,"1":0},{"0":1447027200000,"1":0},{"0":1447632000000,"1":0},{"0":1448236800000,"1":0},{"0":1448841600000,"1":0},{"0":1449446400000,"1":1},{"0":1450051200000,"1":0},{"0":1450656000000,"1":0},{"0":1451260800000,"1":0},{"0":1451865600000,"1":0},{"0":1452470400000,"1":0},{"0":1453075200000,"1":1},{"0":1453680000000,"1":1},{"0":1454284800000,"1":0}],"idx":0},{"label":"Investigate Report Problem","data":[{"0":1446422400000,"1":1},{"0":1447027200000,"1":0},{"0":1447632000000,"1":2},{"0":1448236800000,"1":4},{"0":1448841600000,"1":0},{"0":1449446400000,"1":1},{"0":1450051200000,"1":0},{"0":1450656000000,"1":2},{"0":1451260800000,"1":0},{"0":1451865600000,"1":0},{"0":1452470400000,"1":0},{"0":1453075200000,"1":5},{"0":1453680000000,"1":0},{"0":1454284800000,"1":0}],"idx":1},{"label":"New Request (One Off Report)","data":[{"0":1446422400000,"1":0},{"0":1447027200000,"1":0},{"0":1447632000000,"1":1},{"0":1448236800000,"1":0},{"0":1448841600000,"1":0},{"0":1449446400000,"1":0},{"0":1450051200000,"1":0},{"0":1450656000000,"1":0},{"0":1451260800000,"1":0},{"0":1451865600000,"1":0},{"0":1452470400000,"1":0},{"0":1453075200000,"1":0},{"0":1453680000000,"1":1},{"0":1454284800000,"1":0}],"idx":2},{"label":"New Request (Regular Report)","data":[{"0":1446422400000,"1":4},{"0":1447027200000,"1":0},{"0":1447632000000,"1":2},{"0":1448236800000,"1":2},{"0":1448841600000,"1":0},{"0":1449446400000,"1":1},{"0":1450051200000,"1":0},{"0":1450656000000,"1":0},{"0":1451260800000,"1":1},{"0":1451865600000,"1":1},{"0":1452470400000,"1":0},{"0":1453075200000,"1":3},{"0":1453680000000,"1":2},{"0":1454284800000,"1":0}],"idx":3},{"label":"Other","data":[{"0":1446422400000,"1":0},{"0":1447027200000,"1":0},{"0":1447632000000,"1":2},{"0":1448236800000,"1":4},{"0":1448841600000,"1":2},{"0":1449446400000,"1":0},{"0":1450051200000,"1":2},{"0":1450656000000,"1":0},{"0":1451260800000,"1":0},{"0":1451865600000,"1":0},{"0":1452470400000,"1":3},{"0":1453075200000,"1":0},{"0":1453680000000,"1":3},{"0":1454284800000,"1":0}],"idx":4},{"label":"Special Events","data":[{"0":1446422400000,"1":0},{"0":1447027200000,"1":0},{"0":1447632000000,"1":0},{"0":1448236800000,"1":1},{"0":1448841600000,"1":0},{"0":1449446400000,"1":3},{"0":1450051200000,"1":1},{"0":1450656000000,"1":0},{"0":1451260800000,"1":0},{"0":1451865600000,"1":0},{"0":1452470400000,"1":0},{"0":1453075200000,"1":0},{"0":1453680000000,"1":0},{"0":1454284800000,"1":0}],"idx":5}];
var options = {"legend":{"position":"ne","noColumns":6},"yaxis":{"min":0},"xaxis":{"mode":"time","timeformat":"%d %b","tickSize":[7,"day"],"min":1446163200000,"max":1454284800000},"grid":{"clickable":true,"hoverable":true},"series":{"stack":true,"bars":{"show":true,"barWidth":181440000.00000003}}};
$.plot($('#CAGraph'), datasets, options);
$("#CAGraph").bind("plothover",function(event, pos, item) {
if (item) {
// console.log(event);
// console.log(pos);
//console.log(item);
var epoch = new Date(item.datapoint[0]);
var percent = item.datapoint[1] - item.datapoint[2];
$("#tooltip").html(
moment(epoch).format("DD MMM") + " - "
+ item.series.label + " " + (percent)
+ "<br>Total: " + item.datapoint[1]).css({
top : item.pageY - 25,
left : item.pageX + 10
}).fadeIn(200);
} else {
$("#tooltip").hide();
}
});
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot.tooltip/0.8.5/jquery.flot.tooltip.js"></script>
<div id ="choices_CAGraph">
</div>
<div id="CAGraph" style="width:910px;height:400px">
<div id='tooltip' style="position:absolute;display:none"></div>
My min and max calulcations for xaxis
min : (new Date(moment().subtract(14,'week').day(0).subtract(2,"day").subtract(6,"hour").format('YYYY/MM/DD')).getTime()),
max : (new Date(moment().subtract(1,'week').startOf('isoweek').format('YYYY/MM/DD')).getTime())

When the automatic tick generator from Flot does not what you want, you can always manually define the ticks (here by getting them from the data):
var ticks = [];
for (var i = 0; i < datasets[0].data.length; i++) {
ticks.push(datasets[0].data[i][0]);
}
After also specifiying align: 'center' for the bars the bars and x axis ticks are now aligned.
PS: Your data has 14 data points, not 13. I also adjusted the max value for the x axis so the last bar is visible.
var datasets = [{
"label": "Amend Existing Report",
"data": [{
"0": 1446422400000,
"1": 0
}, {
"0": 1447027200000,
"1": 0
}, {
"0": 1447632000000,
"1": 0
}, {
"0": 1448236800000,
"1": 0
}, {
"0": 1448841600000,
"1": 0
}, {
"0": 1449446400000,
"1": 1
}, {
"0": 1450051200000,
"1": 0
}, {
"0": 1450656000000,
"1": 0
}, {
"0": 1451260800000,
"1": 0
}, {
"0": 1451865600000,
"1": 0
}, {
"0": 1452470400000,
"1": 0
}, {
"0": 1453075200000,
"1": 1
}, {
"0": 1453680000000,
"1": 1
}, {
"0": 1454284800000,
"1": 0
}],
"idx": 0
}, {
"label": "Investigate Report Problem",
"data": [{
"0": 1446422400000,
"1": 1
}, {
"0": 1447027200000,
"1": 0
}, {
"0": 1447632000000,
"1": 2
}, {
"0": 1448236800000,
"1": 4
}, {
"0": 1448841600000,
"1": 0
}, {
"0": 1449446400000,
"1": 1
}, {
"0": 1450051200000,
"1": 0
}, {
"0": 1450656000000,
"1": 2
}, {
"0": 1451260800000,
"1": 0
}, {
"0": 1451865600000,
"1": 0
}, {
"0": 1452470400000,
"1": 0
}, {
"0": 1453075200000,
"1": 5
}, {
"0": 1453680000000,
"1": 0
}, {
"0": 1454284800000,
"1": 0
}],
"idx": 1
}, {
"label": "New Request (One Off Report)",
"data": [{
"0": 1446422400000,
"1": 0
}, {
"0": 1447027200000,
"1": 0
}, {
"0": 1447632000000,
"1": 1
}, {
"0": 1448236800000,
"1": 0
}, {
"0": 1448841600000,
"1": 0
}, {
"0": 1449446400000,
"1": 0
}, {
"0": 1450051200000,
"1": 0
}, {
"0": 1450656000000,
"1": 0
}, {
"0": 1451260800000,
"1": 0
}, {
"0": 1451865600000,
"1": 0
}, {
"0": 1452470400000,
"1": 0
}, {
"0": 1453075200000,
"1": 0
}, {
"0": 1453680000000,
"1": 1
}, {
"0": 1454284800000,
"1": 0
}],
"idx": 2
}, {
"label": "New Request (Regular Report)",
"data": [{
"0": 1446422400000,
"1": 4
}, {
"0": 1447027200000,
"1": 0
}, {
"0": 1447632000000,
"1": 2
}, {
"0": 1448236800000,
"1": 2
}, {
"0": 1448841600000,
"1": 0
}, {
"0": 1449446400000,
"1": 1
}, {
"0": 1450051200000,
"1": 0
}, {
"0": 1450656000000,
"1": 0
}, {
"0": 1451260800000,
"1": 1
}, {
"0": 1451865600000,
"1": 1
}, {
"0": 1452470400000,
"1": 0
}, {
"0": 1453075200000,
"1": 3
}, {
"0": 1453680000000,
"1": 2
}, {
"0": 1454284800000,
"1": 0
}],
"idx": 3
}, {
"label": "Other",
"data": [{
"0": 1446422400000,
"1": 0
}, {
"0": 1447027200000,
"1": 0
}, {
"0": 1447632000000,
"1": 2
}, {
"0": 1448236800000,
"1": 4
}, {
"0": 1448841600000,
"1": 2
}, {
"0": 1449446400000,
"1": 0
}, {
"0": 1450051200000,
"1": 2
}, {
"0": 1450656000000,
"1": 0
}, {
"0": 1451260800000,
"1": 0
}, {
"0": 1451865600000,
"1": 0
}, {
"0": 1452470400000,
"1": 3
}, {
"0": 1453075200000,
"1": 0
}, {
"0": 1453680000000,
"1": 3
}, {
"0": 1454284800000,
"1": 0
}],
"idx": 4
}, {
"label": "Special Events",
"data": [{
"0": 1446422400000,
"1": 0
}, {
"0": 1447027200000,
"1": 0
}, {
"0": 1447632000000,
"1": 0
}, {
"0": 1448236800000,
"1": 1
}, {
"0": 1448841600000,
"1": 0
}, {
"0": 1449446400000,
"1": 3
}, {
"0": 1450051200000,
"1": 1
}, {
"0": 1450656000000,
"1": 0
}, {
"0": 1451260800000,
"1": 0
}, {
"0": 1451865600000,
"1": 0
}, {
"0": 1452470400000,
"1": 0
}, {
"0": 1453075200000,
"1": 0
}, {
"0": 1453680000000,
"1": 0
}, {
"0": 1454284800000,
"1": 0
}],
"idx": 5
}];
var ticks = [];
for (var i = 0; i < datasets[0].data.length; i++) {
ticks.push(datasets[0].data[i][0]);
}
var options = {
"legend": {
"position": "ne",
"noColumns": 6
},
"yaxis": {
"min": 0
},
"xaxis": {
"mode": "time",
"timeformat": "%d %b",
// "tickSize": [7, "day"],
ticks: ticks,
"min": 1446163200000,
"max": 1454544000000 // 1454284800000
},
"grid": {
"clickable": true,
"hoverable": true
},
"series": {
"stack": true,
"bars": {
"show": true,
"barWidth": 181440000.00000003,
align: 'center'
}
}
};
$.plot($('#CAGraph'), datasets, options);
$("#CAGraph").bind("plothover", function(event, pos, item) {
if (item) {
// console.log(event);
// console.log(pos);
//console.log(item);
var epoch = new Date(item.datapoint[0]);
var percent = item.datapoint[1] - item.datapoint[2];
$("#tooltip").html(
moment(epoch).format("DD MMM") + " - " + item.series.label + " " + (percent) + "<br>Total: " + item.datapoint[1]).css({
top: item.pageY - 25,
left: item.pageX + 10
}).fadeIn(200);
} else {
$("#tooltip").hide();
}
});
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot.tooltip/0.8.5/jquery.flot.tooltip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<div id="choices_CAGraph"></div>
<div id="CAGraph" style="width:910px;height:400px"></div>
<div id='tooltip' style="position:absolute;display:none"></div>

how to display bar graph using stack

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

Resources