Графика на сайте

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

Это не единственный способ, позволяющий сделать Ваш лендинг или сайт особенным. Ниже представлены несколько интересных эффектов, которые можно с легкостью применить и для своих проектов:

• Уникальное оформление Google Maps
• Круговая анимация блоков для сайта и лендинга
• Рисование элементов с нуля при прокрутке лендинга

Все 3 примера анимированных графиков можно посмотреть ниже:

Посмотреть примерСкачать

Как использовать красивые графики в своих целях?

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

Создаются такие красивые графики с помощью библиотеки — Chartist.js.

А с применением CSS3 анимации они "оживают" и притягивают внимание. Теперь представьте реакцию посетителей при виде такого на обычном лендинге! Ведь анимацией при прокрутке уже никого не удивишь, а вот подобные элементы всегда будут повышать качество сайта.

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

1 этап. Подключаем необходимые стили и скрипты

Файлы стилей и скриптов можно скачать и разместить на своем хостинге, но гораздо удобнее просто вставить 2 строчки в HTML и подключить все, что нужно:

Если размещаете в конце документа данные строки (это делается для ускорения загрузки страницы), то не забывайте прописать атрибут property со значением stylesheet у элемента <link>. Это поможет избежать ошибок валидации.

2 этап. Контейнер на странице для графика

На этом этапе задаем тег, в котором будет находиться наш график:

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

3 этап. Задаем значения графика (JS)

Для начала я приведу сразу полный код, который создает вот такой график:

А вот тот, собственно, сам код:

Пройдемся по каждой строке, чтобы у Вас было полное понимание этого небольшого JS-скрипта. А если Вы будете понимать, за что отвечает каждая строка, то сможете изменить под себя любые значения.

• Строка 1 — в этой строке обратите внимание на значение между одинарными кавычками. Здесь указывается селектор блока, в котором у нас будет находится график или диаграмма.
• Строка 2 — через запятую в одинарных кавычках прописываем названия одного деления по оси X.
• Строки с 3 по 6 — здесь задаются значения по оси Y для каждой линии на графике. Одна строка значений в квадратных скобках (в этом скрипте 4-я и 5-я строки) соответствует одной линии.
• Строка 8 — указав значение true, мы растянули график на всю ширину "блока-родителя".
• Строки с 9 по 11 — задаем внутренний отступ справа. Это делается для того, чтобы описание делений по оси X не обрезалось и помещалось в один блок.

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

Пример 1. Анимированный график

Но как же создать такой график, как на изображении выше (изображение анимированное, если у Вас нет анимации, то подождите, пока загрузится) выше?

Для этого необходимо лишь дописать некоторые свойства элементов на готовом графике. Так как весь график состоит из SVG элементов, то нам лишь необходимо решить какой из них мы хотим анимировать.

Чтобы анимировать две линии, как я это сделал в этом примере, нужно добавить следующий CSS код в Ваш файл стилей:

JS часть я здесь не пишу, она очень похожа в каждом из примеров. Если Вы внимательно изучили описание JS кода выше, где я разобрал все буквально по строкам, то и здесь Вам не составит труда разобраться.

Пример 2. Анимация выделения главной линии на графике

Здесь (на изображении выше) присутствует анимация. Если Вы ее не видите, то, возможно, у Вас просто не загрузилась картинка, просто подождите.

Это классный способ показать изменения и привлечь внимание к конкретной линии на графике. Все сделано на CSS3. Был использован следующий код для анимации:

Пример 3. Анимация в двух направлениях

Ну и последний пример с анимацией CSS3 — это анимация на графике в двух направлениях.

Для такого эффекта необходимо использовать следующий CSS код и анимацию:

Этими примерами я хотел показать, что создать красивый и, главное, выделяющийся график действительно просто. Достаточно лишь знать хотя бы основы CSS3 анимации. Об этом можно почитать по ссылке ниже.

Изучите внимательно данную статью, и тогда сможете создать любую анимацию на CSS3: CSS3 анимация для самых маленьких.

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

Вывод

В настоящее время недостаточно просто сделать лендинг или просто сделать сайт. Это уже не работает. Сейчас время, когда необходимо каждый элемент, каждый блок на сайте прорабатывать и делать максимально уникальным, не забывая при этом об основном дизайне сайта.

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

www.sitehere.ru

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

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

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

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

— Библиотеки графиков и диаграмм

01. Axiis

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

02. Am Charts

Am Charts – это сборка диаграмм на Flash для ваших веб-сайтов, или продуктов, основывающихся на веб-технологиях. Am Charts позвояет извлекать информацию из простых файлов CSV или XML, или же они могут считывать динамические данные и преобразовывать их с помощью PHP, .NET, Java, Ruby on Rails, Perl, ColdFusion и многие другие языки программирования.

