Перед принятием важных решений каждый бизнесмен сперва анализирует данные. В любой области рынка можно найти огромный объем данных, из которых можно извлечь ценную информацию. С приходом Big Data старые добрые таблицы Excel утратили актуальность, и потребовалось найти столь же простую альтернативу.
Бизнесмены искали новые возможности визуализировать данные, желательно — с поддержкой интерактивности и любой доступной перспективы. В конце концов, любые данные хороши настолько, насколько много информации можно из них извлечь.
Графические библиотеки на JavaScript быстро заняли нишу мощных и доступных инструментов визуализации данных.С их помощь можно извлечь всю полезную информацию из любых объемов данных, взглянуть на неё под удобным углом и разглядеть шаблоны, невидимые на графиках уровня Excel.
1. Chartist.js
Chartist отличается простотой и легкостью освоения, столь необходимыми всем, кто привык к таблицам Excel. Графики адаптивны и не зависят от DPI экрана, что делает библиотеку отличным решением для сайтов, рассчитанных на широкий спектр устройств — от мобильных до десктопов. Рисование выполняется на базе технологии SVG, что гарантирует совместимость со всеми современными браузерами.
Что делает Chartist уникальной библиотекой графиков, так это сообщество. Над проектом трудится множество программистов, недовольных какими-либо ограничениями альтернативных скриптов. Если в вы наткнулись на ограничения, работая с другой библиотеквой, будьте уверены — здесь оно устранено.
Лицензия: open-source, бесплатна для любого использования.
2. FusionCharts
Одна из самых объемных библиотек, FusionCharts насчитывает более 90 вариантов графиков и 900 видов карт, доступных “из коробки”. Авторы хвастаются, что их продукт является лучшим в своей сфере с точки зрения визуализации данных. Свои слова они подкрепляют развернутыми примерами использования библиотеки на реальных бизнес-процессах.
FusionCharts поддерживает широкий спектр устройств и технологий, включая Mac, iPhone, Android, и даже умеет рисовать в раритетах вроде IE6!
Подумали разработчики и о форматах — поддерживаются JSON и XML, отрисовка через HTML5/SVG и VML. Готовые графики можно экспортировать в виде рисунков формата PNG или JPG, либо в виде PDF. Расширения FusionCharts позволяют встраивать библиотеку в любые стеки технологий, включая jQuery, AngularJS, чистый PHP или Rails.
В целом, FusionCharts обеспечивает практически все функции, которые могут понадобиться для создания красивых и удобных в работе графиков, пригодных для серьезного бизнес-анализа.
Лицензия: бесплатная для некоммерческих проектов, платная в ином случае.
3. Dygraphs
Dygraphs — графическая open-source библиотека, идеально подходящая для экстремально больших массивов данных. “Из коробки” она полностью поддерживает интерактивность, возможность уточнения и увеличения графиков даже на мобильных устройствах.
Библиотека поддерживается всеми современными браузерами, а обратная совместимость распространяется вплоть до IE8. Поддерживается множество опций и callback-и.
Лицензия: open-source, бесплатна для любого использования.
4. Chart.js
Chart.js идеально подходит небольшим проектам, когда вам нужен плоский, чистый, элегантный график, и побыстрее. Библиотека занимает всего 11 Кб в сжатом виде, обеспечивая при этом 6 вариантов графиков — линейный, гистограмма, круговой, лепестковый, полярный и кольцевой. Каждый из них находится в модуле, что позволяет загружать именно тот блок, который вы хотите использовать в проекте.
Рендеринг производится при помощи HTML5 Canvas, а в браузерах, где его нет — через полифиллы. Все графики интерактивны.
Лицензия: open-source, бесплатна для любого использования.
5. Google Charts
Google Charts обеспечивает широкий набор графиков практически на любой вкус. Отрисовка осуществляется при помощи HTML5/SVG, либо VML на старых IE. Все графики интерактивны, а некоторые можно увеличивать и растягивать по необходимости. Взглянуть на существующие виды графиков можно здесь.
Лицензия: бесплатная, но не open-source. Лицензия запрещает размещать JS-файл для отрисовки на сервере сайта. Если вы занимаетесь сайтом для предприятия, и размещаете в графиках конфиденциальные данные, лучше поискать альтернативу Google Charts.
6. Highcharts
Highcharts — еще одна популярная интерактивная библиотека графиков, как и большинство других, основанная на HTML5/SVG/VML. Поддерживается широкий спектр различных видов графиков, а специальный одноименный интерфейс позволяет создавать интерактивные графики прямо на ходу.
Лицензия: бесплатная для некоммерческого использования, в ином случае — платная.
7. Flot
Flot — одна из старейших библиотек, главной особенностью которой является простота и интерактивность. Она работает на jQuery, и, для полноценной работы, вам потребуется опыт работы с ним. Как только вы освоите синтаксис, в ваших руках будет полный контроль над презентацией, её анимацией и интерактивной частью.
Flot поддерживает большинство современных браузеров и умеет рисовать даже в IE6. В репозитории плагинов к Flot можно найти множество наработок сторонних авторов, расширяющих функционал библиотеки. Увидеть примеры использования Flot можно здесь.
Лицензия: open-source, бесплатна для любого использования.
8. D3.js
Для некоторых D3 — первое, что приходит в голову, когда речь заходит о визуализации данных. Это действительно мощный open source проект, позволяющий создавать невероятные визуальные эффекты при помощи изменения DOM. Графики рисуются при помощи HTML5, SVG и CSS.
Библиотека соответствует стандартам W3C и поддерживается всеми актуальными браузерами. Разработчики любят её за широкий спектр возможностей и мощный API. Демонстрация возможностей D3 доступна здесь.
Будьте внимательны — D3 поставляется без встроенных графиков, и для рисования потребуется сперва установить соответствующие пакеты расширений. Впрочем, можно найти немало сборок на основе D3 с уже готовыми наборами графиков.
Лицензия: open-source, бесплатна для любого использования.
9. n3-charts
Если вам нужна технология, способная рисовать простые интерактивные линейные графики на базе вашего AngularJS-приложения, то это ваш выбор. N3 основан на D3 и ставит своей целью лишь один сегмент разработчиков — тех, кто использует AngularJS. Ищущим разнообразия лучше взглянуть на другие варианты. Примеры использования N3 доступны здесь.
Лицензия: open-source, бесплатна для любого использования.
10. NVD3
NVD3 — проект на основе d3.js, ставящий своей целью создать удобный и полноценный набор функций для рисования графиков, но упростив процесс в сравнении с чистым d3. С его помощью можно оперировать огромной массой данных и наслаждаться особо красивой картинкой.
Лицензия: open-source, бесплатна для любого использования.
11. Ember Charts
Ember Charts разрабатывалась компанией Addepar для расширения спектра функций Ember. Помимо Charts, в эту команду также входят Ember Tables и Ember Widgets. Библиотека построена на основе D3 с интеграцией во фреймворк Ember.js.
Крепкая, вылизанная до мелочей библиотека отлично подходит для работы с данными любой сложности. Встроенная поддержка обработки ошибок позволяет презентации не “упасть”, встретив некорректные данные. Можно расширять функционал сборки самостоятельно.
Лицензия: open-source, бесплатна для любого использования.
12. jQuery Sparklines
До этого мы, в основном, говорили о тяжеловесах — универсалах, способных сделать буквально всё. Но иногда вам нужно что-то простое для выполнения базовых графиков. jQuery Sparklines — именно то решение, которое заполняет эту нишу. С её помощью можно генерировать спарклайны — маленькие линейные графики, дающие представление об общих трендах и занимающие минимум места на странице. Библиотека поддерживается большинством браузеров, включая IE6.
Лицензия: open-source, бесплатна для любого использования.
13. Sigma.js
Говоря о специализированных сборках, нельзя пройти мимо Sigma. Это мощная библиотека, преимущественно занимающаяся интерактивными графиками и взаимодействием с сетью.
Внутри Sigma можно найти невероятное количество настроек интерактивности. Именно с ней приходит понимание, что даже линейный график может быть увлекательным и необычным. Просто взгляните на демо и вы поймете, о чем речь.
Лицензия: open-source, бесплатна для любого использования.
14. Morris.js
Как говорил Моррис, хороший график не должен быть сложным. Morris — миниатюрная библиотека на основе jQuery и Raphael, обеспечивающая простые и чистые графики. Список поддерживаемых визуализаций невелик, но Morris следует попробовать, если вам нужно что-то быстрое, простое и привычное.
Лицензия: open-source, бесплатна для любого использования.
15. Cytoscape.js
Cytoscape — красивая open source библиотека на чистом Javascript под лицензией LGPL3+. Максимальная оптимизация и никаких внешних зависимостей. Cytoscape позволяет создавать графики, которые можно использовать затем отдельно, встраивая код в другие страницы.
Библиотека работает на всех современных браузерах и поддерживает популярные фреймворки, включая Node.js, jQuery, Meteor и множество других. Заметьте, что существует приложение Cytoscape, которое, несмотря на название, никак не связано с библиотекой.
Лицензия: open-source, бесплатна для любого использования.
16. C3.js
C3.js — еще один форк D3. Количество веток от D3 показывает, насколько хороши возможности библиотеки, и как тяжело совладать с ней программистам.
C3.js обходит ужасную кривую обучения D3 через собственные обработчики кода для представления графика. C3 позволяет создавать собственные классы, на базе которых можно генерировать уникальные графики. В нём уже имеется API и callback-и, необходимые для работы с графиком после отрисовки.
Лицензия: open-source, бесплатна для любого использования.
17. Rickshaw
Rickshaw был создан на Shutterstock как инструмент для отрисовки временных рядов публикаций. Как можно догадаться, его собрали на базе D3.
Примеры использования Rickshaw доступны здесь. Для библиотеки создано множество расширений, позволяющих, при необходимости, настроить её “под себя”.
Лицензия: open-source, бесплатна для любого использования.
18. Cubism.js
Возможно, лучший плагин для D3, если говорить о визуализации временных рядов. Он выделяется возможностью подтягивания данных из нескольких источников, вроде Graphite, Cube и прочих, что позволяет создавать великолепные графики в режиме реального времени.
Рендеринг ведется постепенно — отрисовкой занимается Canvas, которому доверена обработка каждого пикселя графика. Cubism особенно хорош в вертикальных графиках, предоставляя больше информации “на глаз”, чем прочие варианты.
Лицензия: open-source, бесплатна для любого использования.
19. Plottable.js
Plottable — ответвление D3, но слегка в другую сторону. Разработчики ушли в модульность, обеспечив набор подключаемых компонентов, инкапсулировав в них логику отрисовки. Модули подключаются в движок отрисовки постепенно, и каждый обеспечивает свой вклад в неё.
Это значит, что можно взять любой компонент Plottable и внедрить его на свой готовый график, либо сгенерировать новый график заново. Вся мощь D3 — в удобной модульной библиотеке, позволяющей буквально играть графиками. Здесь можно полюбоваться на примеры его работы.
Лицензия: open-source, бесплатна для любого использования.
20. Canvas.js
Как видно из названия, Canvas.js — библиотека графиков на базе Canvas. С её помощью можно создавать развернутые графики, которые корректно откроются на любом устройстве. “Из коробки” она уже оборудована несколькими темами, обгоняющими Flash и SVG по быстродействию в разы.
Лицензия: бесплатная для некоммерческого использования, платная в иных случаях.
Заключение
Визуализация и анализ данных — часть большинства современных бизнес-процессов. Компании ищут большие и маленькие графики, нуждаются и в простых, и в сложных представлениях информации, и всегда хотят работать с данными на экране. Правильно подобранная библиотека для графиков надолго удовлетворит запросы аналитиков.
Для больших объемов данных лучше всего подойдут FusionCharts, GoogleCharts, Dygraphs и форки D3. Если вы ищете что-то легко и быстрое, то взгляните на Morris.js или Chart.js. А тем, кто гонится за максимальной интерактивностью, следует обращаться к Cytoscape или Sigma.js.
