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

Дайджест – про ефективність в цифрах
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).
    Ось як спочатку виглядає діаграма (див. рис.)

    Давайте поглянемо на вихідний код:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <html>
    <head>
    <meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8” />
    <title>Data and settings inisde html</title>
    </head>
    <body>


    <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”>
    // var so = new SWFObject(“../../ampie/ampie.swf”, “ampie”, “520”, “400”, “8”, “#FFFFFF”); so.addVariable(“path”, “../../ampie/”); so.addVariable(“chart_settings”, encodeURIComponent(“csv130020452strong1.5-50#FFFFFF</show></data_labels><legend>true</enabled></legend><label>0</x>30</y>center</align>15</text_size><text>Data and settings directly from html example]]>&lt;/text&gt;&lt;/label&gt;&lt;/labels&gt;&lt;/settings”&gt;“));
    so.addVariable(“chart_data”, encodeURIComponent(“Yes;45;true;CC33FF\nSeldom;35;false;6666FF\nNo;20;false;FFCC00”));
    so.write(“flashcontent”);
    // ]]&gt;
    &lt;/script&gt;

    &lt;/body&gt;
    &lt;/html&gt;

    Data and settings inisde html
    You need to upgrade your Flash Player
    // Data and settings directly from html example]]>”));
    so.addVariable(“chart_data”, encodeURIComponent(“Yes;45;true;CC33FF\nSeldom;35;false;6666FF\nNo;20;false;FFCC00”));
    so.write(“flashcontent”);
    // ]]&gt;

    На що варто звернути увагу, і що це значить:

  • Data and settings inisde html — Зрозуміло, заголовок файлу. Я прописую сюди заголовок посту на блозі, в який будемо вставити діаграму.
  • — шлях до основного файлу .js, необхідно буде прописати або абсолютний або відносний шлях. Тут прописаний відносний.
  • You need to upgrade your Flash Player — повідомлення на випадок, якщо у користувача не встановлений або застарів Flash Player.
  • SWFObject (“…/…/ampie/ampie.swf”, “ampie”, “520”, “400”, “8”, “#FFFFFF”); — шлях і основні параметри. Відповідно: шлях до основного флеш файлу, тип графіка (в нашому випадку, ampie – пиріг, діаграма), ширина, висота, мінімально необхідна версія Flash player’а і колір фону.
  • Тепер розглянемо налаштування для побудови графіка:
  • “шлях” – шлях, вже і так все зрозуміло.
  • “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 іншими значеннями ви розберетеся самі, там нічого складного.
  • “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/

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

    &lt;center&gt;&lt;iframe src=“http://alaev.info/wp-content/ampie/graphs/2.html” style=“border:none; overflow: hidden;” height=“500” width=“600”&gt;&lt;/iframe&gt;&lt;/center&gt;

    І вуаля! Все працює і показується!

    5. Підстроювання

    Тепер залишається тільки підточити напилком вставлений графік, зробити фон відповідний фону вашої сторінки, зробити кордону айфрейма рівними розміру флеш-діаграми, прописати стилі та інші прикрашення. Загалом, все, що вам прийде в голову в творчому пориві. Дерзайте.

    Ось така гігантська статейка вийшла у мене. Я думаю, вам сподобається!

    І це далеко не всі можливості, адже крім «пирога» можна будувати таким чином різні графіки статистики чого завгодно. Все, що ви знайдете на сайті розробника, можна вбудувати в WordPress за описаною схемою.

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

    А для тих, хто осилив все написане вище солодка плюшка – візуальний редактор будь-яких графіків.
    Про його існування я дізнався тільки сьогодні коли писав пост, тому що я працюю виключно з кодом і не користуюся ніякими редакторами. Це надійніше і я завжди знаю, що і навіщо я роблю. Але для людей далеких від коду це буде корисно!

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

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

    З повагою, Олександр Алаєв