03. Deensoft

Deensoft – это новая бесплатная библиотека, использующая Prototype и Canvas для создания привлекательных диаграмм. Сильными мотиваторами для этой библиотеки послужили Flot, Flotr и PlotKit. Целью библиотеки является максимальная свобода в оформлении и легкости применения.

04. Ejschart

Ejschart по-настоящему легко оформить. Emprise javascript Charts снабдит вас всеми нужными инструментами для быстрой публикации нужных вам данных в различных форматах. Emprise javascript Charts наверняка станет вашим любимым инструментом, за счет его широких возможностей и простой системой использования.

05. Ezcomponents

Ezcomponents позволит вам создавать диаграммы в различных вариациях. Механизм экспорта позволит вам из диаграмм создавать изображения различных форматов, а также как двухмерные, так и трехмерные варианты.

06. Filamentgroup

Filamentgroup с помощью javascript извлекает данные из таблиц HTML и генерирует диаграммы, с помощью элемента холста в HTML 5. Теперь у инструмента есть сторонний код, который упакован в роли нового плагина для jQuery.

07. Flot

Flot – javascript-библиотека для безупречного черчения в jQuery. С помощью этого инструмента можно производить графические чертежи. Акцент идет на простоту в использовании (вы можете пользоваться множеством опций), привлекательный вид, и другие полезные функции.

08. Fly Charts

В общем, Fly Charts – это набор SWF-файлов, которые предоставляют возможность визуализации данных. С помощью Fly Charts вы можете создавать компактные, интерактивные и привлекательные диаграммы, буквально, за минуту. Инструменту не требуется никаких процессов установки, и он может работать с любым языком скриптинга.

09. Fusion Charts

Fusion Charts без труда можно использовать в динамических веб-приложениях, статичных веб-сайтах, а также его можно комбинировать с javascript для генерирования приложений AJAX. Демо могут отлично отобразить вам то, что вы сможете делать бесплатно в Fusion Charts.

10. Google Chart

API Google Chart представляет собой максимально простенький инструмент, с помощью которого вы можете создавать диаграммы из данных, и внедрять их в веб-страницу. Вы интергрируете информацию и форматируете параметры посредством HTTP-запросов, а Google вы ответ выдает вам изображение с диаграммой в формате PNG. Поддерживается много разных форматов диаграмм, и отсылая запрос на тэги изображения, вы без труда сможете вставить диаграмму в веб-страницу.

11. Style Chart

Style Chart это инновационная технология, которая позволяет вам генерировать динамические диаграммы для ваших веб-сайтов. Эта инструкция осведомит вас о всех возможностях Style Chart.

12. Bluff

Bluff – это javascript-порт графической библиотеки Gruff для Ruby. Инструмент разработан для поддержки всех свойств что и Gruff, но с минимальными различиями

13. Jfree Chart

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

14. jqPlot

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

15. JS Charts

JS Charts представляет собой javascript-генератор диаграмм, в процессе чего вам потребуется либо чуточку кода, либо вообще ничего! JS Charts позволит вам с легкостью создавать диаграммы различных шаблонов (столбовые, круговые и т.д.).

16. Plotkit

Plotkit представляет собой JS-библиотеку для черчения графиков и диаграмм. Есть также поддержка HTML и SVG посредством Adobe SVG Viewer.

17. Maani

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

18. Omni Potent

Omni Potent представляет собой плагин для jQuery, который генерирует маленькие линейные диаграммы прямо в браузере, используя информацию, извлеченную из HTML, или же посредством javascript.

19. Open Flash Chart

Open Flash Chart представляет собой диаграмму, основанную на Flash. Вы можете пользоваться данным инструментом абсолютно бесплатно!

20. pChart

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

21. Raphaeljs

Целью инструмента gRaphael является создание привлекательных диаграмм для вашего сайта. Инструмент основывается на графической библиотеке Raphael. Посмотрите демо для подробного изучения статичных и интерактивных диаграмм в действии.

22. Visifire

Visifire – это набор бесплатных инструментов для визуализации данных, разработанный Microsoft Silverlight и WPF. Visifire можно применять и с приложениями WPF и с Silverlight. При помощи одного и того же API, диаграммы в обоих средах (WPF и Silverlight) могут быть изменены буквально за минуту!

— Начинайте чертить!

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

Если мы забыли упомянуть ту или иную отличную библиотеку, пожалуйста, сделайте это за нас в комментариях! Заранее благодарим!

www.coolwebmasters.com

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

STOCKIO

