I have an app that displays a graph whose dados
is from the database, where the date columns store a Unix timestamp
, the data is received as a JSON. This graph works fine but I would like the X axis to appear only the last 48 hours, but in the zoomout / drag (Navigate plugin) we can see more behind. I would just like the graphic to show only the last 48 hours, but if you zoom out or drag you can see the previous ones.
Here's my JSfiddle , it works fine just like to add functionality and I do not know how.
Code:
var maxY1 = 2700 + 200;
var invoicesDone = JSON.parse('{"1":[2820,"1452786357","Lexy Panterra"],"3":[1200,"1452786372","Lexy Panterra"],"9":[139.98,"1452862028","Lexy Panterra"],"12":[139.98,"1452862796","Lexy Panterra"],"15":[75,"1452881987","Lexy Panterra"],"17":[69.99,"1452893153","Lexy Panterra"]}');
var invoicesPending = JSON.parse('{"2":[90,"1452786365","Lexy Panterra"],"4":[650,"1452786991","Lexy Panterra"],"5":[75,"1452853490","Lexy Panterra"],"6":[120,"1452861281","Lexy Panterra"],"7":[18.1,"1452861333","Lexy Panterra"],"8":[75,"1452861815","Lexy Panterra"],"10":[18.1,"1452862035","Lexy Panterra"],"11":[69.99,"1452862576","Lexy Panterra"],"13":[69.99,"1452871025","Lexy Panterra"],"14":[69.99,"1452873140","Lexy Panterra"],"16":[680,"1452882012","Lexy Panterra"],"18":[720,"1452937569","Miguel Fraz\u00e3o"]}');
var idInvoicesDone = [];
var invoicesDoneData = [];
for (var key in invoicesDone) {
idInvoicesDone.push({'id': key, 'name': invoicesDone[key][2]});
invoicesDoneData.push([invoicesDone[key][1]*1000, invoicesDone[key][0]]);
}
var idInvoicesPending = [];
var invoicesPendingData = [];
for (var key in invoicesPending) {
idInvoicesPending.push({'id': key, 'name': invoicesPending[key][2]});
invoicesPendingData.push([invoicesPending[key][1]*1000, invoicesPending[key][0]]);
}
/*var 2daysAgo = new Date(1313564400000).getDate();
alert(2daysAgo);*/
var data1 = [
{
label:"Faturas despachadas",
data: invoicesDoneData,
links: idInvoicesDone,
color: "green",
},
{
label:"Faturas pendentes",
data: invoicesPendingData,
links: idInvoicesPending,
color: "orange",
},
];
var options1 = {
fill: true,
grid: {
hoverable: true,
clickable: true
},
points: {
show: true
},
xaxis: {
mode: 'time', timeformat: '%d/%m/%y',
tickLength: 5,
},
yaxis: {
max: maxY1,
},
pan: {
interactive: true
},
zoom: {
interactive: true,
mode: "x"
},
legend: {
position: 'nw'
}
};
$.plot($("#plot1"), data1, options1);
var xaxisLabel1 = $("<div class='axisLabel xaxisLabel'></div>").text("Dia da encomenda").appendTo($('#plot1'));
var yaxisLabel1 = $("<div class='axisLabel yaxisLabel'></div>").text("Total da encomenda (€)").appendTo($('#plot1'));
yaxisLabel1.css("margin-top", yaxisLabel1.width() / 2 - 20);
$("<div id='tooltip'></div>").css({
position: "absolute",
display: "none",
border: "1px solid #fdd",
padding: "2px",
"background-color": "#fee",
opacity: 0.80
}).appendTo("body");
$("#plot1").bind("plothover", function (event, pos, item) {
if (item) {
var date = new Date(item.datapoint[0]);
var month = date.getMonth()+1;
var x = date.getDate()+ '-' +month+ '-' +date.getFullYear()+ ', ' +date.getHours()+ ':' +date.getMinutes();
var y = item.datapoint[1].toFixed(2);
var linkIndex = item.dataIndex;
var invoiceUser = item.series.links[linkIndex]['name'];
var textTooltip = 'Valor: ' +y+ ' €<br>Dia: ' +x+ '<br>Utilizador: ' +invoiceUser;
$("#tooltip").html(textTooltip)
.css({top: item.pageY+5, left: item.pageX+5})
.fadeIn(200);
}
else {
$("#tooltip").hide();
}
});
$("#plot1").bind("plotclick", function (event, pos, item) {
if (item) {
var linkIndex = item.dataIndex;
var invoiceId = item.series.links[linkIndex]['id'];
window.location.href = '/admin/dashboard/invoice/' +invoiceId;
}
});