Wykresy danych w czasie rzeczywistym na wykresie liniowym z html5 [zamknięty]

Proponuję Smoothie Charts .

Jest bardzo prosty w użyciu, łatwy i szeroko konfigurowalny i świetnie sprawdza się w strumieniowaniu danych w czasie rzeczywistym.

Istnieje konstruktor , który pozwala eksplorować opcje i generować kod .

Zastrzeżenie: jestem współpracownikiem biblioteki.

Kilka rzeczy, które mogą Ci pomóc:

Tutaj znajdziesz samouczek na temat toczenia własnych wykresów opartych na równaniach: http://www.html5canvastutorials.com/labs/html5-canvas-graphing-an-equation/

Korzystanie z rozwiązania canvas jest bardzo proste, można pobrać okresowe dane dla wykresu za pomocą ajax i przerysować Wykres za każdym razem, gdy odzyskujesz nowe dane.
Ponieważ jest po stronie klienta nie będziesz musiał odświeżać strony.

Jeśli znasz się na javascript i Ajaxie, to będzie to średni poziom trudności. Jeśli tego nie zrobisz, prawdopodobnie będziesz musiał napisać więcej pytań na temat Stack Ovreflow, aby pomóc ci z częściami, z którymi utkniesz.

Wierzę, że to jest dokładnie to, czego szukasz:

Http://www.highcharts.com/demo/dynamic-update

Open source (chociaż licencja jest wymagana dla komercyjnych stron internetowych), cross device / browser, fast.

Flotr2 i Envision są opcjami. Flotr2 ma przykład w czasie rzeczywistym na stronie doco, którą podlinkowałem. Envision jest nieco trudniejsze do rozpoczęcia, więc spróbuj Flotr2.

Aby zakończyć ten wątek, proponuję zajrzeć do:

D3.js

Jest to biblioteka, która pomaga z mnóstwem wizualizacji javascript. Jednak krzywa uczenia się jest dość stroma.

Nvd3.js

Biblioteka ułatwiająca tworzenie d3.wizualizacje js (oczywiście z ograniczeniami).

Możesz również spojrzeć na Wykres CanvasJS , który jest zbudowany na elemencie HTML5 Canvas. Renderuje się bardzo szybko i może być aktualizowany co 50-100 milisekund bez problemów z pamięcią.

[pełne ujawnienie: jestem częścią zespołu]

Najprostszym sposobem może być użycie plotti.co - mikroserwis, który stworzyłem właśnie do tego. To zależy od tego, w jaki sposób uzyskasz dane, ale ogólny wzorzec użycia polega na włączeniu obrazu SVG do twojego html, jak

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

I podanie danych w żądaniu GET do twojego hasha (lub za pomocą metody (new Image(1,1)).src=... JavaScript z tej samej lub dowolnej innej strony) w następujący sposób:

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

Ustawienie go lokalnie jest również proste

Oto gist, który odkryłem dla Wykresów czasu rzeczywistego w ChartJS:
https://gist.github.com/arisetyo/5985848

ChartJS wygląda na prosty w obsłudze i ładnie wygląda.

Istnieje również FusionCharts , bardziej wyrafinowana biblioteka do użytku korporacyjnego, z demo czasu rzeczywistego tutaj:
http://www.fusioncharts.com/explore/real-time-charts

EDIT Zacząłem również używać rikszy do wykresów w czasie rzeczywistym i jest łatwy w użyciu i całkiem konfigurowalny: http://code.shutterstock.com/rickshaw/

Ten wątek jest chyba bardzo stary. Ale chcesz podzielić się tymi wynikami dla kogoś, kto zobaczy ten wątek. Przeprowadziłem porównanie betn. Flotr2, ChartJS, highcharts asynchronicznie. Flotr2 wydaje się być najszybszy. Przetestowano to, przekazując nowy punkt danych co 50ms do 1000 punktów danych całkowicie. Flotr2 był dla mnie najszybszy, choć wygląda na to, że regularnie przerysowuje wykresy.

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

Pobierasz dane z serwera, aktualizujesz wcześniej dostępny zbiór danych, a następnie prawdopodobnie używasz jednej z darmowych bibliotek do rysowania wykresu [np: http://www.rgraph.net/]

Rzeczy, które możesz rozważyć : jeśli twój wykres reprezentuje stan, uzyskaj tylko nowe dane za pomocą xhr, zaktualizuj dane na kliencie i narysuj .

Http://www.rgraph.net / jest doskonały do wykresów i wykresów.

Możesz też spróbować Mapy Meteor, jest super szybki (html5 canvas), ma wiele samouczków, a także jest dobrze udokumentowany. Aktualizacje na żywo działają naprawdę dobrze. Po prostu zaktualizuj model i uruchom Wykres.draw (), aby ponownie renderować Wykres sceny. Oto demo:

Http://meteorcharts.com/demo

Dodanie od 2015 O ile wiem, nadal nie ma runtime zorientowanych lib wykresu lib. Chodzi mi o Wykres, który zachowania "żądają nowych punktów co N sek", "oczyszczają stare dane" można ustawić "deklaratywny" sposób.

Zamiast tego istnieje graphite api http://graphite-api.readthedocs.org/en/latest / dla strony serwera i liczby wtyczek po stronie klienta, które go używają. Ale w rzeczywistości są one dość ograniczone, brak zaawansowanych funkcji, które lubimy: data scroller, wykresy zasięgu, segmentacja axeX na fazach itp..

Wydaje się, że istnieje zasadnicza różnica między zadaniami "Pokaż mi Wykres zasięgu" i "wykres czasu rzeczywistego".