jquery - Flot charts xaxis, 2 days ago by default without removing the ability to see the previous days -

here's problem: have flot chart receives data server json string, dates stored unix timestamp format. problem want show past x time default in xaxis, e.g 2 days ago, without removing ability show pevious (days) ones on scrolldown (zoomout) or drag (navigate plugin). i'm looking solution avoid can't read xaxis in month because xaxis has 30 days on it.

here's jsfiddle. works fine, want add funcionality

js:

    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 = [];     (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 = [];     (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;         }     }); 

just found solution, turns out that's default flot charts never makes dates on xaxis unreadable, did experience (using code below passed 60 days), balanced depending starting time (date of first point given), end time (date of last point) , width of plot, guess. if need use way:

var minx = new date(); minx.setdate(minx.getdate() - 2);  ...   xaxis: {      mode: 'time', timeformat: '%d/%m/%y',      ticklength: 5,      min: minx,   }, ...