Подборка 12 скриптов для построения красивых графиков и диаграмм.

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

1. jqPlot — Универсальный и расширяемый JQuery Plugin для построения графиков

Демо Скачать

jqPlot — JQuery Плагин для построения графиков на Javascript.
jqPlot производит красивые линии, бары и круговые диаграммы с большим количеством функций:
Многочисленные стили диаграмм.
Данные на оси с настраиваемым форматированием.
До 9 осей Y.
Поворот текста оси.
Автоматическое вычисление линии тренда.
Всплывающие подсказки.
Простота  использования.

http://www.jqplot.com/

2. Библиотека визуализации Dygraphs

Демо Скачать

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

Особенности:
Отображение временных рядов без использования внешних серверов или флэш-анимации
Работает в Internet Explorer (с помощью excanvas)
Малый размер (69kb)
Отображает значения при наведении курсора мыши
Интерактивное  масштабирование
Регулируемый период усреднения
Совместимость с API визуализацией Google
http://dygraphs.com/

3. Highcharts — Интерактивные графики JavaScript для вашего сайта

Демо Скачать

Highcharts является библиотекой для постройки графиков , написанная на чистом JavaScript, предлагая интерактивные диаграммы для вашего веб-сайта или веб-приложения. Highcharts в настоящее время поддерживает линии, сплайны, области, areaspline, колонки, бар, пирог, разброс, угловые датчики, arearange, areasplinerange, columnrange и полярные типы диаграмм.

http://www.highcharts.com/

4. JQuery с эффектом прокрутки колесика мыши

Демо Скачать

Не использует  PNG или JPG спрайты.
Обрабатывает события сенсора, колесика мыши, и клавиатуры.
http://anthonyterrien.com/knob/

5. Стильный индикаторы на CSS3

Демо Скачать

Стильные,  анимированные  индикаторы с использованием CSS3.
http://www.red-team-design.com

6. Highcharts с JQuery

Демо Скачать

Highcharts это совместимая  с JQuery и Mootools, библеотека для построения графиков. Она совместима со всеми стандартными веб-браузерами, для построения графа использует  JSON данные. Поддерживает  несколько типов графа  линии, сплайны , область, areaspline, колонки, бар, pie и точечную диаграмму.
 Highcharts.com

7. Анимированный граф на HTML5 и JQuery

Демо Скачать

Прекрасная, интерактивная круговая диаграмма с использованием новейших технологий HTML5. Не использует  Flash.

8. Экспериментальный граф на CSS3

Демо Скачать

Этот метод является примером постройки экспериментальных графиках на CSS3, без JavaScript и изображений. Использование CSS3 селекторов поистине впечатляет: трансформации, градиенты и переходы в использовании. К сожалению не поддерживается в  IE.

9. Еще одна диаграмма на JQuery и HTML5

Демо Скачать

Visualize плагин анализирует ключевые элементы содержания в структурированной HTML таблице, и использует HTML5, что превратить их в диаграмму или график. Например, в таблице данных строки могут служить графиком баров, линий или клинев. Visualize также автоматически проверяет максимальное и минимальное значения в таблице и использует их для расчета оси х значения для линии и гистограммы. Наконец, плагин включает в себя два различных стиля CSS — светлый и  темный  которые могут быть использованы как есть, или могут служить в качестве отправной точки для настройки диаграмм и графиков.
http://filamentgroup.com

10. Красивые бары на CSS

Демо Скачать

Прекрасный пример построения аккуратных графиков-баров.

11. Линейный График с помощью CSS

Демо Скачать

12. JQuery с Google Charts

Демо Скачать

GvChart это плагин jQuery, который использует Google Charts для создания интерактивной визуализации с использованием данных из HTML таблицы. Простой в использовании и позволяющий создавать пять типов диаграмм.

Posted in: график,диаграмма