flot 使用时间在 x 轴上显示正确的日期数字
flot displaying correct date figures on xaxis using time
我有 13 周的数据，我想将其显示为条形图。我希望日期从每周一开始。我已经设法获得 13 周的时间来显示 xaxis 和 13 条条线来显示。我无法获得从星期一开始并与小节线对齐的日期。
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>
我对 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())
当 Flot 的自动报价生成器不是您想要的时，您始终可以手动定义报价（此处通过从数据中获取）：
var ticks = [];
for (var i = 0; i < datasets[0].data.length; i++) {
ticks.push(datasets[0].data[i][0]);
}
在还为条形图指定 align: 'center' 之后，条形图和 x 轴刻度现在对齐了。
PS：你的数据有 14 个数据点，而不是 13 个。我还调整了 x 轴的最大值，所以最后一个条形可见。
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>
我有 13 周的数据，我想将其显示为条形图。我希望日期从每周一开始。我已经设法获得 13 周的时间来显示 xaxis 和 13 条条线来显示。我无法获得从星期一开始并与小节线对齐的日期。
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>
我对 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())
当 Flot 的自动报价生成器不是您想要的时，您始终可以手动定义报价（此处通过从数据中获取）：
var ticks = [];
for (var i = 0; i < datasets[0].data.length; i++) {
ticks.push(datasets[0].data[i][0]);
}
在还为条形图指定 align: 'center' 之后，条形图和 x 轴刻度现在对齐了。
PS：你的数据有 14 个数据点，而不是 13 个。我还调整了 x 轴的最大值，所以最后一个条形可见。
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>