Overview

Un diagramme de flux, ou streamgraph (stream graph), est un type de graphique d'aires empilées qui est centré autour d'un axe central, ce qui donne une forme fluide et organique.

Nous avons deux modes de fonctionnement.

Dans le premier mode, que l'on pourrait appeler le mode « points successifs », nous spécifions pour chaque série une valeur en y lors de chaque message. Les valeurs en x sont des incréments automatiques. Cela conduit à l'affichage d'un point supplémentaire sur le graphique, et les points continuent de s'ajouter au graphique jusqu'aux limites de quantité définies par l'utilisateur, puis chaque nouveau point remplace le plus ancien, et ainsi de suite. Ce mode est pratique pour les séries temporelles où les données arrivent progressivement.

Le second mode est le mode XY : un tableau est spécifié à y, qui définit explicitement tous les points à afficher.

Successive Points Mode

Si un utilisateur configure une série « Series 1 » en choisissant la propriété « prop1 » pour l'axe y et une série « Series 2 » en choisissant la propriété « prop2 » pour l'axe y, alors lors de la réception du message suivant :

{
  "payload": {
    "prop1": 4,
    "prop2": 8
  }
}

deux points sont affichés sur le graphique, à l'abscisse « 0 » et aux ordonnées 4 et 8.

Si un nouveau message est reçu :

{
  "payload": {
    "prop1": 6,
    "prop2": 10
  }
}

deux nouveaux points sont affichés, à l'abscisse 1 et aux ordonnées 6 et 10.

XY Mode

Si un utilisateur configure une série « Series 1 » en choisissant le tableau « tab1 » et une série « Series 2 » en choisissant le tableau « tab2 », alors lors de la réception du message suivant :

{
  "payload": {
    "tab1": [4, 6],
    "tab2": [8, 10]
  }
}

Quatre points sont affichés sur le graphique : deux à l'abscisse « 0 » (et les ordonnées 4 et 6), et deux autres à l'abscisse « 1 » (et les ordonnées 8 et 10). Lorsque de nouveaux tableaux pour x et y sont reçus, les données reçues remplacent le graphique existant. La limite de points n'a aucun sens ici et doit être ignorée.