Flot Charts, default x-axis from two days ago until now (last 48 hours)

Asked

Viewed 83 times

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 answer

1


To present only the last two days, but to be able to 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

  • +1 - reopened the question, I find this feature very interesting. If you can join a jsFiddle to the answer it would be great.

  • 1

    Thank you. Done

Browser other questions tagged

You are not signed in. Login or sign up in order to post.