Wie konfiguriere ich Flot, um fehlende Zeitreihen auf der Y-Achse am Nullpunkt zu zeichnen?

Question

Ich verwende flicht (flot on github) ein Diagramm mit der folgenden Zeitreihendaten zu zeichnen:

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

Wie Sie einige Punkte in der Grafik Wich sehen können gibt es zeigen, sind die Verkäufe für den jeweiligen Tag. Meine JSON-Antwort enthält keine Verkaufszahlen/Daten für Tage, an denen kein Verkauf stattgefunden hat. Zum Beispiel der 04. Januar. Wie kann ich Flot konfigurieren, um die fehlenden Tage auf der Y-Achse am Nullpunkt zu zeichnen (weil es keine Verkäufe gibt)? Wie Sie im Bild sehen können, verbindet die Flot die Punkte, so dass keine Nullpunkte in der Grafik vorhanden sind.

Answer 1

Hier ist eine Lösung, die ein neues Array-Zugabe in fehlenden Tage erstellt und Einstellung ihrer Werte auf Null :

/* 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)); 
} 

zu benutzen:

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

So haben Sie täglich zählen. Sie können dann über jeden Eintrag iterieren und finden Sie die Anzahl der Tage zwischen dem aktuellen Eintrag und dem nächsten, dann müssen Sie nur Array mit 0 füllen.

Es ist viel besser, eine Null gefüllt Array und verwenden Fügen Sie dann nur die Anzahl für das Datum hinzu, das Sie in Ihrem aktuellen Array haben. Dann müssen Sie das Datum nicht überprüfen.

Sie täglich Intervall

var millisInDay = 1000*60*60*24; 

Dies wird Ihnen die Anzahl der täglichen Intervall

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

Dann geben Sie, wenn Sie über das Array von Datum, in dem

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

prüfen

iterieren Intervall ist das Datum und aktualisiert die Anzahl im Array 'interval' ( counts)

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

Und dann können Sie mit index spielen die Zählung mit einem bestimmten Tag zur Karte:

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

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