На сайте Stockio можно найти свыше 3000 бесплатных векторных изображений, доступных для скачивания. Также там есть дополнительный раздел для иконок, некоторые из которых сделаны в векторных графических редакторов. Коллекция включает в себя самые разные иллюстрации, в том числе паттерны и инфографику. На сайте присутствует удобный поиск, так что пользователю будет легко найти нужное изображение. Файлы доступны в разных форматах (AI, EPS, JPG), а скачивать можно сразу без авторизации или регистрации. Несмотря на то, что регистрироваться не обязательно, это стоит сделать, так как данный функционал позволяет сохранять понравившиеся изображения и отслеживать свои загрузки. На Stockio также можно скачать бесплатные фотографии, видео и шрифты.

FREE VECTOR

Free Vector это сайт с бесплатными векторами, в коллекции которого содержится белее чем 200 тысяч файлов в форматах EPS. AI, PDF и SVG. Пользователь может искать нужное изображения как по ключевым словам, так и путем просмотра категорий 3D, Icon, Animals, Vintage и Business. Для того, чтобы скачивать файлы, не требуется создавать учетную запись, однако при таком способе загрузки пользователю показывается реклама. Бесплатные изображения могут использоваться только в некоммерческих проектах, но если оформить подписку в размере $9,99 в месяц, то можно получить доступ к премиум-лицензии, которая подразумевает коммерческое использование векторной графики.

FREEVECTORS.NET

FreeVectors.net существует уже 10 лет и его создатели стремятся сделать все, чтобы файлы в его коллекции были легко доступны для поиска. Функция поиска по ключевым словам автоматически завершается по мере ввода запроса, так что пользователь может получить несколько новых идей, которые ему предложит система. У каждого векторного изображения имеется своя лицензия на коллективное использование, а большинство файлов бесплатны, но только для личных проектов. Регистрация не требуется, но перед началом загрузки на 5 секунд появляется всплывающая реклама. Единственная серьезная проблема с данным сайтом заключается в том, что некоторые из файлов более недоступны для скачивания, хотя большая часть коллекции скачивается без проблем. Еще один минус: пользователь не может самостоятельно указать нужный векторный формат, так что приходится надеяться на удачу.

VECTOR PORTAL

Сайт Vector Portal существует с 2005 года и на данный момент является одинм из самых крупных ресурсов с бесплатной векторной графикой. Помимо качественных стоковых векторов, там можно найти большой выбор кистей для Photoshop и Illustrator, а также различные графические материалы. Пользователь может искать графику по ключевым словам или просматривать категории (флаги, животные, шаблоны и так далее). Также есть возможность просмотра недавно загруженных и самых популярных изображений. Загрузка начинается сразу же, но при этом открывается новая вкладка в браузере, что некоторых раздражает. Большинство файлов представлены в форматах EPS и AI. Векторные иллюстрации могут использоваться для коммерческих проектов, но нужно быть внимательным и проверять лицензию. На Vector Portal также имеется блог с идеями и туториалами, что может помочь новичкам, только осваивающим векторные редакторы.

VECTEEZY

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

DRY ICONS

Сайт Dry Icons интересен тем, что специализируется на бесплатных векторных иконках, тем не менее, там можно найти и другую векторную графику. В коллекции представлено свыше 6700 файлов. По правилам, все файлы, использованные в личных и коммерческих проектах, должны сопровождаться ссылкой на ресурс Dry Icons. Иконки и графика представлены в виде наборов, а самые последние поступления отображаются на главной странице. Нужную картинку можно искать по ключевым словам, при этом система понимает направление мысли пользователя и предлагает похожие категории. Например, поиск по запросу «кошки» сопровождается предложением таких категорий, как домашние животные или «собаки». Загрузка файла начинается через 3 секунды после нажатия на кнопку, при этом пользователь не узнает формат файла, пока скачивание не закончится. Непонятно почему, но дизайнеры сайта смешали бесплатные векторные изображения с графикой Shutterstock, так что при поиске выдаются все результаты, как платные, так и нет. Это может раздражать некоторых пользователей.

VEXELS

На сайте Vexels можно найти очень качественные векторные иллюстрации, но при поиске вектор смешивается с растровыми форматами PSD и PNG, так что обязательно нужно проверять, какой именно файл скачивается. Это делается просто: достаточно навести на иконку курсор и появится подпись с указанием формата. Большинство изображений доступны для бесплатного скачивания, но при желании можно пожертвовать небольшую сумму создателю графики. К сожалению, все файлы бесплатны только для личного использования, их нельзя печатать на упаковке или использовать в коммерческих веб-приложениях. Чтобы обойти это препятствие, можно приобрести расширенную лицензию за 7,49 долларов в месяц. Также можно купить лицензию на отдельное изображение за $5. Платный аккаунт открывает доступ к онлайн-редактору с готовыми шаблонами открыток, сайтов, приглашений, баннеров и другой графики.

FLAT ICON

