Список 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 для таких дел, хотя многие из перечисленных очень даже ничего :)

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

    Спасибо за внимание!
    Поделиться публикацией
    Ой, у вас баннер убежал!

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

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

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

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

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

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

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

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

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

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

                                            Самое читаемое