Jak skonfigurować flot, aby narysować brakujące szeregi czasowe na osi Y w punkcie zero?

Question

Używam flot (flot on github) narysować wykres z poniższej danych szeregów czasowych:

[ 
    [1357171200000, 1], 
    [1357344000000, 1], 
    [1357430400000, 2], 
    [1357516800000, 2], 
    [1357689600000, 3], 
    [1357776000000, 1] 
] 

Jak widać istnieją pewne punkty w wich Pokaż wykres sprzedaży dla danego dnia. Moja odpowiedź jsona nie zawiera liczby sprzedaży/danych dla dni, w których nie doszło do sprzedaży. Na przykład 04 stycznia. Jak mogę skonfigurować flot, aby narysować brakujące dni na osi Y w punkcie zero (ponieważ nie ma sprzedaży)? Jak widać w obrazie flot łączy punkty, więc na wykresie nie ma punktów zerowych.

Answer 1

Oto rozwiązanie, które tworzy nową tablicę dodając brakujące dni i ustawiania ich wartości do zera :

/* create and return new array padding missing days*/ 
function newDataArray(data) { 
    var startDay = data[0][0], 
    newData = [data[0]]; 

    for (i = 1; i < data.length; i++) { 
    var diff = dateDiff(data[i - 1][0], data[i][0]); 
    var startDate = new Date(data[i - 1][0]); 
    if (diff > 1) { 
     for (j = 0; j < diff - 1; j++) { 
     var fillDate = new Date(startDate).setDate(startDate.getDate() + (j + 1)); 
      newData.push([fillDate, 0]); 
     } 
    } 
    newData.push(data[i]); 
    } 
    return newData; 
} 


/* helper function to find date differences*/ 
function dateDiff(d1, d2) { 
    return Math.floor((d2 - d1)/(1000 * 60 * 60 * 24)); 
} 

Sposób użycia:

var data = [ 
    [1357171200000, 1], 
    [1357344000000, 1], 
    [1357430400000, 2], 
    [1357516800000, 2], 
    [1357689600000, 3], 
    [1357776000000, 1] 
]; 

var newData=newDataArray(data); 
/* pass newData to flot*/ 

DEMO: http://jsfiddle.net/LK2gD/3/

Answer 2

Tak, masz dzienny licznik. Możesz następnie powtórzyć nad każdym wpisem i znaleźć numer dnia między bieżącym wpisem a następnym, następnie będziesz musiał wypełnić tablicę 0.

Znacznie lepiej jest użyć tablicy wypełnionej zero i następnie dodaj tylko liczbę dla daty, którą masz w bieżącej tablicy, a następnie nie będziesz musiał sprawdzać daty.

Ty codziennie przedział

var millisInDay = 1000*60*60*24; 

To daje liczbę dziennego przedziału

var intervals = parseInt(((lastDateInMillis - startDateInMillis)/ 
            millisInDay) + 1); 

Wtedy gdy iteracyjne nad tablicy daty

[[1357171200000, 1], [1357344000000, 1], [1357430400000, 2], 
[1357516800000, 2], [1357689600000, 3], [1357776000000, 1]] 

Sprawdź, w którym przedział jest datą i aktualizuje liczbę w tablicy "interwałowej" (counts)

var interval = ((currentDateMillis - startDateInMillis)/millisInDay); 
counts[interval] += currentCount; 

I wtedy można grać z index mapować liczbę z danego dnia:

function getEpochStartInterval(index){ 
    return startDateInMillis + (index * millisInDay); 
} 

function getEpochEndInterval(index){ 
    return startDateInMillis + ((index + 1) * millisInDay); 
}