URL: https://www.opennet.me/cgi-bin/openforum/vsluhboard.cgi
Форум: vsluhforumID3
Нить номер: 89233
[ Назад ]

Исходное сообщение
"Представлена Chart.js, JavaScript-библиотека для построения ..."

Отправлено opennews , 21-Мрт-13 13:44 
Представлена (https://twitter.com/_nnnick/status/314049798502248448) новая JavaScript-библиотека  Chart.js (http://www.chartjs.org/), позволяющая генерировать на стороне клиента визуально привлекательные графики и диаграммы с использованием средств HTML5 (canvas). Библиотека поддерживает создание 6  типов диаграмм (линейные графики, столбцы, кривые, круговые и радиальные диаграммы) и отличается небольшим размером (4.5 Кб в сжатом виде) и гибкостью в плане кастомизации отображения графиков. Поддерживается использование анимированных эффектов. Код открыт (https://github.com/nnnick/Chart.js) под лицензией MIT.


Интересно, что изначально код был опубликован 18 марта, после чего сайт был закрыт (https://news.ycombinator.com/item?id=5400004) из-за претензии о наличии интеллектуальной собственности со стороны работодателя разработчика бибилотеки. Теперь вопрос улажен и Chart.js вновь возвращён в открытый доступ, при этом лицензия была изменена на MIT.

<center><img src="http://www.opennet.me/opennews/pics_base/0_1363856877.png" style="border-style: solid; border-color: #e9ead6; border-width: 15px;" title="" border=0><img src="http://www.opennet.me/opennews/pics_base/0_1363856974.png" style="border-style: solid; border-color: #e9ead6; border-width: 15px;" title="" border=0></center>
<center><img src="http://www.opennet.me/opennews/pics_base/0_1363857067.png" style="border-style: solid; border-color: #e9ead6; border-width: 15px;" title="" border=0></center>
<center><img src="http://www.opennet.me/opennews/pics_base/0_1363857157.png" style="border-style: solid; border-color: #e9ead6; border-width: 15px;" title="" border=0></center>


URL: http://www.chartjs.org/
Новость: http://www.opennet.me/opennews/art.shtml?num=36456


Содержание

Сообщения в этом обсуждении
"Представлена Chart.js, JavaScript-библиотека для построения ..."
Отправлено Аноним , 21-Мрт-13 13:44 
"и отличается небольшим размером (4.5 Кб в сжатом виде)"
хмм ошибочка?

https://github.com/nnnick/Chart.js/blob/master/Chart.min.js
"file 40 lines (40 sloc) 20.034 kb "


"Представлена Chart.js, JavaScript-библиотека для построения ..."
Отправлено Аноным , 21-Мрт-13 13:48 
Гзип?

"Представлена Chart.js, JavaScript-библиотека для построения ..."
Отправлено Аноним , 21-Мрт-13 13:51 
в сжатом виде == min + gzip

"Представлена Chart.js, JavaScript-библиотека для построения ..."
Отправлено Аноним , 21-Мрт-13 13:54 
Есть http://www.jqplot.com/. Чем этот лучше?

"Представлена Chart.js, JavaScript-библиотека для построения ..."
Отправлено Grmmhnd , 21-Мрт-13 14:02 
Хотя бы тем, что не требует jquery.

"Представлена Chart.js, JavaScript-библиотека для построения ..."
Отправлено angra , 21-Мрт-13 14:24 
Как по мне что тот, что другой выглядят оборванцами на фоне http://www.highcharts.com/, но это не означает, что они не будут более подходящими для определенных задач. Кого-то привлечет лицензия, кого-то меньший объем.

"Представлена Chart.js, JavaScript-библиотека для построения ..."
Отправлено Александр , 22-Мрт-13 00:56 
ерунда какая-то ейбогу..

"Представлена Chart.js, JavaScript-библиотека для построения ..."
Отправлено Аноним , 21-Мрт-13 17:11 
Чем он лучше http://humblesoftware.com/flotr2/index ?

"Представлена Chart.js, JavaScript-библиотека для построения ..."
Отправлено valexey , 21-Мрт-13 17:40 
А вот няшечка для реалтаймовых графиков: http://smoothiecharts.org/

"Представлена Chart.js, JavaScript-библиотека для построения ..."
Отправлено Аноним , 21-Мрт-13 18:12 
Открыв страницу с примером c 1-2% утилизация цпу подскочила до 15-16%. На дворе шёл 21 век, А10-5800 и "реалтаймовый" рисовальщик 2д-графиков в браузере.

"Представлена Chart.js, JavaScript-библиотека для построения ..."
Отправлено valexey , 21-Мрт-13 18:27 
Если убрать закраску графиков, то будет меньше. Если отрубить интерполяция и выводить данные как есть, то будет еще меньше.

У меня в проекте три достаточно больших графика рисуются в реалтайме причем там добавляется порядка 50-100 точек в секунду. Рисует вполне удовлетворительно. Собственно оно даже на iPad2 вполне смотрибельно получается.

Если делать то же на скажем jfreechart или скажем Qwt(http://qwt.sourceforge.net/) то загрузка процессора получается выше (до 100% подскакивает временами).

Реалтайм графики это вообще отдельная песня (с высокими частотами обновления, а не 5 раз в секунду). Библиотек для них практически нет.


"Представлена Chart.js, JavaScript-библиотека для построения ..."
Отправлено Crazy Alex , 21-Мрт-13 18:46 
интереса ради - а где есть необходимость обновлять графики чаще чем 5 раз в секунду?

"Представлена Chart.js, JavaScript-библиотека для построения ..."
Отправлено Аноним , 21-Мрт-13 20:06 
WebSocket realtime node.js application наверно

"Представлена Chart.js, JavaScript-библиотека для построения ..."
Отправлено valexey , 22-Мрт-13 05:32 
> WebSocket realtime node.js application наверно

Нет, node.js не используется.


"Представлена Chart.js, JavaScript-библиотека для построения ..."
Отправлено Аноним , 21-Мрт-13 22:43 
Фишка не в обновлении 5 раз в секунду, а сколько затрачивается ресурсов для этого.

"Представлена Chart.js, JavaScript-библиотека для построения ..."
Отправлено Crazy Alex , 22-Мрт-13 01:36 
Ну просто если б я что-то подобное делал - то плевать с какой скоростью летят данные, сам график перерисовывать больше тех же пяти раз в секунду смысла нет - на него ж человеку смотреть. Может и двух раз хватит, тут уже экспериментировать надо. Соответственно и затраты ресурсов будут ну никак не пропорциональные количеству прилетевших данных.

"Представлена Chart.js, JavaScript-библиотека для построения ..."
Отправлено valexey , 22-Мрт-13 05:34 
> Ну просто если б я что-то подобное делал - то плевать с
> какой скоростью летят данные, сам график перерисовывать больше тех же пяти
> раз в секунду смысла нет - на него ж человеку смотреть.
> Может и двух раз хватит, тут уже экспериментировать надо. Соответственно и
> затраты ресурсов будут ну никак не пропорциональные количеству прилетевших данных.

Реалтайм отображение фотоплетизмограммы. Если слово не знакомо, то представь себе ЭКГ-монитор, вот примерно то же самое по внешнему виду и требованиям, но данные немного иначе получаются.

Вообще, в идеале, там нужно бы 60 кадров в секунду, чтобы не раздражало оператора. На экране одновременно отображается порядка 8 секунд данных.


"Представлена Chart.js, JavaScript-библиотека для построения ..."
Отправлено valexey , 22-Мрт-13 05:35 
> интереса ради - а где есть необходимость обновлять графики чаще чем 5
> раз в секунду?

Медицина. Отображение фотоплетизмограммы в реальном времени.


"Представлена Chart.js, JavaScript-библиотека для построения ..."
Отправлено angra , 22-Мрт-13 17:04 
Понятно, в следующий раз выражайся яснее. Между "обновить график" и "дорисовать график" большая разница. Обновлять график, то есть замещать его полностью новым, чаще пары раз в секунду не нужно.

"Представлена Chart.js, JavaScript-библиотека для построения ..."
Отправлено valexey , 22-Мрт-13 17:27 
Я имел ввиду естественно sample rate относительно того, что касается данных и refresh rate то что касается отрисовки графика..

И нет, график там не дорисовывается, а перерисовывается на каждом кадре. А когда приходят новые данные, тогда , эти данные добавляются в график а часть старых данных выкидывается (то есть по сути имеем очередь фиксированной длины куда суются данные).

Естественно поступление данные и перерисовка графика друг на друга не завязаны, то есть это дело асинхронно работает.


"Представлена Chart.js, JavaScript-библиотека для построения ..."
Отправлено XoRe , 21-Мрт-13 23:00 
> Открыв страницу с примером c 1-2% утилизация цпу подскочила до 15-16%. На
> дворе шёл 21 век, А10-5800 и "реалтаймовый" рисовальщик 2д-графиков в браузере.

А что вы хотели?
svg+js проц кушать любят будь здоров.


"Представлена Chart.js, JavaScript-библиотека для построения ..."
Отправлено valexey , 22-Мрт-13 05:30 
Там не svg, там canvas

"Представлена Chart.js, JavaScript-библиотека для построения ..."
Отправлено Аноним , 22-Мрт-13 19:15 
Ну и как с етим нарисовать график из CSV данных?

"Представлена Chart.js, JavaScript-библиотека для построения ..."
Отправлено Grmmhnd , 22-Мрт-13 21:42 
А вам не кажется, что это проблема реализации бэкэнда, а не фронтендной библиотеки?

"Представлена Chart.js, JavaScript-библиотека для построения ..."
Отправлено Аноним , 23-Мрт-13 15:57 
http://d3js.org/

"Представлена Chart.js, JavaScript-библиотека для построения ..."
Отправлено Аноним , 23-Мрт-13 16:36 
> http://d3js.org/
>>> f = open('sample.csv').readlines()
>>> rv = json.dumps([[float(i) for i in k.split(',')] for k in f])
>>> file_out.write(rv)

"Представлена Chart.js, JavaScript-библиотека для построения ..."
Отправлено serge78rus , 03-Май-14 22:17 
Гораздо менее функциональный, но легкий компонент для отрисовки графиков в реальном времени http://jsgadget.ru/jschart.html