1. PlotKit – Javascript Chart Plotting

PlotKit – свободно распространяемый скрипт, основанный на Mochikit и предназначенный для отрисовки разнообразных диаграмм. Существует два режима работы:

• при помощи html-объекта canvas с поддержкой браузеров Safari 2+, Opera 9+, Firefox 1.5+ и IE 6 в режиме эмуляции canvas
• SVG (в Opera 9+, Firefox 1.5+ с ограничениями и IE6 с поддержкой Adobe SVG)

2. Plotr

Легкий (12Кб) свободно распространяемый скрипт, основанный на предыдущем – PlotKit. Не требует наличи MochiKit, ради чего, собственно, и задумывался (правда, добавился Prototype ). В отличие от PlotKit, использует только html canvas. Декларируется работа в следующих браузерах: Firefox 1.5+, Safari 2.0+, Opera 9.0+ и IE6+ в режиме эмуляции html canvas.

3. Flot

Свободно распространяемый плагин для jQuery, предназначенный для построения графиков из различных наборов данных на лету на стороне клиента. Фишка – в простоте использования (все настройки являются опциональными), привлекательном внешнем виде и интерактивных примочках, типа увеличения на лету. Несмотря на простоту в использовании, Flot достаточно продвинут для работы в сложных Web2.0 приложениях.

Плагин должен работать на всех свежих браузерах, отрисовка производится при помощи тега canvas везде, кроме IE. Там используется javascript-эмуляция – excanvas.

Под катом – еще 13 javascript-графиков.

4. Timepedia Chronoscope

Chronoscope – cредство для визуализации событий на временной оси, разрабатываемое Timepedia. Распространяется как бесплатно, так и на коммерческой основе с дополнительной техподдержкой покупателей. Сверхзадача разработчиков – создать интерфейс, подобный по функционалу сервису Google Maps, но не для гео-данных а для событий, распределенный по времени. Разработка находится в процессе, поэтому, например, в IE графики еще не отображаются корректно.

5. Timeplot

Еще один DHTML/AJAX скрипт, позволяющий визуализировать события, распределенные по времени. Шикарный набор функций, возможность оснащения графиков всплывающими подсказками и пошаговое руководство к действию на сайте авторов – все включено. Функционал виден на скриншоте ниже.

6. Javascript Diagram Builder

Свободно распространяемый скрипт, позволяющий рисовать разнообразные графики при помощи примитивов. Незаменим для тех, кому требуется публиковать графики математических зависимостей. В отличие от многих перечисленных в этом обзоре скриптов, работает в старых браузерах (IE4+, Opera5+). Кроме клиентского скрипта, предлагается php-скрипт, позволяющий строить графики, отдавая их посетителю как сформированное изображение.

7. Emprise JavaScript Charts

Коммерческое решение (формально имеется бесплатная версия, но она с водяным знаком и слабо функциональна). Роскошный функционал и все возможные опции по взаимодействию с пользователем – масштабирование, подсказки, обновление при помощи AJAX. Декларируется полная поддержка следующих браузеров:

Windows

• Internet Explorer 7
• Internet Explorer 6
• Firefox 1.5+
• Mozilla 5+
• Netscape 9+
• Opera 9+

Macintosh

• iPhone 1.0
• Safari 2+
• Camino 1.0.4
• Firefox 1.5+

Стоимость – от $100 до $1000.

8. Ajax MGraph

Легкий плагин для prototype, позволяющий легко и ненапряжно построить весьма изящную столбчатую диаграмму (по-моему, они называются гистограммами; если неправ – поправьте в комментариях =)) Имеется возможность выводить значение конкретной категории и снабжать график статистической информацией и текстовым примечанием (html работает).

9. CSS Vertical Bar Graphs

CSS-гистограмма от Эрика Майера. Крайне изящное css-решение, основанное исключительно на позиционировании элементов списков. Настоятельно рекомендуется к подробнейшему изучению как образец работы с CSS.

10. Apples to Oranges: CSS for Bar Graphs

Еще одно CSS-решение для построения разнообразных гистограмм.

11. Dynamic Pie Chart with CSS

Круговая диаграмма – любой внешний вид, любой размер, любой цвет. Сначала, правда, ее придется нарисовать =)) Чистый CSS, причем очень элегантно исполнено. Внимательно посмотрите на скриншот, чтобы понять как оно работает.

12. Real World Bar Graphics with some CSS

Теперь – CSS-гистограммы из Камбоджи. Берем html-таблицу (с данными, да!), рисуем столбик, перемешиваем это все с CSS – и – вуаля! Результат на скриншоте. На мой взгляд, квинтэссенция всего обзора: визуализация табличных данных прямо в таблице. =)

13. SAC Simple Accessible Charts

Жосские CSS-трюки от горячих немецких парней. На этот (очередной) раз – с html-списками.

<ul class="chart"><li>Ants<span style="background-position: center -35">: </span><strong>35%</strong></li><li>Bisons<span style="background-position: center -40">: </span><strong>40%</strong></li>

<li>Crocodile<span style="background-position: center -87">: </span><strong>87%</strong></li>

<li>Dingo<span style="background-position: center -45">: </span><strong>45%</strong></li>

<li>Emu<span style="background-position: center -23">: </span><strong>23%</strong></li>

</ul>

14. Vertical Bar Graphs with CSS and PHP

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

15. An accessible bar chart

И снова – здравствуйте =) Сначала рисуем столбцы, потом запихиваем их в таблицу, прокачанную CSS. Получаем весьма симпатичную горизонтальную гистограмму, предложенную авторами сайта про стандарты-шмандарты.

16. Stu Nicholls definition list bar chart

Stu Nicholls играет в CSS. Надо заметить, игры весьма изящные – вот такой xhtml:

<dl><dt>Browser usage (%) - July 2005</dt>

<dd class="p670"><b>IE.6 = 67% </b></dd>

<dd class="p67"><b>IE.5 = 6.7% </b></dd>

<dd class="p12"><b>Opera = 1.2% </b></dd>

<dd class="p197"><b>Firefox = 19.7% </b></dd>

<dd class="p26"><b>Mozilla = 2.6% </b></dd>

<dd class="p08"><b>NN7 = 0.8% </b></dd>

</dl>

позволяет получить вот такой график:

За CSS позволю себе отправить дотошного читателя на сайт Stu Nicholls =)

Вот, пожалуй и все на сегодня. И на эту неделю – тоже =) Прошу комментировать активнее – иначе возникает ощущение, что моя писанина никому нафиг не нужна =) Да, не забывайте подписываться на RSS.

No related posts.

Если у вас есть хостинг, можно попробовать разместить собственную галерею: тут от выбора начинают разбегаться глаза, поскольку вариантов технической реализации -уйма. Тут и масса phpMy*-style галерей, надстроек к различным форумным движкам, наконец – галерей, построенных при помощи Flash. PHP, как средство построения, хорош всем, за исключением необходимости поддержки его на хостинге (что, правда, уже весьма распространено) и, галереи, построенные на PHP как правило требуют наличия базы MySQL, что немного сложнее. С другой стороны, flash-галереи можно кидать где угодно, но требуется знание ActionScript. Кроме того, не всегда возможно отредактировать исходник – например, если автор не распространяет *.fla файл в составе галереи.

Выход из ситуации – CSS/DHTML/Javascript – эта связка не требует серверной поддержки, и, на мой взгляд, значительно более изящна чем все вышеперечисленные. Огромный плюс всех перечисленных решений – они все значительно красивее галерей, которые предлагает, например, narod.ru. Поэтому, имея фотографии на народ.ру, достаточно использовать любой из перечисленных ниже скриптов, чтобы заиметь действительно красивую фотогалерею. Проблема у такого подхода всего одна: совсем старые браузеры могут некорректно отображать или вовсе не отображать вашу галерею. Но таких браузеров, к счастью, уже не так много =

Впрочем, к делу: вашему вниманию обзор ряда фотогалерей и сопутствующих решений, построенных на CSS/DHTML/Javascript. Да, чуть не забыл: превьюшки для галерей, скорее всего, придется генерить самостоятельно

1. Lightbox 2
Ненавязчивый скриптик, позволяющий отображать картинки поверх открытой страницы. Поддерживает серии изображений и крайне прост в использовании. Простота, помимо всего, открывает широкие горизонты для доработчиков напильником, позволяя интегрировать скрипт в более сложные проекты.

2. Imago
Скрипт галереи, построенный на mootools. Умеет показывать картинки как из папки на сервере, так и с Flickr. Как утверждает автор, его миссия – сделать простую в использовании, но достаточно хорошо настраиваемую галерею.

3. Adobe Spry Photo Gallery
С удивлением для себя обнаружил очередной AJAX-фреймворк – Adobe Spry. Подозреваю, что он – тема для отдельного обзора, но сейчас имею предложить вниманию читателя фотогалерею, построенную с помощью этого фреймворка. Судя по всему, это не самый простой путь, но возможности открывает достаточно широкие. Взгляните сами:

Под катом – еще пять вариантов фотогалереи без применения PHP или любого другого серверного языка =)

4. FrogJS
Вы занимаетесь репортажной съемкой? Никаких проблем =) Сосредоточьтесь на выборе фототехники, а оформление фотоисторий доверьте FrogJS – эта библиотека идеально подходит для тех, кто хочет показывать постраничные репортажи. Очень просто устанавливается, поддерживает изображения любых размеров, и, по заверению автора умеет работать даже с выключенным javascript. Проверено со следующими браузерами:

• Internet Explorer 6
• Internet Explorer 7
• Firefox 2.0
• Safari 2.0
• Opera 9.1

5. jQuery slideViewer
Плагин для jQuery, позволяющий строить галерею с прокруткой из единственного немаркированного списка html:
<div id="mygalleryinpost10.12.2006" class="svw">
<ul>
<li><img src="picts/10.jpg" alt="my description for this image" /></li>
<li><img src="picts/08.jpg" alt="this is my dog..." /></li>
<li><img src="picts/03.jpg" alt="my dog eating the cat" /></li>
<li><img src="picts/05.jpg" alt="my r/c helicopter crashing..." /></li>
<!--etcetera-->
</ul>
</div>

6. JonDesign’s smoothgallery

Навороченная надстройка над mootools: умеет показывать наборы галерей, слайд-шоу и прочие прелести. При этом достаточно симпатично выглядит и имеет возможность настройки переходов между изображениями. Как и предыдущие, использует семантически правильный html для форматирования.

7. Suckerfish HoverLightbox
Смотрелка, построенная на меню Suckerfish, описанных на ALA и галерее Hoverbox Image Gallery написанной Натаном Смитом из SonSpring. О hoverbox речь ниже, а пока – Suckerfish HoverLightbox:

Выпадающие меню из картинок – это круто. А когда еще и перекат (hover) есть и работает, как показано на скриншоте – это совсем круто Традиционно, используется семантическая разметка, имеется возможность использования при выключенном javascript.

8. Hoverbox Image Gallery

Одна из самых пожилых галерей подобного рода – на нее ссылается масса источников и, что интереснее, многие описанные здесь скрипты навеяла авторам именно эта разработка. Кроссбраузерность, как следствие, на высоте. Традиционно, семантически правильный html внутри и великолепный вид снаружи.

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.