Если нужно найти векторные иконки, то имеет смысл посетить сайт Flat Icon. На данном ресурсе можно найти более 10 тысяч наборов иконок, большинство из которых доступны для бесплатного скачивания. Платная подписка за $7,50 в месяц открывает доступ к разделу премиум — такие иконки можно использовать в коммерческих проектах. Все иконки хорошо отсортированы, на сайте есть поиск по категориям, а также фильтр цветных и черно-белых иконок. На Flat Icons есть очень удобный функционал, позволяющий создавать собственные коллекции иконок без скачивания всего набора. Пользователи могут скачать файлы в формате PNG, SVG, EPS и PSD. Загрузка доступна только для зарегистрированных пользователей. После регистрации все файлы скачиваются мгновенно, но иногда появляется всплывающая реклама с предложением приобрести платный аккаунт.

FREEPIK

Freepik это огромный портал с бесплатной векторной графикой, чья коллекция насчитывает свыше 300 тысяч файлов в форматах AI и EPS. Искать можно как в категориях, так и по ключевым словам. Векторная графика бесплатна для личного и коммерческого использования, но желательно вносить небольшие пожертвования, если у пользователя нет платного аккаунта, который стоит $7,50 в месяц. Незарегистрированные пользователи могут скачать всего 5 файлов в день, регистрация позволяет загрузить 30 файлов в день. Загрузка файлов прерывается всплывающей рекламой, которую, впрочем, можно тут же закрыть.

VECTOR STOCK

В основном Vector Stock предлагает платные векторные изображения, но на данном сайте также есть примерно 150 тысяч бесплатных векторов. Поиск позволяет искать только бесплатные изображения, причем есть возможность просмотреть похожие картинки. Очень удобно, что пользователь может выбрать, в каком формате он хочет скачать файл. Также есть возможность платной подписки, позволяющей коммерческое использование загруженных файлов. На Vector Stock требуется обязательная регистрация. После регистрации, скачивание производится без задержек и всплывающей рекламы, также можно подключить Dropbox, что пригодится при медленном интернет-соединении.

FREELANCE.DISCOUNT

Если поиски бесплатной векторной графики оказались безуспешными, можно посетить сайт Freelance.Discount. На данном ресурсе представлено множество векторных файлов, которые можно скачать по невысоким ценам. Представлены практически все направления векторной графики, от иконок до логотипов, также есть возможность связаться с дизайнером и отредактировать файл за дополнительную плату.

freelance.today

Учимся создавать простой график

Создадим график доходности в валютном рынке, добавим значения и выстовим даты.

Подключаем библиотеки

Код html

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>  <script src="https://code.highcharts.com/highcharts.js"></script>

Настройка Highcharts графика

Код javascript

    $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function (data) {  $toolsPeriod = $('.js-valuta-tools-period'),  $toolsView = $('.js-valuta-tools-view'),    Highcharts.chart('container', {  chart: {  		zoomType: 'x'  },  title: {  		text: ''  },  xAxis: {  		categories: ['фев.12','мар.12','апр.12','май.12','июн.12','июл.12','авг.12','сен.12','окт.12','ноя.12','дек.12','янв.13','фев.13','мар.13','апр.13','май.13','июн.13','июл.13','авг.13','сен.13','окт.13','ноя.13','янв.14','мар.14','апр.14','май.14','июл.14','авг.14','окт.14','ноя.14','дек.14','янв.15','фев.15','мар.15','апр.15','май.15','июн.15','июл.15','авг.15','сен.15','окт.15','ноя.15','янв.16','фев.16','мар.16','апр.16','май.16','июн.16','июл.16','авг.16','сен.16','ноя.16','дек.16','янв.17','фев.17','мар.17','апр.17'],  		tickmarkPlacement: 'on',  		title: {  				enabled: false  		},  		gridLineColor: '#dadada',  		gridLineWidth: 0,  },  yAxis: {  		opposite: false,  		endOnTick: false,  		gridLineColor: '#dadada',  		gridLineWidth: 1,  		maxPadding: 0.02,  		tickLength: 0,  		labels: {  			style: {  				color: '#888'  			}  		},  		showFirstLabel: false,  		title: {  			text: null  		}  },  legend: {  		enabled: false  },  tooltip: {  		crosshairs: true,  		shared: true,  		valueSuffix: ' %',  		zIndex: 10  },    plotOptions: {  	area: {  		fillColor: {  				linearGradient: {  						x1: 0,  						y1: 0,  						x2: 0,  						y2: 1  				},  				stops: [  						[0, "#80889E"],  						[1, "#bdc2cd"]  				]  		},  		lineColor: '#ffd249',  		marker: {  				radius: 2,  				lineColor:"#00113c",  				fillColor: "#fff"  				  		},  		lineWidth: 1,  		states: {  				hover: {  						lineWidth: 1  				}  		},  		threshold: null  	}  },    series: [{  		type: 'area',  		name: "Проценты",  		data: [  		22.246,39.592,39.984,30.184,19.453,27.293,42.483,57.869,70.119,68.649,60.025,60.025,61.201,76.195,79.037,83.545,98.441,101.283,98.343,94.325,103.635,106.477,117.355,120.981,131.467,140.287,143.129,141.071,134.799,156.359,152.047,178.409,174.587,174.195,179.487,179.095,184.191,191.639,208.593,205.653,227.507,229.271,236.915,242.599,255.143,255.829,257.005,267.099,273.273,275.429,273.665,272.391,280.427,286.699,287.091,289.247,296.009		  		]  }]    });  });

Разберем строчки подробнее

Означает что мы можем увеличить график по оси X, путем выделение нужного участка.

  chart:  {   zoomType: 'x'  }

Параметры по оси X

categories — массив с данными, которые будут расположены внизу графика.
gridLineColor — цвет линии
gridLineWidth — ширина линии

  xAxis: {  categories: ['фев.12','мар.12','апр.12','май.12','июн.12','июл.12','авг.12','сен.12','окт.12','ноя.12','дек.12','янв.13','фев.13','мар.13','апр.13','май.13','июн.13','июл.13','авг.13','сен.13','окт.13','ноя.13','янв.14','мар.14','апр.14','май.14','июл.14','авг.14','окт.14','ноя.14','дек.14','янв.15','фев.15','мар.15','апр.15','май.15','июн.15','июл.15','авг.15','сен.15','окт.15','ноя.15','янв.16','фев.16','мар.16','апр.16','май.16','июн.16','июл.16','авг.16','сен.16','ноя.16','дек.16','янв.17','фев.17','мар.17','апр.17'],  		tickmarkPlacement: 'on',  		title: {  		 enabled: false  		},  		gridLineColor: '#dadada',  		gridLineWidth: 0,  },  

Всплывающая подсказка при наведении на точку

crosshairs — параметр true показывает всплывающую подсказку
valueSuffix  — дополнительное текстовая область для понимания, какой тип данных показывается

  tooltip: {   crosshairs: true,   shared: true,   valueSuffix: ' %',   zIndex: 10  }

Настройка стиля самого графика

stops — цвета градиентов
lineColor — цвет линии
 

Маркер
radius — радиус маркера
lineColor — цвет маркера
fillColor — цвет при наведении на маркер

  plotOptions: {  	area: {  		fillColor: {  			linearGradient: {  				x1: 0,  				y1: 0,  				x2: 0,  				y2: 1  			},  			stops: [  				[0, "#80889E"],  				[1, "#bdc2cd"]  			]  		},  		lineColor: '#ffd249',  		marker: {  			radius: 2,  			lineColor:"#00113c",  			fillColor: "#fff"  				  		},  		lineWidth: 1,  		states: {  			hover: {  					lineWidth: 1  			}  		},  		threshold: null  	}  }

Данные графика

type — показываем тип графика
name — название данных
data — массив с данными

  series: [{   type: 'area',   name: "Проценты",   data: [  22.246,39.592,39.984,30.184,19.453,27.293,42.483,57.869,70.119,68.649,60.025,60.025,61.201,76.195,79.037,83.545,98.441,101.283,98.343,94.325,103.635,106.477,117.355,120.981,131.467,140.287,143.129,141.071,134.799,156.359,152.047,178.409,174.587,174.195,179.487,179.095,184.191,191.639,208.593,205.653,227.507,229.271,236.915,242.599,255.143,255.829,257.005,267.099,273.273,275.429,273.665,272.391,280.427,286.699,287.091,289.247,296.009			  ]}  ]

Вот так просто мы создали интерактивный график с данными.

Смотрите так же другие интерактивные графики на этой странице

kisameev.ru

Круговая диаграмма

Такая диаграмма напоминает торт, разрезанный на разного размера куски. Общая сумма всех частей составляет 100%, части делят круг пропорционально своим значениям.

В примере 1 показан код для отображения состава воздуха в виде круговой диаграммы.

Пример 1. Круговая диаграмма

<!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>Круговая диаграмма</title>  <script src="https://www.google.com/jsapi"></script>  <script>  google.load("visualization", "1", {packages:["corechart"]});  google.setOnLoadCallback(drawChart);  function drawChart() {  var data = google.visualization.arrayToDataTable([  ['Газ', 'Объём'],  ['Азот', 78.09],  ['Кислород', 20.95],  ['Аргон', 0.93],  ['Углекислый газ', 0.03]  ]);  var options = {  title: 'Состав воздуха',  is3D: true,  pieResidueSliceLabel: 'Остальное'  };  var chart = new google.visualization.PieChart(document.getElementById('air'));  chart.draw(data, options);  }  </script>  </head>  <body>  <div id="air" style="width: 500px; height: 400px;"></div>  </body> </html>

Результат примера показан на рис. 1.

Рис. 1. Вид круговой диаграммы

В том месте документа, куда мы добавляем диаграмму, вставляем следующий код.

<div id="air" style="width: 500px; height: 400px;"></div>

Ширину и высоту диаграммы задаём через стили и добавляем идентификатор для работы скрипта. Этот же идентификатор должен быть указан в document.getElementById.

Параметры диаграммы состоят из двух блоков: собственно данные для отображения (переменная data) и настройки (переменная options). Первая строка в data задаёт названия последующих колонок и хотя она никак не выводится, без неё отображение происходит некорректно. В options пишется заголовок диаграммы, также можно указать трёхмерность и другие настройки, все они являются необязательными и если не заданы, то принимаются по умолчанию.

Диаграмма получается интерактивной, её части подсвечиваются если навести на них курсор или на легенду.

Примеры, список параметров и описание круговой диаграммы доступны по этому адресу: https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart

Гистограмма

Гистограмма — это столбчатая диаграмма, которая удобна для сравнения разных значений между собой. В качестве примера возьмём добычу нефти в XIX веке в России и США (рис. 2). На оси абсцисс (горизонтальная ось) нанесены годы, на оси ординат (вертикальная ось) — добыча нефти в тысячах тонн. Высота прямоугольников соответствует указанному значению.

Рис. 2. Гистограмма

Принцип создания этого типа диаграммы аналогичен предыдущему — добавляем тег <div>, связываем его со скриптом, в котором хранятся данные для графика и параметры отображения (пример 2).

Пример 2. Гистограмма

<!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>Гистограмма</title>  <script src="https://www.google.com/jsapi"></script>  <script>  google.load("visualization", "1", {packages:["corechart"]});  google.setOnLoadCallback(drawChart);  function drawChart() {  var data = google.visualization.arrayToDataTable([  ['Год', 'Россия', 'США'],  ['1860', 1.3, 70],  ['1885', 2000, 3120],  ['1901', 12170, 9920]  ]);  var options = {  title: 'Добыча нефти',  hAxis: {title: 'Год'},  vAxis: {title: 'Тыс. тонн'}  };  var chart = new google.visualization.ColumnChart(document.getElementById('oil'));  chart.draw(data, options);  }  </script>  </head>  <body>  <div id="oil" style="width: 500px; height: 400px;"></div>  </body>  </html>

Для начала добавляем тег <div> и указываем ему желаемую ширину и высоту с помощью стилей. Также важен идентификатор через который скрипт будет вставлять выбранный график в элемент <div>. Сам скрипт в сравнении с предыдущим примером сохраняет свою структуру и состоит из двух редактируемых частей — собственно данные для отображения на графике и различные его настройки. Через параметры hAxis и vAxis добавим для наглядности заголовки осей.

Остальные параметры вы можете посмотреть по этому адресу: https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart

Резюме

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

Сами графики выводятся достаточно оперативно, к тому же вызываемые файлы при первой загрузке кэшируются, поэтому последующее отображение графиков на сайте происходит быстрее. Поддерживаются все браузеры, включая старые версии Internet Explorer.

Документация сервиса на русский язык не переведена и доступна только на английском, что способно отпугнуть некоторых пользователей. На это есть только одна мантра — учите языки.

htmlbook.ru

D3.js – документы, ориентированные на данные

Сегодня, когда мы задумываемся о графиках, то первое, что приходит в голову – это D3.js Являясь open source проектом, D3.js, вне всякого сомнения, дарит много полезных возможностей, которых не хватает большинству существующих библиотек. Такие возможности как “Enter and Exit”, мощные переходы, и синтаксис, схожий с jQuery или Prototype, делают его одной из лучших JavaScript библиотек для создания графиков и диаграмм. В D3.js они генерируются посредством HTML, SVG и CSS.

В отличие от многих других JavaScript библиотек, D3.js не поставляется с заранее созданными графиками прямо из коробки. Однако вы можете взглянуть на перечень графиков, созданных на D3.js, чтобы получить общее представление.

D3.js не работает должным образом со старыми браузерами, такими как IE8. Но вы всегда можете применить такие плагины как aight plugin для кроссбраузерной совместимости.

D3.js ранее широко использовался на таких вебсайтах как NYTimes, Uber и Weather.com

Google Charts

Google Charts – JavaScript библиотека, которую я регулярно использую для простого и лёгкого создания графиков. Предоставляет множество предварительно созданных диаграмм, таких как комбинированные гистограммы, столбчатые диаграммы, календарные графики, секторные диаграммы, гео схемы, и др.

