jquery – Flot charts, default x axis from 2 days ago to now (last 48 hours)

Question:

I have an app that presents a graph whose dados from the database, where the date columns store a Unix timestamp , the data is received as a JSON. This chart works fine but I would like it to appear on the X axis only for the last 48 hours, but in the zoomout/drag (Navigate plugin) we can see further back. I would just like the chart 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 I just want to add functionality and I don't 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;
            }
        });

Answer:

To show only the last two days, but you can see the previous ones if you want:

JS:

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

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

my new JSfiddle

Scroll to Top