3

Eu tenho uma app que apresenta um gráfico cujo os dados veem da base de dados, em que as colunas de data armazenam um Unix timestamp, os dados são recebidos como uma JSON. Este gráfico funciona bem mas gostaria que no eixo dos X aparecesse só aparece as ultimas 48 horas, mas que no zoomout/drag (Navigate plugin) consigamos ver mais atrás. Gostaria só que o gráfico apresentá-se apenas as ultimas 48 horas, mas caso faça zoomout ou drag consiga ver os anteriores.

Aqui está o meu JSfiddle, funciona bem apenas gostaria de acrecentar a funcionalidade e não sei como.

Código:

        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 Resposta 1

1

Para apresentar só os ultimos dois dias, mas poder ver os anteriores caso queira:

JS:

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

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

O meu novo JSfiddle

2
  • +1 - reabri a pergunta, acho esta funcionalidade bem interessante. Se puderes juntar um jsFiddle á resposta seria excelente.
    – Sergio
    Commented 18/01/2016 às 18:50
  • 1
    Obrigado. Feito
    – Miguel
    Commented 19/01/2016 às 14:36

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .