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

Однако, ситуация меняется к лучшему, о чем я и решил написать. Итак, flash-средства построения графиков, чартов и диаграмм для веб. Они имеют единственный, правда весьма заметный недостаток – если у посетителя отключен флэш, он ничего не увидит. Если вы хотите подстраховаться – было бы неплохо проверять наличие включенного flash и отдавать либо статические графики, либо предупреждение о том, что нужно включить отображение flash.

Кстати, я установил Snap – стало ли от этого удобнее?

1. FusionCharts Free

Мощное и достаточно распространенное бесплатное средство для построения 22 типов графиков и диаграмм на страницах вашего сайта или интранета. Предлагается обертка для упрощения построения графиков на PHP. На сайте производителя существует шикарная документация с примерами использования для различных языков программирования и статического XML.

Для тех, кому всегда мало – имеется коммерческая версия FusionCharts, предлагающая дополнительные опции визуализации типа трехмерного освещения, еще 23 типа графиков и, как уверяет разработчик, полную поддержку AJAX/Javascript. Цены – от 69 до 4500 долларов.

Кроме бесплатного решения для разработчиков, FusionCharts предлагает воспользоваться своим компонентом в виде Google Gadget -визуального конструктора, позволяющего создать график и получить код для его размещения на страницах вашего сайта.

2. amCharts

Еще одно средство построения анимированных графиков на flash. Умеет строить кольцевые диаграммы, классические графики X-Y и многое другое. На сайте и в блоге разработчика приводятся образцы использования и документация. Имеется форум технической поддержки.

Существует бесплатная версия, с единственным ограничением – все графики будут содержать ссылку на сайт разработчика. Цена коммерческой версии начинается на уровне €85 за лицензию на использование в пределах одного домена.

3. AnyChart Flash Chart Component

Исключительно коммерческий и весьма недешевый (от $499 за лицензию на одного разработчика) flash-компонент для построения анимированных диаграмм. Предлагается более 60 типов графиков и ряд интересных опций – например, возможность сохранить график как картинку.После регистрации на сайте становится доступна пробная версия компонента.

Под катом – еще восемь flash-компонентов для построения графиков.

4. Flash Charts Pro

Еще один коммерческий компонент. Цены – от $59 до $1299. Данные берет из XML, умеет обновляться по вызову Javascript-функции. Доступна пробная версия.

5. Swiff Chart Generator

Очередной коммерческий компонент (от $899 на один сервер). Много различных визуальных стилей для шести типов графиков. Существует возможность интеграции в приложение, написанное на ASP.NET/PHP/JSP/ColdFusion. Имеется пробная версия.

6. XML/SWF Chart и PHP/SWF Chart

Один из старожилов на рынке flash-графиков. По сути, один и тот же визуальный flash-компонент, использующий разные методы загрузки данных: в первом случае используется статический XML-файл, во втором – предлагается использовать обертку на PHP. Имеется бесплатная версия, но она с подвохом: щелчок по графику уведет вашего посетителя на сайт разработчика графиков без предупреждения. Стоимость весьма гуманна: от $45 за использование в пределах одного домена до $550 за неограниченное использование и право редистрибуции в рамках собственных проектов.

7. Open Flash Chart (OFC)

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

8. ASTRA Charts

Решение от Yahoo! Developer Network. Разработчику дана полная свобода в самовыражении – можно скачать файлы *.fla. Традиционно для Yahoo – весьма бедный визуальный стиль, используемый по умолчанию, но куча возможностей именно для flash-разработчика/дизайнера. Инструмент распространяется на условиях Yahoo TOS.

9. Yahoo! UI Library: Charts

Еще одно решение от Yahoo, позволяющее визуализировать табличные данные в различных форматах. Как и Astra, распространяется на условиях Yahoo TOS. Что приятно, скрипты, реализующие решение можно брать непосредственно с серверов YUI до тех пор, пока вы пользуетесь компактными (minified) скриптами. Для отладки потребуется разместить файлы на своем хостинге. Поддерживается XMLHTTP для асинхронного обновления графиков.

10. Rich chart Live

Это решение, как и FusionCharts: Google gadget подойдет тем, кому не нужно самому программировать вывод графиков – мы имеем дело с онлайн-конструктором графиков. Введите данные в таблицу, выберите стиль графика и вариант оформления и получите код для блога или флэш-объект для размещения на страницах вашего сайта. Быстро, удобно и красиво. Помимо конструктора, компания разработчик так же предлагает коммерческий оффлайн конструктор для построения графиков – Rich chart builder.