В Google charts также имеется множество конфигурационных настроек, которые помогают изменить внешний вид графика. Графики формируются с помощью HTML5/SVG добы обеспечить кроссбраузерную совместимость и кроссплатформенную портируемость на IPhone, IPad и Android. Также содержит VML для поддержки старых IE версий.

Вот замечательный список с примерами, построенными на Google charts.

ChartJS

ChartJS наделяет графики красивым плоским дизайном. Он использует HTML5 canvas для рендеринга. Поддержка для старых браузеров, таких как IE7/8, добавляется с помощью полифилла.

Графики ChartJS отзывчивы по умолчанию. Они отлично работают на мобильных устройствах и планшетах. Благодаря 6 основным разновидностям графиков прямо из коробки (core, столбчатый, кольцевой, лепестковый, линейчатый и полярный), ChartJS определённо является одной из наиболее впечатляющих open source библиотек для построения графиков и диаграмм, за последнее время.

Chartlist.js

Chartlist.js предоставляет красивые отзывчивые графики. Также как и ChartJS, Chartlist.js является результатом труда сообщества, которое разочаровалось в дорогих диаграммных библиотеках JavaScript. Он использует SVG для рендеринга графиков/схем. Может управляться и конфигурироваться посредством CSS3 media queries и Sass. Также, примите к сведению, что замечательная анимация, предоставляемая Chartlist.js, будет работать только в современных браузерах.

n3-charts

Если Вы – AngularJS разработчик, то n3-charts определённо вам покажется необычайно полезным и интересным. n3-charts создан поверх D3.js и AngularJS. Он предоставляет множество стандартных графиков в виде настраиваемых AngularJS директив.
Ознакомьтесь с перечнем графиков, созданных с помощью на n3-charts.

Ember Charts

EmberCharts – ещё один великолепный open source репозиторий, построенный на D3.js и Ember.js Предоставляет легко настраиваемые графики временного ряда, гистограммы, секторные диаграммы и диаграммы рассеяния. Использует SVG для рендеринга графиков.

Smoothie Charts

Если вы имеете дело с потоком данных в реальном времени, то вам может пригодиться Smoothie Charts. Для рендеринга графика здесь используется элемент HTML5 canvas. Это библиотека на чистом JavaScript, которая предоставляет такие опциональные возможности для графиков реального времени как задержка и вспышка цвета.

Chartkick

Chartkick – JavaScript библиотека для построения графиков/схем в Ruby приложениях. Предоставляет все основные типы диаграмм, такие как секторная, столбчатая, гистограмма, комбинированная гистограмма, гео, временная и диаграмма кратного ряда. Диаграммы генерируются через SVG.

MeteorCharts

Вы ещё не пробовали работать с Meteor v 1.0? Ладно, MeteorCharts поможет вам в создании красивых диаграмм для Meteor приложений. Для рендеринга графиков предоставляется возможность выбора любой из этих технологий: HTML5 canvas, WebGL, SVG и даже DOM.
Это замечательный генератор графиков, который позволяет вам выбрать его тип, тему, а затем выполнить генерацию. Бесплатен для использования в некоммерческих проектах. Подсчитать стоимость коммерческой лицензии можно здесь.

Highcharts JS

Highcharts JS – ещё одна весьма популярная библиотека для построения графиков. Комплектуется большим количеством анимации разнообразного типа, способной привлечь множество внимания к вашему сайту. Как и другие библиотеки, HighchartsJS содержит множество предварительно созданных диаграмм: сплайновых, фигурных, комбинированных, столбчатых, гистограмм, круговых, точечных и пр.

Одно из самых больших преимуществ применения HighchartsJS – совместимость со старыми браузерами, такими как Internet Explorer 6. Стандартные браузеры используют SVG для рендеринга графиков. В устаревшем IE графики строятся через VML.

Хотя HighchartsJS и бесплатен для персонального использования, вам необходимо приобрести лицензию для коммерческого применения.

Fusioncharts

Fusioncharts – одна из наиболее старых JavaScript библиотек, которая была впервые выпущена в 2002 году. Графики генерируются посредством HTML5/SVG и VML для лучшей портируемости и совместимости.

В отличие от множества библиотек, Fusioncharts предоставляет возможность парсинга как JSON данных, так и XML. Вы также можете экспортировать эти графики в 3 разных формата: PNG, JPG и PDF.

Fusioncharts хорошо совместим со старыми браузерами, такими как IE6. И по этой причине он стал одной из наиболее предпочитаемых библиотек во множестве торговых организаций.

Вы можете бесплатно использовать версию Fusioncharts с водяным знаком как в личных так и в коммерческих проектах. Однако, вам необходимо приобрести лицензию, чтобы избавиться от водяного знака.

