График данных в реальном времени на линейной диаграмме с помощью html5

Можно использовать несколько библиотек построения диаграмм: gRaphael, Highcharts и упомянутый другими. Эти библиотеки довольно просты в использовании и хорошо документированы (скажем, 1 по шкале сложности).

Насколько я знаю, эти библиотеки не работают в режиме реального времени, потому что они не дают возможности добавлять новые точки на лету. Чтобы добавить новую точку, вам нужно перерисовать весь график. Но я думаю, что это не проблема, потому что перерисовка графика происходит быстро. Я сделал несколько попыток с gRaphael и не заметил никаких проблем с этим подходом. Если вы обновляете частоту 10 секунд, это должно работать нормально (но это может зависеть от сложности ваших диаграмм).

Если перерисовка полной диаграммы является проблемой, вам, возможно, придется разработать диаграмму самостоятельно с помощью библиотеки векторной графики, такой как Raphael или paper.js. Это будет немного сложнее, чем использование графической библиотеки, но должно быть осуществимо. (Пусть говорят 5 по шкале сложности).

Поскольку вы получаете данные с фиксированным интервалом, вы можете использовать обычную библиотеку ajax. jQuery мне подходит, но есть и другие варианты. Это может быть не лучшим выбором для нефиксированного интервала, и в этом случае вам, возможно, придется взглянуть на что-то вроде socket.io но это будет иметь последствия и на стороне сервера.

Примечание 1: Raphael, gRaphael и Highcharts — это не чисто HTML5, а SVG/VML, но я думаю, что это тоже приемлемый выбор.

Примечание 2: кажется, что Highchart не требует перерисовки диаграммы при вставке новых точек. См. http://www.highcharts.com/documentation/how-to-use#live-charts

Я бы предложил смузи-диаграммы.

Он очень прост в использовании, легко и широко настраивается и отлично справляется с потоковой передачей данных в реальном времени.

Существует конструктор, который позволяет изучить варианты и создать код.

Отказ от ответственности: я сотрудничаю с библиотекой.

Я считаю, что это именно то, что вы ищете:

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

Открытый исходный код (хотя для коммерческих веб-сайтов требуется лицензия), совместимость с разными устройствами и браузерами, высокая скорость.

Несколько вещей, которые могут вам помочь:

Canvas Express — мощная библиотека для создания диаграмм: http://canvasxpress.org/.

Здесь вы можете найти руководство по созданию собственных графиков на основе уравнений: http://www.html5canvastutorials.com/labs/html5-canvas-graphing-an-equation/

Использовать решение на основе холста очень просто. Вы можете получать периодические данные для графика с помощью ajax и перерисовывать график каждый раз, когда получаете новые данные.
Поскольку все это на стороне клиента, вам не придется обновлять страницу.

Если вы разбираетесь в javascript и ajax, то это будет средней сложности. Если вы этого не сделаете, вам, вероятно, придется опубликовать еще несколько вопросов на Stack Ovreflow, чтобы помочь вам с частями, с которыми вы застряли.

Flotr2 и Воображение — это варианты. У Flotr2 есть пример в реальном времени на странице документа, на которую я ссылаюсь. С Envision немного сложнее начать, поэтому попробуйте Flotr2.

Чтобы завершить эту тему, я предлагаю вам изучить:

d3.js

Это библиотека, которая помогает с множеством визуализаций javascript. Однако кривая обучения довольно крутая.

nvd3.js

Библиотека, упрощающая создание некоторых визуализаций d3.js (конечно, с ограничениями).

Вы также можете взглянуть на CanvasJS Chart, которая построена на основе HTML5 Canvas Element. . Он рендерится очень быстро и может обновляться каждые 50-100 миллисекунд без проблем с памятью.

[Полное раскрытие: я являюсь частью команды]

Проще всего использовать plotti.co — микросервис, который я создал именно для этого. Это зависит от того, как вы получаете данные, но общий шаблон использования включает изображение SVG в ваш html, например

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

и передавая ваши данные в запросе GET на ваш хэш (или используя метод (new Image(1,1)).src=... JavaScript с той же или любой другой страницы) следующим образом:

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

настроить его локально также просто

http://www.rgraph.net/ отлично подходит для графиков и диаграмм.

Вот суть, которую я обнаружил для диаграмм в реальном времени в ChartJS:
https://gist.github.com/arisetyo/5985848

ChartJS выглядит просто и красиво.

Также есть FusionCharts, более сложная библиотека для корпоративного использования, с демонстрацией в реальном времени здесь:
http://www.fusioncharts.com/explore/real-time-charts

РЕДАКТИРОВАНИЕ Я также начал использовать Rickshaw для построения графиков в реальном времени, он прост в использовании и легко настраивается: http://code.shutterstock.com/rickshaw/

Эта тема, возможно, очень и очень старая сейчас. Но хочу поделиться этими результатами для тех, кто видит эту тему. Провел сравнение betn. Flotr2, ChartJS, highcharts асинхронно. Flotr2 кажется самым быстрым. Протестировано путем передачи новой точки данных каждые 50 мс, всего до 1000 точек данных. Flotr2 был самым быстрым для меня, хотя, похоже, он регулярно перерисовывает графики.

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

Вы получаете данные с сервера, обновляете свой ранее доступный набор данных, а затем, вероятно, используете одну из свободно доступных библиотек для рисования графика (например: http://www.rgraph.net)

Вещи, которые вы, возможно, захотите рассмотреть: Если ваша диаграмма представляет состояние, получайте только новые данные с помощью xhr, обновляйте данные на клиенте и рисуйте.

Вы также можете попробовать Meteor Charts, он очень быстрый (холст html5), содержит множество руководств и хорошо документирован. Живые обновления работают очень хорошо. Вы просто обновляете модель и запускаете chart.draw() для повторного рендеринга графа сцены. Вот демо:

http://meteorcharts.com/demo

Дополнение от 2015 г. Насколько я знаю, до сих пор нет библиотеки линейных диаграмм, ориентированной на время выполнения. Я имею в виду диаграмму, поведение которой «запрашивать новые точки каждые N секунд», «очищать старые данные», которую вы можете настроить «декларативным» способом.

Вместо этого есть графитовый API http://graphite-api.readthedocs.org/en/latest/ для серверной части и количество клиентских подключаемых модулей, которые его используют. Но на самом деле они довольно ограничены, отсутствуют расширенные функции, которые нам нравятся: скроллер данных, диаграммы диапазонов, сегментация axeX по фазам и т.д..

Кажется, есть принципиальная разница между задачами "покажи мне диаграмму досягаемости" и "иметь диаграмму в реальном времени".