Интерактивные диаграммы и графики в WordPress

Привлекательное слово – интерактив, не так ли? А главное, что это красиво и полезно. Две мои публикации, посвященные аналитике и работе с цифрами, оказались не только полезными, но и привлекательными за счет интересной и красивой организации этих самых цифр. А если быть точнее, то я в обоих случаях предоставил вам наглядную информацию на диаграмме, согласитесь, воспринимать в таком виде удобнее!

Дайджест – об эффективности в цифрах
Sape – о регионах в цифрах

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

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

Я вас еще не заинтриговал? Ну не беда…просто взгляните сюда: www.amcharts.com

Ну как? По-моему красота! Вы посидите сейчас, потыкайте, посмотрите, повыбирайте то, что вам нравится, примените это к своим будущим постам. Релакс…

А еще – все это абсолютно бесплатно. Вы уже выбрали понравившийся график/диаграмму, тогда запомните название и скачайте нужный архив. Тем, кто дружит с английским языком будет очень полезна документация, в которой есть ответ на любой ваш вопрос. Лично я пол дня курил мануалы о том, как работать с этой системой, как настраивать и т.д. Правда, как это встроить в CMS там не написано, пришлось думать самому. О чем, собственно, мы сегодня и поговорим.

Давайте будем рассматривать все на примере круговой диаграммы, как тут. Для этого скачиваем архив под названием Pie & Donut (ver. 1.6.4.1). Судя по статистике это самый популярный вид.

Определим последовательность действий:

Разбор архива
Выбор
Настройка
Встройка
Подстройка

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

1. Разбор архива

Что подразумевает этот пункт понятно из названия. Мы распаковываем архив на локальный диск и смотрим его внутренности. Там будут две папки «ampie» и «examples». Первая – основные файлы «движка», рассказывать о каждом файле, зачем он и за что отвечает, не буду, это для экспертов, которые и без моего поста все сами смогли сделать. Вторая папка – то, что нам нужно, здесь лежат примеры созданных диаграмм, с настройками и исходниками. Советую открыть каждую папку и запустить индексный файл, чтобы посмотреть как это работает.

2. Выбор

Если вы все папки просмотрели, и вам что-то определенно понравилось, значит выбор вы уже сделали. Для себя я выбрал пример из папки «data_and_settings_inisde_html». Я не хотел плодить лишние файлы, потому все остальные папки отсеклись сами собой, так как все данные и настройки содержались в подгружаемом xml. Здесь же все данные хранятся в одном html-файле.

3. Настройка

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

Давайте взглянем на исходный код:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Data and settings inisde html</title>
</head>
 
<body>
<!-- saved from url=(0013)about:internet -->
<!-- ampie script-->
<script type="text/javascript" src="../../ampie/swfobject.js"></script>
	<div id="flashcontent">
		<strong>You need to upgrade your Flash Player</strong>
	</div>
 
	<script type="text/javascript">
		// <![CDATA[		
		var so = new SWFObject("../../ampie/ampie.swf", "ampie", "520", "400", "8", "#FFFFFF");
		so.addVariable("path", "../../ampie/");
		so.addVariable("chart_settings", encodeURIComponent("<settings><data_type>csv</data_type><pie><radius>130</radius><inner_radius>0</inner_radius><height>20</height><angle>45</angle></pie><animation><start_time>2</start_time><start_effect>strong</start_effect><pull_out_time>1.5</pull_out_time></animation><data_labels><radius>-50</radius><text_color>#FFFFFF</text_color><show><![CDATA[{title}: {percents}%]]></show></data_labels><legend><enabled>true</enabled></legend><labels><label><x>0</x><y>30</y><align>center</align><text_size>15</text_size><text><![CDATA[<b>Data and settings directly from html example</b>]]></text></label></labels></settings>"));
		so.addVariable("chart_data", encodeURIComponent("Yes;45;true;CC33FF\nSeldom;35;false;6666FF\nNo;20;false;FFCC00"));
		so.write("flashcontent");
		// ]]>
	</script>
