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

Question

Here's my problem: I have a flot chart that receives data from the server by a JSON string, the dates are stored with the unix timestamp format. My problem is that i want to show just the past X time by default in the xaxis, e.g 2 days ago, without removing the ability to show the pevious (days) ones on scrolldown (zoomout) or drag (navigate plugin). I'm just looking for a solution to avoid we can't read the xaxis in a month because the xaxis has 30 days on it.

Here's my JSfiddle. It works fine, i just want to add this 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 = [];
    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;
        }
    });

Answer 1

Just found the solution, but turns out that's by default flot charts never makes the dates on xaxis unreadable, i did the experience (using the code below with passed 60 days), it will be balanced depending the starting time (date of the first point given), end time (date of last point) and the width of the plot, i guess. If i really need it i could use it this way:

var minX = new Date();
minX.setDate(minX.getDate() - 2);

...
  xaxis: {
     mode: 'time', timeformat: '%d/%m/%y',
     tickLength: 5,
     min: minX,
  },
...