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

http://www.rgraph.net/ est excellent pour les graphiques et les tableaux.

Answer 2

Voici une astuce que j'ai découverte pour les graphiques en temps réel dans ChartJS :
https://gist.github.com/arisetyo/5985848

ChartJS a l'air d'être simple à utiliser et agréable à regarder.

Il y a aussi FusionCharts une bibliothèque plus sophistiquée pour les entreprises, avec une démonstration en temps réel ici :
http://www.fusioncharts.com/explore/real-time-charts

EDITAR J'ai également commencé à utiliser Rickshaw pour les graphiques en temps réel. Il est facile à utiliser et assez personnalisable : http://code.shutterstock.com/rickshaw/

Answer 3

Ce fil de discussion est peut-être déjà très ancien. Mais je souhaite partager ces résultats pour ceux qui verront ce fil. J'ai fait une comparaison entre. Flotr2, ChartJS, highcharts de manière asynchrone. Flotr2 semble être le plus rapide. J'ai testé cela en passant un nouveau point de données toutes les 50ms jusqu'à 1000 points de données au total. Flotr2 a été le plus rapide pour moi bien qu'il semble redessiner les graphiques régulièrement.

http://jsperf.com/async-charts-test/2

Answer 4

Vous pouvez aussi essayer Meteor Charts, c'est super rapide (html5 canvas), il y a beaucoup de tutoriels, et c'est aussi bien documenté. Les mises à jour en direct fonctionnent très bien. Il suffit de mettre à jour le modèle et d'exécuter chart.draw() pour re-rendre le graphique de la scène. Voici une démo :

http://meteorcharts.com/demo

Answer 5

Ajout de 2015 Pour autant que je sache, il n'existe toujours pas de bibliothèque de graphiques linéaires orientés vers la durée d'exécution. Je veux dire un graphique dont les comportements "demander de nouveaux points toutes les N secondes", "purger les anciennes données" pourraient être configurés de manière "déclarative".

A la place, il y a l'api graphite http://graphite-api.readthedocs.org/en/latest/ pour le côté serveur, et le nombre de plugins côté client qui l'utilisent. Mais ils sont en fait assez limités, sans les fonctionnalités avancées que nous aimons : défilement des données, graphiques en plages, segmentation axeX sur les phases, etc.

Il semble qu'il y ait une différence fondamentale entre les tâches "show me reach chart" et "real time chart".