JavaScript

индекс
246,38

Список Javascript библиотек для рисования графиков и диаграмм

О визуализация графов в вебе говорили здесь, навеяно этой статьей.

Под катом обзор Javascript библиотек для рисования графов, диаграмм и прочей красоты.

TufteGraph


Использует jQuery.

Сайт: xaviershay.github.com/tufte-graph/

image

dygraphs


dygraphs — Javascript библиотека с открытым кодом для рисования временных рядов.

image

Сайт: www.danvk.org/dygraphs/
Демо: www.danvk.org/dygraphs/tests/

Highcharts


О Highcharts писали здесь.

image

Сайт: www.highcharts.com/

gRaphaël


gRaphaël — open source библиотека, которая позволяет рисовать диаграммы типа pie, bar, line или dot charts.

image

Сайт: g.raphaeljs.com/

MilkChart


MilkChart — MooTools библиотека для конвертирования таблиц в чарты.

image

Использует и поддерживает следующие типы диаграмм:
* Column
* Bar
* Line
* Scatter
* Pie

Сайт: code.google.com/p/milkchart/

Visualize


Visualize — jQuery плагин, которы конвертирует таблицы в чарты используя тег canvas.

image

Использование очень простое (позволяет рисовать line, pie, bar или area charts):

$('table').visualize();

Сайт: http://www.filamentgroup.com/

InfoVis


Библиотека для рисования treemaps, radial layouts, bar charths, pie charts и другие диаграммы на основе canvas.

image

Сайт: thejit.org/

jqPlot


jqPlot — jQuery плагин, может рисовать line и bar charts.

image

Сайт: www.jqplot.com/

Protovis


Protovis — Javascript библиотека, использует canvas.

image

Сайт: vis.stanford.edu/protovis/

Какая библиотека лучше, какая нет — сказать трудно, сам использую asp.net chart control для таких дел, хотя многие из перечисленных очень даже ничего :)

Дума, пока хватит. Если данная тема интересна, могу продолжить серию постов о визуализации данных в вебе.

Спасибо за внимание!
+85
4 января 2010, 13:34
347

комментарии (36)

+1
jobterra #
Спасибо за подборку!
НЛО прилетело и опубликовало эту надпись здесь
0
asfd #
А что такое часовые ряды? Или имелось в виду числовые?
0
sashaeve #
Имелось ввиду «charts of time series», т.е. «часовые рады», хотя более правильный термин временные ряды (подправил).
0
xexsus #
Где бы найти вот такие графики: news.yandex.ru/quotes/1.html
+1
sashaeve #
Так dygraphs вроде это умеет делать. Обзор Flash / Silverlight библиотек могу сделать в следующем обзоре.
+1
JetHedgehog #
Обзор будет популярен!
+1
sashaeve #
Ок, сделаем :)
0
xexsus #
Вроде не умеет, в примерах не нашёл ничего похожего. Нужно же не просто зумить, нужно иметь отдельное окно просмотра, куда грузится грубая модель графика. В зависимости от манипуляций в окне просмотра, данные динамически подгружаются в основное окно.
0
lifestar #
code.google.com/p/flot/
этот плагин к Jquery умеет так
вот пример: people.iola.dk/olau/flot/examples/visitors.html
0
xexsus #
В соседней теме, а сам давал эту ссылку. Проблема в том, что основной график грузится полностью, а нужна динамическая подгрузка. На моих объёмах данных, грузить все точки сразу, очень ресурсоёмко как для клиента, так и для сервера.
+1
mixx #
Обзор будет интересен :)
0
alienator #
Такие графики найти здесь: www.amcharts.com
0
xexsus #
Угу, по моему единственная библиотека, которая такое делает. Но у неё есть 2 недостатка: платность, сложность внутреннего кода. Идеально было бы найти что-то простое на опенсСорс, чтобы можно было самому дописать нужные функции. Это большая универсальная библиотека, а вот что-то простое, что выводит только такие специализированные графики, найти трудно. Не будь у неё хоть одного из выше перечисленных недостатков, с этим можно было бы жить, но их сумма, для меня, перевешивает достоинства этого продукта.