<!-- end of ampie script -->
</body>
</html>

На что стоит обратить внимание, и что это значит:

<title>Data and settings inisde html</title> — Разумеется, заголовок файла. Я прописываю сюда заголовок поста на блоге, в который будем встраивать диаграмму.
<script type=»text/javascript» src=»…/…/ampie/swfobject.js»></script> — путь к основному файлу .js, необходимо будет прописать либо абсолютный, либо относительный путь. Здесь прописан относительный.
<strong>You need to upgrade your Flash Player</strong> — сообщение на случай, если у пользователя не установлен или устарел Flash Player.
SWFObject («…/…/ampie/ampie.swf», «ampie», «520», «400», «8», «#FFFFFF»); — путь и основные параметры. Соответственно: путь к основному флэш файлу, тип графика (в нашем случае, ampie – пирог, диаграмма), ширина, высота, минимально необходимая версия Flash Player’а и цвет фона.
Теперь рассмотрим настройки для построения графика:
1. «path» – путь, уже и так все понятно.
2. «chart_settings» – настройки внешнего вида самого графика:
  - radius – внешний радиус пирога в пикселях.
  - inner_radius – радиус дырки в пироге. Если значение 0, то дырки нет.
  - height – толщина нашего пирожка. Если значение 0, то он будет плоским, необъемным.
  - angle – угол наклона к плоскости экрана; значения от 1 до 89. 1- видим пирог сверху, 89 – видим торец пирога.
  - start_time – «реактивность» появления пирога в секундах. 0 – нет анимации появления.
  - start_effect – тип анимации. Может принимать значения: strong, bounce, regular. Рекомендую strong.
  - pull_out_time – продолжительность анимации при нажатии на часть пирога в секундах.
  - radius – радиус в пикселях на котором будут размещаться метки относительно краев пирога.
  - text_color – цвет текста меток.
  - show – шаблон написания меток. {title} – название метки, {value} или {percents} – значение численно или в процентах.
  - legend – показывает легенду значений. Принимает значения true и false.
  - C остальными значениями вы разберетесь и сами, там ничего сложного.
3. «chart_data» – содержит данные для построения диаграммы. Представляет из себя непрерывную строку кода из повторяющихся элементов вида:
  - Метка – название метки
  - Значение – численное значение для метки
  - Активность – принимает значения true/false; означает будет ли данный кусок пирога выбранным по умолчанию.
  - Цвет – цвет в шестнадцатеричном формате.
  Пример: Yes;45;true;CC33FF\n

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

4. Встройка

Теперь у нас с вами есть готовая диаграмма, она содержит необходимые данные и работает так, как нам нравится. И что теперь? Правильно – осталось ее прикрутить к записи в WordPress.

Что первое приходит в голову – вставить то, что находится внутри тегов body в тело поста и все. Да, я так же подумал. Но, увы, это не работает. Пришлось попотеть и поплясать с бубном, чтобы найти рабочий вариант.

Для встраивания графика мной был выбран метод iframe.

Для этого папку «ampie» из архива я залил на сервер: alaev.info/wp-content/ampie/
Готовый график я так же залил на сервер: alaev.info/wp-content/ampie/graphs/

Далее дело техники. В пост вставляем следующий код:

<center><iframe src="https://alaev.info/wp-content/ampie/graphs/2.html" style="border:none; overflow: hidden;" height="500" width="600"></iframe></center>

И вуаля! Все работает и показывается!

5. Подстройка

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

Такая вот гигантская статейка вышла у меня. Я думаю, вам понравится!

И это далеко не все возможности, ведь помимо «пирога» можно строить таким образом различные графики статистики чего угодно. Все, что вы найдете на сайте разработчика, можно встроить в WordPress по описанной схеме.

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

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

Я буду рад увидеть в благодарность упоминание о данном посте в мемуарах на ваших блогах и ваших Твиттер-аккаунтах. Поддержите меня и поспособствуйте дальнейшему развитию моего блога.

Спасибо за внимание, до свидания на том же месте – alaev.info!