Le dernier point n'affiche dans Rickshaw Graphique

Question

Mes données sont comme comme dans l'image ci-dessous:

Le graphique Rickshaw est parfait pour ces données car l'intervalle de date et l'heure entre toutes les dates sont longues. J'ai défini la colonne "price" comme données Y-Axis et la colonne "date" comme données X-Axis. Mais quand j'ajoute une nouvelle entrée comme ci-dessous l'image alors nouveau point ne montrant pas pour cette nouvelle entrée parce que l'intervalle de temps est de 1 minute.

Voir l'entrée de l'ID 26 et 27, l'intervalle de temps est de 1 min et 2 secondes. Donc graphique ne montre pas ce nouveau point. Et aussi je veux placer la date en tant que valeurs des données d'axe X avec chaque point.

Après l'entrée de 27, mon graphique n'a pas montré le point de 300. Mon graphique montre la 26e entrée avec 65 prix. Voir sur l'image ci-dessous.

Peut être qu'il cachera en raison de l'intervalle. Et si j'augmente l'intervalle, alors ça va bien s'afficher.

Answer 1

Les deux questions que vous avez eues concernent l'Axe X du graphique. De la capture d'écran que vous avez posté, je suppose que l'axe X prend des valeurs entières (23, 24, 25, etc., est autour du pic de votre graphique).

Pour tracer votre dernier point dans le graphique, vous n'avez qu'à insérer un élément de plus dans le tableau et afficher le graphique. Ci-dessous, il y a un exemple de jeu de données [12x2].

var data = [{ x: 1, y: 92228531 }, 
     { x: 2, y: 106021568 }, 
     { x: 3, y: 123202660 }, 
     { x: 4, y: 132165129 }, 
     { x: 5, y: 151325798 }, 
     { x: 6, y: 179323175 }, 
     { x: 7, y: 203211926 }, 
     { x: 8, y: 226545805 }, 
     { x: 9, y: 248709873 }, 
     { x: 10, y: 281421906 }, 
     { x: 11, y: 308745538 }, 
     { x: 12, y: 329538099 } ]; 

var graph = new Rickshaw.Graph({ 
    element: document.querySelector("#chart"), 
    width: 540, 
    height: 240, 
    series: [ { 
      data: data, 
      color: 'steelblue' 
    } ] 
}); 

var x_axis = new Rickshaw.Graph.Axis.X({ graph: graph }); 
var y_axis = new Rickshaw.Graph.Axis.Y({ 
    graph: graph, 
    orientation: 'left', 
    tickFormat: Rickshaw.Fixtures.Number.formatKMBT, 
    element: document.getElementById('axis0'), 
}); 

graph.render(); 

En ce qui concerne votre dernière question, si vous voulez rendre le temps dans l'axe X, vous devez utiliser Rickshaw.Graph.Axis.Time

Par exemple:

var x_axis = new Rickshaw.Graph.Axis.Time({ graph: graph }); 

Pour Axis.Time que vous devez faire Assurez-vous que vos données (dans votre cas les données de la colonne 'date') sont dans un format approprié.

Essayez d'utiliser .toUTCString() vous pouvez trouver un exemple here.