Graphique de données avec html

Question

L'objectif serait un graphique linéaire qui se mettrait à jour toutes les deux secondes et ne nécessiterait pas de rafraîchissement de la page (il obtiendrait les informations d'un fichier séparé qui se mettrait à jour sur un serveur). Est-ce qu'il existe des librairies JavaScript (autres que JQuery) qui rendent cela facile ? Quelqu'un pourrait-il montrer un exemple sur une page web ?

Les données sont mises à jour à intervalles fixes. Dans la mesure du possible, il est préférable de n'utiliser que CSS, HTML5 et javascript.

Answer 1

Je suggère Tableaux des smoothies .

Il est très simple à utiliser, facilement et largement configurable, et fait un excellent travail de diffusion de données en temps réel.

Il y a un qui vous permet d'explorer les options et de générer du code .

Avis de non-responsabilité : Je suis un contributeur de la bibliothèque.

Answer 2

Il existe plusieurs bibliothèques de graphiques qui peuvent être utilisées : gRaphael , Highcharts et celle mentionnée par d'autres. Ces bibliothèques sont assez faciles à utiliser et bien documentées (disons 1 sur l'échelle de difficulté).

AFAIK, ces librairies ne sont pas "temps réel" car elles ne donnent pas la possibilité d'ajouter de nouveaux points à la volée. Pour ajouter un nouveau point, il faut redessiner le graphique complet. Mais je pense que ce n'est pas un problème car redessiner la carte est rapide. J'ai fait quelques essais avec gRaphael et je n'ai pas remarqué de problème avec cette approche. Si votre taux de mise à jour est de 10s, cela devrait fonctionner correctement (mais cela peut dépendre de la complexité de vos graphiques).

Si le fait de redessiner le graphique complet est un problème, vous devrez peut-être développer vous-même un graphique à l'aide d'une bibliothèque de graphiques vectoriels telle que Raphaël o paper.js . Ce sera un peu plus difficile que d'utiliser une librairie graphique, mais cela devrait être faisable. (Disons 5 sur l'échelle de difficulté).

Comme vous obtenez les données dans un intervalle fixe, vous pouvez utiliser une librairie ajax classique. jQuery me convient, mais il y a d'autres choix. Ce n'est peut-être pas le meilleur choix pour un intervalle non fixe et, dans ce cas, vous devrez peut-être envisager quelque chose comme socket.io mais cela aurait également 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 un choix acceptable également.

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

Answer 3

Je pense 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), multi-appareils/navigateurs, rapide.

Answer 4

Plusieurs choses peuvent vous aider :

Canvas Express est une puissante bibliothèque de graphiques : http://canvasxpress.org/

Vous trouverez ici un tutoriel sur l'élaboration de vos propres graphiques basés sur des équations : http://www.html5canvastutorials.com/labs/html5-canvas-graphing-an-equation/

L'utilisation d'une solution canvas 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 se passe côté client, vous n'aurez pas à rafraîchir la page.

Si vous vous y connaissez en javascript et ajax, la difficulté sera moyenne. Si ce n'est pas le cas, vous devrez probablement poser d'autres questions sur Stack Ovreflow pour vous aider dans les parties où vous êtes bloqué.

Answer 5

Flotr2 y Envisager sont des options. Flotr2 propose un exemple en temps réel sur la page doco que j'ai mise en lien. Envision est un peu plus difficile à utiliser, alors essayez Flotr2.