Flot

Flot – JavaScript библиотека для JQuery, позволяющая создавать графики/диаграммы. Одна из старейших и наиболее популярных диаграммных библиотек.

Flot поддерживает линейчатые, точечные, гистограммы, столбчатые и любые комбинации из этих видов диаграмм. Также совместим со старыми браузерами, такими как IE 6 и Firefox 2.

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

amCharts

amCharts, несомненно, одна из наиболее красивых диаграммных библиотек. Она в полной мере разделилась на 3 независимых вида: JavaScript Charts, Maps Charts (amMaps) и Stock charts.

amMaps – мой любимый из этих трёх, что указаны выше. Предоставляет такие возможности, как теплокарты, рисование линий, добавление текста на карту, загрузка иконок или фотографий в верхнюю часть вашей карты, изменение масштаба и пр.
amCharts использует SVG для рендеринга графиков который работает только в современных браузерах. Графики могут не правильно отображаться в IE ниже 9й версии.

Ознакомьтесь с этой фантастической коллекцией замечательных демок, созданных на amCharts.

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

EJSChart

EJS Chart заявляют о своём практичном решении для предприятий. Графики выглядят аккуратней и читабельней чем большинство других из более старых библиотек. Также имеется совместимость с IE6+ и другими старыми браузерами. Ознакомьтесь с этим списком примеров.

EJS Chart предоставляется в бесплатной и платной версиях. Бесплатная версия имеет ограничение, не позволяющее вам использовать более 1 графика на странице и более двух (числовых) последовательностей на графике. Ознакомьтесь с ценовыми подробностями здесь.

uvCharts

uvCharts – JavaScript библиотека с открытым исходным кодом, заявляется о наличии более 100 конфигурационных опций. У неё имеются графики 12 различных стандартов прямо из коробки.

uvCharts построен на D3.js библиотеке. Этот проект обещает устранить все сложные нюансы кодинга D3.js и обеспечить лёгкую реализацию графиков стандартного вида. uvCharts генерируется посредством SVG, HTML и CSS.

habr.com

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

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 таблицы. Простой в использовании и позволяющий создавать пять типов диаграмм.

Источник урока: http://www.adatum.ru
Автор: Сергоманов Дмитрий

adatum.ru

Здравствуйте друзья! Сегодня речь пойдет о веб-дизайне, а точнее о некоторых рекомендациях, которые следует учитывать при использовании графики на своем сайте! Использование графики для оформления веб-сайта – эффективный способ сделать веб-страницы более привлекательными и интересными для пользователей. При этом, использование графики в интернете имеет свои особенности, о которых следует помнить, чтобы достичь максимального положительного результата. Поскольку просмотр веб страниц осуществляется в браузерах, необходимо адаптировать приготовленные к публикации фотографии, рисунки, видео и требованиям наиболее популярных браузеров. Таких как Chrome, Firefox, Opera, Safary, Seamonkey. Иначе браузер просто не сможет воспроизвести графику и вместо красивых картинок на веб-странице будут пустые квадраты. Не следует использовать фотографии и рисунки, требующие нескольких мегабайт памяти. Разумеется, качество будет высокое. Но, слишком тяжелая графика существенно замедляет загрузку страниц и у посетителя моет просто не хватить терпения дождаться загрузки страницы. Поэтому, перед размещением картинок и фото на страницу, следует уменьшить их размер примерно до 100-200 килобайт. Для этого существуют специальные программы-ресайзеры. Например FastStone PhotoResizer. Лучше всего для публикации в интернете использовать графические форматы jpg, png, gif. Если ваша графика в другом формате, ее необходимо конвертировать в эти форматы. Изменить формат можно с помощью фото конвертера. Такая функция входит во многие графические редакторы как дополнительная опция. Видеоролики очень привлекательны на веб-страницах. Как и в случае со статической графикой, необходимо конвертировать видео в читаемый браузерами формат. Например флешь-видео swf. Удобный видео конвертер ToolWiz Player and Converter Free. Очень красиво и привлекательно смотрятся анимированные баннеры со сменяющимися картинками и бегущей строкой. Такие баннеры легко можно сделать с помощью соответствующих программ. Например Falco Gif Animator. Или Vectorian Giotto. Некоторые конструкторы сайтов имеют в своем арсенале собственные утилиты для работы с графикой. Например, фото галереи или мультипликацию. Можно сказать, современные веб-технологии предоставляют практически бесконечные возможности творческой работы с графикой для веб-сайта. Даже если веб-мастер не способен нарисовать своей рукой даже домик, с помощью графических редакторов он сможет создавать настоящие шедевры. Немного терпения, немного креатива и все будет красиво. На этом все, пока.

sergey-oganesyan.ru