Graphique en temps réel des données sur un graphique en courbes avec html5
Je souhaite créer un graphique à courbes qui se met à jour toutes les quelques secondes et n'a pas besoin que la page soit actualisée (il obtiendrait les informations à partir d'un fichier séparé qui se met à jour sur un serveur). Ne contient aucune bibliothèque JavaScript (autre que JQuery). ça va faire que c'est facile? Quelqu'un pourrait-il montrer un exemple méchant sur une page Web? Sur une échelle de 1 à 10, combien cela serait-il difficile (10 étant difficile)?
De plus, les données sont mises à jour selon un intervalle fixe de 10 secondes si cela compte. Et si possible, je voudrais m'en tenir aux CSS3 HTML5 et javascript.
Plusieurs bibliothèques de graphiques peuvent être utilisées: gRaphael , Highcharts et celui mentionné par d'autres. Ces bibliothèques sont assez faciles à utiliser et bien documentées (disons 1 sur l’échelle de difficulté).
Autant que je sache, ces bibliothèques ne sont pas "en temps réel" car elles ne permettent pas d'ajouter de nouveaux points à la volée. Pour ajouter un nouveau point, vous devez redessiner le graphique complet. Mais je pense que ce n'est pas un problème, car le tracé du graphique est rapide. J'ai fait quelques essais avec Raphael et je n'ai remarqué aucun problème avec cette approche. Si vous mettez à jour votre taux de 10, cela devrait fonctionner correctement (mais cela peut dépendre de la complexité de vos graphiques).
Si redessiner le graphique en entier pose un problème, vous devrez peut-être développer vous-même un graphique avec une bibliothèque de graphiques vectoriels telle que Raphael ou paper.js . Ce sera un peu plus difficile que d'utiliser une bibliothèque de cartographie, mais cela devrait être faisable. (Disons 5 sur l'échelle de difficulté).
Comme vous obtenez les données sur un intervalle fixe, vous pouvez utiliser une bibliothèque ajax régulière. jQuery est ok pour moi mais il y a d'autres choix. Cela peut ne pas être le meilleur choix pour un intervalle non fixé et dans ce cas, vous devrez peut-être regarder quelque chose comme socket.io mais cela aurait aussi des conséquences côté serveur.
Note1: Raphael, gRaphael et Highcharts ne sont pas purement HTML5, mais SVG/VML, mais je suppose que c'est aussi un choix acceptable.
Note2: il semble que Highchart ne nécessite pas de redessiner le graphique lors de l'insertion de nouveaux points. Voir http://www.highcharts.com/documentation/how-to-use#live-charts
Je suggérerais Smoothie Charts .
C'est très simple à utiliser, facilement et largement configurable, et fait un excellent travail de streaming de données en temps réel.
Il y a un constructeur qui vous permet d'explorer les options et de générer du code .
Avertissement: Je contribue à la bibliothèque.
Je crois que c'est exactement ce que vous recherchez:
http://www.highcharts.com/demo/dynamic-update
Open source (bien qu'une licence soit requise pour les sites Web commerciaux), rapide appareil/navigateur.
Plusieurs choses qui pourraient vous aider:
Canvas Express est une bibliothèque de graphiques puissante: http://canvasxpress.org/
Vous trouverez ici un tutoriel sur le roulement de vos propres graphes basés sur une équation: http://www.html5canvastutorials.com/labs/html5-canvas-graphing-an-equation/
Utiliser une solution de canevas est très simple. Vous pouvez récupérer vos données périodiques pour le graphique en utilisant ajax et redessiner le graphique chaque fois que vous récupérez de nouvelles données.
Comme tout est côté client, vous n’aurez pas à rafraîchir la page.
Si vous connaissez votre chemin en javascript et ajax, alors ce sera une difficulté moyenne. Si vous ne le faites pas, vous devrez probablement poser d'autres questions sur Stack Ovreflow pour vous aider avec les pièces qui vous coincent.
Vous voudrez peut-être aussi regarder Graphique CanvasJS qui est construit sur l’élément HTML5 Canvas. Le rendu est très rapide et peut être mis à jour toutes les 50 à 100 millisecondes sans causer de problèmes de mémoire.
[Divulgation complète: je fais partie de l'équipe]
Le moyen le plus simple est d’utiliser plotti.co - le microservice que j’ai créé exactement pour cela. Cela dépend de la façon dont vous obtenez les données, mais le modèle d'utilisation général consiste à inclure une image SVG dans votre code HTML, comme
<object data="http://plotti.co/FSktKOvATQ8H/plot.svg" type="image/svg+xml"/>
et alimenter vos données dans une requête GET (ou en utilisant un (new Image(1,1)).src=... Méthode JavaScript de la même page ou de toute autre page), comme ceci:
http://plotti.co/FSktKOvATQ8H?d=1,2,
le mettre en place localement est également simple
Voici un Gist que j'ai découvert pour les graphiques en temps réel dans ChartJS :
https://Gist.github.com/arisetyo/5985848
ChartJS semble simple à utiliser et agréable.
Il existe également FusionCharts , une bibliothèque plus sophistiquée pour les entreprises, avec une démo en temps réel ici:
http://www.fusioncharts.com/explore/real-time-charts
[~ # ~] edit [~ # ~] J'ai aussi commencé à utiliser Rickshaw pour les graphes en temps réel. C'est facile à utiliser et assez personnalisable: http://code.shutterstock.com/rickshaw/
Ce fil est peut-être très très vieux maintenant. Mais je veux partager ces résultats pour quelqu'un qui voit ce fil. Ran une comparaison betn. Flotr2, ChartJS, highcharts de manière asynchrone. Flotr2 semble être le plus rapide. Testé cela en passant un nouveau point de données toutes les 50 ms jusqu'à 1000 points de données totalement. Flotr2 a été le plus rapide pour moi même s'il semble redessiner régulièrement les graphiques.
Vous obtenez les données du serveur, mettez à jour votre jeu de données précédemment disponible, puis utilisez probablement l'une des bibliothèques disponibles gratuitement pour dessiner le graphique [par exemple: http://www.rgraph.net/]
Éléments à prendre en compte: Si votre graphique représente un état, récupérez uniquement les nouvelles données avec xhr, mettez à jour les données sur le client et dessinez.
http://www.rgraph.net/ est excellent pour les graphiques et les graphiques.
Vous pouvez également essayer Meteor Charts, il est très rapide (toile html5), contient de nombreux tutoriels et est également bien documenté. Les mises à jour en direct fonctionnent vraiment bien. Vous venez de mettre à jour le modèle et d'exécuter chart.draw () pour rendre à nouveau le graphique de scène. Voici une démo:
Ajout à partir de 2015 Autant que je sache, il n'y a toujours pas de graphique en courbes orienté au moment de l'exécution. Je veux dire tableau qui comportements "demander de nouveaux points chaque N sec", "purger les anciennes données", vous pouvez configurer "de manière déclarative".
Au lieu de cela, il y a graphi api http://graphite-api.readthedocs.org/en/latest/ pour le côté serveur et le nombre de plugins côté client qui l'utilisent. Mais en réalité, ils sont assez limités, sans fonctionnalités avancées qui nous plaisent: scroller des données, diagrammes de distance, segmentation d’axeX sur les phases, etc.
Il semble qu'il y ait une différence fondamentale entre les tâches "affichez-moi un tableau" et "tableau en temps réel".