Des données en temps réel graphique sur un graphique en ligne avec html5
Je veux faire un graphique en ligne qui met à jour toutes les deux secondes et n'a pas besoin de la page de mise à jour(il serait d'obtenir de l'information à partir d'un fichier séparé que des mises à jour sur un serveur), c'est la toute JavaScript libs(autres que JQuery) qui permettra de faire c'est 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)
Également les données est mise à jour sur un intervalle fixe de 10s si ce qui compte. Et si possible, je voudrais coller à juste CSS3 HTML5 et javascript.
- découvrez raphaeljs.com
- J'ai utilisé
CanvasJS
pour le tracé en temps réel avant, et son tout à fait agréable et facile. canvasjs.com/html5-javascript-dynamic-chart
Vous devez vous connecter pour publier un commentaire.
Il y a plusieurs bibliothèques graphiques qui peuvent être utilisés : 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é).
Autant que je sache, ces libs ne sont pas "en temps réel", car ils ne donnent pas la possibilité d'ajouter de nouveaux points à la volée. Pour ajouter un nouveau point, vous avez besoin de redessiner le graphique intégral. Mais je pense que ce n'est pas un problème parce que de 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 les taux de 10s qui devrait fonctionner ok (mais il peut dépend de la complexité de vos cartes).
Si redessiner le graphique intégral est un problème, vous pouvez avoir à développer un graphique par vous-même avec un graphisme vectoriel lib comme Raphaël ou paper.js. Qui sera un peu plus difficile que d'utiliser une cartographie lib, mais devrait être faisable. (Disons 5 sur l'échelle de difficulté).
Que vous êtes l'obtention de données sur un fixe intervall, vous pouvez utiliser ajax lib. jQuery est ok pour moi, mais il y a d'autres choix. Qui peut ne pas être le meilleur choix pour un non-intervalle fixe et dans ce cas, vous pourriez avoir à regarder quelque chose comme socket.io mais cela aurait des conséquences sur le côté serveur trop.
Note1: Raphaël, gRaphael et Highcharts ne sont pas purement HTML5 mais SVG/VML, mais je suppose que c'est un choix acceptable aussi.
Note2: il semble que Highchart n'a 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 Graphiques.
Il 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 générer le code.
Avertissement: je suis un contributeur à 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 le déploiement de votre propre équation basée sur les graphes: http://www.html5canvastutorials.com/labs/html5-canvas-graphing-an-equation/
À l'aide d'une toile solution est très facile, Vous pouvez récupérer vos données périodiques pour le graphique à l'aide d'ajax, et de redessiner le graphique à 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 aroudn javascript et ajax, puis ça va être une difficulté moyenne. Si vous n'avez pas, alors vous aurez probablement à un peu plus de questions sur la Pile Ovreflow pour vous aider avec les pièces que vous êtes coincé avec.
Je crois que c'est exactement ce que vous cherchez:
http://www.highcharts.com/demo/dynamic-update
Open source (même si une licence est requise pour les sites web commerciaux), la croix de l'appareil/du navigateur, rapide.
Flotr2 et Envision sont des options. Flotr2 a un temps réel exemple sur le doco page. Envision est un peu plus difficile à apprendre, alors essayez de Flotr2.
for (...) {data.push(...)}
est exécutée chaque fois que le graphique qui rend. C'est gaspiller de l'UC et peut être un réel problème lorsqu'il y a des milliers de points de données par seconde. Un meilleur plan en temps réel vous permettra de tout simplement ajouter un seul point de données à la fois, plutôt que de réinitialiser l'ensemble du jeu de données chaque fois que vous avez un nouveau point.Afin de compléter ce fil, je vous suggère de regarder dans:
d3.js
C'est une bibliothèque qui permet, avec des tonnes de javascript, des visualisations. Cependant, la courbe d'apprentissage est assez raide.
nvd3.js
Une bibliothèque qui le rend facile de créer des d3.js visualisations (avec des limites, bien sûr).
Vous pouvez également regarder CanvasJS Graphique qui est construit au-dessus de l'Élément HTML5 Canvas. Il rend vraiment très rapide et peut être mis à jour tous les 50 à 100 millisecondes sans entrer dans des problèmes de mémoire.
[Divulgation complète: je fais partie de l'équipe]
La façon la plus simple peut être d'utiliser plotti.co - le microservice j'ai créé exactement pour cela. Il dépend de la façon dont vous obtenez les données, mais en général le mode d'utilisation est notamment une image SVG dans votre code html comme
et l'alimentation de vos données dans une requête GET à votre table de hachage (ou à l'aide d'un
(new Image(1,1)).src=...
méthode JavaScript de la même ou de toute autre page) comme ceci:http://plotti.co/FSktKOvATQ8H?d=1,2,3
de la configurer localement est aussi simple
Voici un résumé que j'ai découvert depuis des graphiques en temps réel dans ChartJS:
https://gist.github.com/arisetyo/5985848
ChartJS on dirait qu'il est simple à utiliser et agréable.
Il y a également FusionCharts, une version plus sophistiquée de la bibliothèque pour une utilisation en entreprise, avec une démo en temps réel ici:
http://www.fusioncharts.com/explore/real-time-charts
MODIFIER
J'ai aussi commencé à utiliser de pousse-pousse en temps réel des graphiques et il est facile à utiliser et assez personnalisables:
http://code.shutterstock.com/rickshaw/
Ce fil est peut-être très très vieux maintenant. Mais que vous voulez partager ces résultats pour quelqu'un qui, voir ce fil. A couru une comparaison betn. Flotr2, ChartJS, highcharts de manière asynchrone. Flotr2 semble être le moyen le plus rapide. Testé ce par l'adoption d'un nouveau point de données toutes les 50ms jusqu'à 1000 points de données totalement. Flotr2 a été le plus rapide pour moi, même si il semble être redessiner les cartes régulièrement.
http://jsperf.com/async-charts-test/2
Vous obtenez les données à partir du serveur de mise à jour de votre disponible auparavant datasetand puis utilisez probablement un des librement disponible bibliothèques pour dessiner le graphe [par exemple: http://www.rgraph.net/%5D
Choses que vous pourriez vouloir considérer : Si votre graphique représente un état , obtenir uniquement les nouvelles données avec xhr , mise à jour des données sur le client et le tirage au sort .
http://www.rgraph.net/ est excellent pour le graphique et les tableaux.
Vous pouvez aussi donner Meteor Graphiques de l'essayer, c'est super rapide (html5 canvas), a beaucoup de tutoriels, et est également bien documenté. Mises à jour en direct fonctionnent vraiment bien. Vous venez de mettre à jour le modèle et exécution graphique.draw() de re-rendre le graphe de scène. Voici une démo:
http://meteorcharts.com/demo
Plus à partir de 2015
Autant que je sache, il n'y a toujours pas de runtime orientée vers la ligne graphique 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" façon.
Au lieu de cela il est en graphite api http://graphite-api.readthedocs.org/en/latest/ pour le côté serveur, et le numéro de client du côté des plugins qui l'utilise. Mais en réalité, ils sont assez limités, en l'absence de fonctionnalités avancées que nous aimons: les données de la barre de défilement, la gamme de graphiques, axeX de segmentation sur les 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".