3
I have an app that features a chart whose dados
from the database, where the date columns store a Unix timestamp
, the data is received as a JSON. This graph works well but I would like the X axis to appear only the last 48 hours, but in zoomout/drag (Navigate plugin) we can see more behind. I would just like the chart to show only the last 48 hours, but if you do zoomout or drag you can see the previous ones.
Here is my Jsfiddle, works well just like to add functionality and 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;
}
});
+1
- reopened the question, I find this feature very interesting. If you can join a jsFiddle to the answer it would be great.– Sergio
Thank you. Done
– Miguel