Cyrill

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

Пару-тройку лет назад на поверхности было негусто решений, позволяющих решить задачу, и разработчик, как правило вынужден был садиться за ман к 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-компонентов для построения графиков.

Читать полностью »

Таблицы — пример отличной информационной структуры, представляющей данные в наглядном виде. При использовании по назначению — для организации данных, а не для верстки, таблицы — наиболее компактный и в то же время удобный инструмент, что, в принципе, и требуется. =)

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

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 Читать полностью »