Graphique de données en temps réel sur un graphique linéaire avec html5 [fermé]
je veux faire un graphique de ligne qui met à jour toutes les deux secondes et n'a pas besoin que la page soit rafraîchie(il obtiendrait les informations d'un fichier séparé qui met à jour sur un serveur), est-ce que leurs libs JavaScript(autre que JQuery) qui vont rendre cela facile? quelqu'un pourrait-il montrer signifier exemple sur une page web? Sur une échelle de 1 à 10 comment dur serait-ce?(10 étant dur)
aussi les données sont mises à jour sur un intervalle fixe de 10s si cela compte. Et si possible je voudrais coller pour seulement CSS3 HTML5 et javascript.
14 réponses
il existe plusieurs bibliothèques de charting qui peuvent être utilisées : gRaphael, Highcharts et celui mentionné par d'autres. Ces bibliothèques sont très faciles à utiliser et bien documentée (disons 1 sur l'échelle de difficulté).
AFAIK, ces libs ne sont pas "temps réel" parce qu'ils ne donnent pas la possibilité d'ajouter de nouveaux points à la volée. Pour ajouter un nouveau point, vous devez redessiner le tableau complet. Mais je pense que ce n'est pas un problème parce que redessiner le tableau est rapide. J'ai fait quelques essais avec gRaphael et je n'ai pas remarqué de problème avec cette approche. Si vous mettez à jour le taux est 10s qui devrait fonctionner bien (mais cela peut dépendre de la complexité de vos graphiques).
si redessiner la carte entière est un problème, vous pourriez avoir à développer une carte par vous-même avec un vecteur graphique lib comme Raphaël ou papier.js. Qui sera un peu plus difficile que d'utiliser une cartographie lib, mais devrait être faisable. (Disons 5 sur la difficulté échelle.)
comme vous obtenez les données sur un intervall fixe, vous pouvez utiliser un Ajax lib régulier. jQuery est ok pour moi, mais il y a d'autres choix. Cela peut ne pas être le meilleur choix pour un intervalle non-fixe et dans ce cas, vous pouvez avoir à regarder quelque chose comme socket.io mais cela aurait aussi des conséquences du côté du 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 n'ait pas besoin de redessiner le graphique lors de l'insertion de nouveaux points. Voir http://www.highcharts.com/documentation/how-to-use#live-charts
je dirais Smoothie Charts.
C'est très simple à utiliser, facilement et largement paramétrable, et fait un excellent travail de diffusion de données en temps réel.
il y a un builder qui vous permet d'explorer les options et de générer du code.
Avertissement: je contribue à la bibliothèque.
Plusieurs choses qui pourraient vous aider:
Toile Express est un puissant outil de cartographie de la bibliothèque : http://canvasxpress.org/
ici vous pouvez trouver un tutoriel sur la façon de faire vos propres graphiques basés sur l'équation:http://www.html5canvastutorials.com/labs/html5-canvas-graphing-an-equation/
utiliser une solution canvas est très facile, vous pouvez récupérer vos données périodiques pour le graphe en utilisant ajax, et de redessiner le graphe à chaque fois que vous récupérer de nouvelles données.
Puisque c'est côté client, vous n'aurez pas à actualiser la page.
si vous connaissez votre chemin autour du javascript et de l'ajax, alors ce sera une difficulté moyenne. Si vous ne le faites pas, vous aurez probablement à poster quelques questions supplémentaires sur la pile Ovrelow pour vous aider avec les pièces avec lesquelles vous êtes coincé.
je crois que c'est exactement ce que vous êtes à la recherche de:
http://www.highcharts.com/demo/dynamic-update
Open source (bien qu'une licence soit requise pour les sites Web commerciaux), cross device/browser, fast.
pour compléter ce fil, je vous suggère de regarder dans:
d3.js
c'est une bibliothèque qui aide avec des tonnes de visualisations javascript. Cependant, la courbe d'apprentissage est assez raide.
nvd3.js
une bibliothèque qui facilite la création de d3.visualisations js (avec des limitations, bien sûr).
Vous pouvez aussi regarder CanvasJS Chart qui est construit sur un élément de toile HTML5. Il rend très rapide et peut être mis à jour toutes les 50-100 millisecondes sans entrer dans les problèmes de mémoire.
[la divulgation Complète: je fais partie de l'équipe]
la façon la plus facile peut être 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érale inclut une image SVG dans votre html comme
<object data="http://plotti.co/FSktKOvATQ8H/plot.svg" type="image/svg+xml"/>
et alimenter vos données dans une requête GET à votre hash (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,3
la configuration est localement aussi simple
voici un gist que j'ai découvert pour les graphiques en temps réelChartJS:
https://gist.github.com/arisetyo/5985848
ChartJS semble comme il est simple à utiliser et semble agréable.
il y a aussi FusionChartshttp://www.fusioncharts.com/explore/real-time-charts
EDIT Je également commencé à utiliser Rickshaw pour les graphiques en temps réel et il est facile à utiliser et assez personnalisable: http://code.shutterstock.com/rickshaw/
ce fil est peut-être très ancien maintenant. Mais je veux partager ces résultats pour quelqu'un qui voit ce fil. A couru une comparaison betn. Flotr2, ChartJS, highcharts asynchrone. Flotr2 semble être le plus rapide. Testé ceci en passant un nouveau point de données tous les 50ms jusqu'à 1000 points de données totalement. Le Flotr2 a été le plus rapide pour moi, bien qu'il semble être en train de redessiner des cartes régulièrement.
vous obtenez les données du serveur, mettez à jour votre ensemble de données précédemment disponibles et puis probablement utiliser l'une des bibliothèques librement disponibles pour dessiner le graphe [par exemple: http://www.rgraph.net/]
choses que vous pourriez vouloir considérer : si votre graphique représente un État , obtenez seulement 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 aussi essayer les cartes météoriques, c'est super rapide (HTML5 canvas), il y a beaucoup de tutoriels, et il est aussi bien documenté. Les mises à jour en direct fonctionnent très bien. Vous mettez à jour le modèle et exécutez le graphique.draw() de re-rendre le graphe de scène. Voici une démo:
ajout à partir de 2015 Pour autant que je sache, il n'y a toujours pas de graphique linéaire orienté vers l'exécution lib. Je veux dire, graphique les comportements qui "demande de nouveaux points de chaque N sec", "purger les anciennes données", vous pourriez utiliser "déclaratif".
a la place il y a l'api graphite http://graphite-api.readthedocs.org/en/latest/ for server side, and number of client side plugins that uses it. Mais en fait, ils sont assez limités, en l'absence de fonctionnalités avancées que nous aimons: scroller de données, cartes d'autonomie, axeX segmentation sur phases, etc..
Il semble qu'il y ait de différence fondamentale entre les tâches "montrez-moi parvenir graphique" et ont "temps réel graphique".