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

Afin de compléter ce fil, je vous suggère d'examiner les points suivants :

d3.js

Il s'agit d'une bibliothèque qui permet de réaliser des tonnes de visualisations en javascript. Cependant, la courbe d'apprentissage est assez raide.

nvd3.js

Une bibliothèque qui facilite la création de visualisations d3.js (avec des limitations, bien sûr).

Answer 2

Avez-vous consulté ZingChart ? Il rend les graphiques en HTML5 Canvas, SVG et Flash (et VML pour l'ancien IE). L'API et les flux de données en direct permettent la mise à jour des données sans rafraîchissement complet du graphique ou de la page. voir http://www.zingchart.com/learn/api/api.php

Je fais partie de l'équipe. Vous pouvez joindre notre équipe à support[at]zingchart.com pour toute question, ou à twitter.com/zingchart.

-Andrew

Answer 3

Vous pouvez également consulter Graphique CanvasJS qui s'appuie sur l'élément HTML5 Canvas. Le rendu est très rapide et peut être mis à jour toutes les 50 à 100 millisecondes sans problème de mémoire.

[Full disclosure : je fais partie de l'équipe].

Answer 4

La méthode la plus simple consiste à 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 est d'inclure une image SVG dans votre html comme

<object data="http://plotti.co/FSktKOvATQ8H/plot.svg" type="image/svg+xml"/>

et en envoyant vos données dans une requête GET à votre hash (ou en utilisant un fichier (new Image(1,1)).src=... JavaScript à partir de la même page ou de toute autre page) comme suit :

http://plotti.co/FSktKOvATQ8H?d=1,2,3

l'installation locale est également simple

Answer 5

Vous obtenez les données du serveur, mettez à jour votre ensemble de données précédemment disponible et utilisez probablement l'une des bibliothèques disponibles gratuitement pour dessiner le graphique (ex : http://www.rgraph.net )

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.