Хоть сам садись и пиши такую библиотеку, но времени лишнего совсем-совсем нет :(
0
alienator #
Её платность, afaik, заключается только в выводе лого на графике. Не так уж тяжело это пережить, если не хочется платить денег.

Несколько раз уже попадались сайты, которым не западло пользоваться бесплатными amCharts :)
0
Olegas #
Это, безусловно, неправильно, но лого на графике убирается одной строкой в .htaccess (!) (да, именно в .htaccess, это не ошибка). На официальном сайте библиотеки файл с лицензией лежит в паблике и не привязан к домену.

Отлавливается файрбагом или фиддлером.
0
andrewmaster #
посмотрите amcharts/amstock.
0
slavik #
есть еще flot (http://code.google.com/p/flot/) тоже плагин к jQuery.
Пока пользовался им, но уж больно заманчиво выглядят приведенные в статье библиотеки, так что надо будет всё это перепробовать…
0
middle #
Мне одному кажется, что Axiis попал в этот список случайно? :)
0
sashaeve #
Спасибо, убрал. Позже добавлю его в обзор Flash компонентов.
0
Mecid #
мне показалось или про Google Chart забыли?
code.google.com/apis/chart/
0
sashaeve #
Нет, не забыли, он пойдет во вторую часть списка.
0
BekoBou #
Можно вопрос — какие из этих библиотек автор использовал сам? Все снимки экранов в латинице и скорее всего взяты с сайтов.

Вопрос в том, что рекомендовать библиотеки, которые не используешь сам — это как-то не правильно. Похоже на то, что автор просто ввёл в поиске «javascript chart» и более менее релевантные ссылки оформил как запись (пост).

Вот меня, например, интересует какая из этих библиотек адекватно воспринимает русский, на сколько их сложно использовать, какие у них лицензии и можно ли их использовать в коммерческих проектах? Но здесь этого нет.
0
sashaeve #
По моему внизу статьи русским по белому написано:

Какая библиотека лучше, какая нет — сказать трудно, сам использую asp.net chart control для таких дел, хотя многие из перечисленных очень даже ничего :)

Каким образом был получен список, думаю, без разницы, если полученный список был кому-то полезен. Использовал InfoVis, это написано в приведенной ссылке в самом вверху страницы :)
0
budda #
а можно прикрутить эти библиотеки без сервера и http? чтобы бросить их в папку а на страничке просто прикрутить
и как обстоят в этих библиотеках с подписями осей и русским в подписях? только на одном скрине есть подпись оси ординат…
0
sashaeve #
>>а можно прикрутить эти библиотеки без сервера и http? чтобы бросить их в папку а на страничке просто прикрутить
Не совсем понял, что имеется ввиду. Можете детальнее описать вопрос?
0
budda #
ну я имел ввиду можно ли использовать локально? вместо MS Excel? слепить html страничку, подключить (а можно ли вот в этом и вопрос) библиотеку и строить графики
0
sashaeve #
Конечно, вы можете скачать скрипты и пользоваться ими локально.
+2
just_vladimir #
Хотелось бы увидеть в описании:
1. лицензия
2. требования к браузерам
3. ресурсоемкость
0
dmitriid #
Нао было еще добавить processingjs.org/

Там не только графики, правда, а графика вообще
НЛО прилетело и опубликовало эту надпись здесь
+2
murr #
Интересная библиотека для визуализации связей находится тут: www.unwieldy.net/projects/moowheel/. Не совсем по теме, но может быть кому-то пригодится
+1
sashaeve #
Как раз по теме. Где ж вы были, когда я со связями игрался в предыдущем топике? :)
+1
Elvis_the_King #
Граф вот:
А у вас график.
Moowheel оказалась интересной штукой, жаль что mootools
0
xexsus #
Кому жаль, а кому к счастью что mootools
–1
mecommayou #
В ExtJS 3 есть еще возможности для рисования чартов.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.