Graphique de données en temps réel

Question

Je voudrais construire un graphique de données en temps réel basé sur le Web et je regarde les différentes options telles que:

• Toile HTML5
• Bibliothèques JS avec prise en charge des graphiques tels que Extjs

Par temps réel, je veux dire, soit le client interrogeant le serveur Web dit chaque seconde ou utilisant ajax inverse; le serveur envoie les données au client lorsqu'elles sont disponibles.

Pouvez-vous en recommander un?

Answer 1

Vous pouvez envisager d'utiliser Flot , une bibliothèque de traçage open source basée sur jQuery .

Je suppose qu'en temps réel, vous voulez dire que le graphique se mettra à jour automatiquement. Voici à quoi ressemblerait votre code si vous deviez récupérer et tracer les données en utilisant AJAX à des intervalles de 1 seconde:

function fetchData() {
   $.ajax({
      url:      'json_fetch_new_data.php',
      method:   'GET',
      dataType: 'json',
      success:  function(series) {
         var data = [ series ];

         $.plot($('#placeholder'), data, options);
      }
   });

   setTimeout(fetchData, 1000);
}

Assurez-vous de consulter la démo suivante pour la voir en action (cliquez sur le bouton "Sondage pour les données"):

• Flot Exemples - Mise à jour des graphiques avec AJAX

Pour plus d'informations sur Flot:

• Site du projet Flot
• Exemples Flot
• Autres exemples Flot

Answer 2

Il y a aussi SmoothieCharts qui est plus conçu pour ce cas d'utilisation.

Answer 3

Autre solution avec design plus Nice et possibilités:

https://changelog.com/posts/rickshaw-realtime-javascript-graphing-library

exemple: http://shutterstock.github.com/rickshaw/examples/extensions.html

code: https://github.com/shutterstock/rickshaw