11. Andrew в комментариях к этой записи предложил еще один компонент: Ankord zxChart.

Это shareware-компонент стоимостью €15 предлагает следующие опции (далее – цитата с сайта разработчиков):

Для передачи данных для отрисовки используется собственный формат данных, который описан в прилагаемой документаци. Странно, что документация приложена только на английском языке, хотя производитель графиков, судя по всему, отечественный, что само по себе достойно похвалы. Ребятам не хватает правильного технического писателя и современного дизайна, чтобы встать в один ряд с упомянутыми выше решениями.

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

Все еще интересно? Подписывайтесь Кстати, было бы здорово услышать ваше мнение – комментируйте!

No related posts.

Если вы работаете в веб-разработке (дизайне, юзабилити или смежных областях), вам, вероятно, хочется добавить удобства вашим табличнеым данным — сортировка, отбор данных по заданным критериям и даже редактирование — все это возможно. Но как? Ниже — обзор нескольких решений, позволяющих прокачать ваши таблицы до предела. Стоит оговориться – все это происходит на стороне клиента, поэтому следует озаботиться наличием у ваших посетителей современных браузеров.

1. Tablesorter
Плагин для JQuery, позволяющий легко добавить сортировку (по нескольким столбцам!) к таблицам. Достаточно легкий, поддерживает пакеты стилей (скины), имеет интерфейс для написания и подключения виджетов, одним из которых является поставляемая в комплекте зебра. Имеется автоматическое определение типа данных в столбце – впрочем, не всегда корректно работающее — мне пришлось писать собственный сортировщик для дат в формате дд-мм-гггг, что, впрочем, нисколько не умаляет достоинств этого скриптика.
A favorite of mine =)

2. ExtJs Grid
Поддержка схлопывающихся строк, вписывания в площадь, выбора строк стандартными чекбоксами и горизонтальной прокрутки. Можно навешивать свои панели инструментов.

3. dhtmlxGrid
Постраничное разбиение больших таблиц, отбор данных, итоговые поля, поддержка drag’n'drop, сериализация и импорт данных в/из xml и csv, поддержка скинов либо пользовательских css.

4. Phatfusion sortable
Сортировка таблиц с возможностью отбора данных. Требует наличия mootools > 1.11

Под катом — еще деcять разновидностей воплощения динамической таблицы с применением DHTML/Javascript/AJAX. А местами —даже Ruby On Rails

5. Mootable sorting
Еще одна надстройка к mootools — умеет сортировать, подсвечивать и передавать по клику номер выбранной строки. Имеется псевдо-консоль с отладочной информацией – cтранно, что при этом нет поддержки firebug.

6. Elite zebra tables
Зебро-таблички с возможностью множественного выбора, разумеется сортировки и подсветки на перекат. Имеется поддержка функциональности html-форм.

7. Prototype TableKit
TableKit — коллекция табличных примочек, построенная на Prototype. Имеется сортировка (куда уж без нее? ), обрезка длинных рядов, изменение размера ячеек и редактирование ячеек, построенное при помощи AJAX.

8. Таблицы и Ruby On Rails -статья “How to paginate, sort and search a table with Ajax and Rails“. Вдумчивая статья о том, как сделать таблицы функциональными, применяя Rails и AJAX. Небезынтересно тем, кто активно осваивает Rails =)

9. Unobtrusive table sort
Сортировка по нескольким столбцам, автоматическое определение типа данных в столбце, обширные возможности по доработке надфилем: интерфейс для плагинов и собственные callback-функции на before-sort и after-sort.

10. Yahoo! UI Datatables
Чертова гора возможностей — пусть вас не пугает страшненький внешний вид =)) Сортировка, редактирование данных, постраничная разбивка таблиц, подсветка и пользовательские скины — перечислено только самое насущное.

11. Standartista
Очень простой в применении сортировщик, оттестированный, как утверждает автор, на множестве различных броузеров. Не сильно богат наворотами, но вполне сойдет для тех, кто хотел отсортировать данные, а не построить истребитель пятого поколения =)

12. Sortable tables by WebFX

13. SortedTable
Сортировка, взаимодействие между несколькими таблицами.

14. Mootools Table Row and Column Highlighting
И снова – mootools =) На этот раз — не вполне сортировщик, но весьма забавный пример того, как можно подсвечивать ячейки с помощью mootools.

Этот пост навеян статьей “Data Grids with AJAX, DHTML and JavaScript” из блога SmashingMagazine, который осмелюсь рекомендовать к обязательному прочтению.

No related posts.