Створення діаграм, використовуючи бібліотеку FusionCharts

323

Від автора: Дуже часто на сторінках веб-додатків необхідно відображати різну статистичну інформацію, наприклад, дані про витрати компанії за рік. При цьому, найчастіше, дані зберігаються у вигляді таблиць, і виводити їх на екран у вигляді таблиці — не зовсім вдала ідея, так як це погіршує сприйняття інформації користувачем. Найбільш вдалим варіантом буде відображення даних у вигляді діаграм або графіків, які легко і швидко читаються користувачами. Тому, у даному уроці ми розглянемо створення діаграм і графіків, використовуючи бібліотеку FusionCharts.

Створення діаграм, використовуючи бібліотеку FusionChartsСтворення діаграм, використовуючи бібліотеку FusionCharts

Установка бібліотеки

Першим ділом встановимо бібліотеку FusionCharts, для цього переходимо на офіційний сайт http://www.fusioncharts.com/ і клікаєм по посиланню Download Free Trial:

Створення діаграм, використовуючи бібліотеку FusionCharts

Тим самим переходимо на сторінку скачування версії Trial.

Створення діаграм, використовуючи бібліотеку FusionCharts

Бібліотека поширяться в двох версіях – це платна і безкоштовна Trial версія. Версія Trial призначена для некомерційного використання, і не має ні яких обмежень (як тимчасових, так і по функціоналу) в порівнянні з платної версії. За винятком того, що в безкоштовній версії, на всіх діаграмах, присутній логотип компанії творця даної бібліотеки. Далі вводимо ім’я та адресу електронної пошти і отримуємо можливість завантажити дану бібліотеку. Після скачування необхідно підключити бібліотеку до Вашого сайту.

Для сьогоднішнього уроку ми будемо базу даних fusion, з єдиною таблицею rash, в якій зберігаються дані про витрати компанії за поточний рік (таблиці нас цікавлять поля month і summa):

Створення діаграм, використовуючи бібліотеку FusionCharts

Так само для прикладу ми будемо використовувати, практично порожню веб-сторінку в якій створений лише один блок

, необхідний для розміщення в ньому діаграми. Вихідний код цієї сторінки:

Діаграма витрат за рік

Блок діаграми

Зверніть увагу, що файл functions.php, необхідний для вибірки даних з бази даних, тому в ньому створена лише одна функція, яка виконує підключення до бази даних і повертає дескриптор відкритого з’єднання. Код файлу functions.php:

Для сьогоднішнього уроку нам необхідно підключити з завантаженого архіву файли fusioncharts.js, fusioncharts.charts.js, а так само fusioncharts.theme.fint.js з папки тема.

Таким чином, бібліотека встановлена та підключена.

Висновок діаграми

Насамперед необхідно отримати дані з бази даних у певному форматі. Бібліотека FusionCharts працює з даними у форматі JSON і XML. У даному уроці ми розглянемо роботу бібліотеки з форматом JSON. Для відображення діаграми необхідно, при її ініціалізації параметр data передати, масив об’єктів, у форматі json:

“data”: [
{
“label”: “Jan”,
“value”: “420000”
},
{
“label”: “Feb”,
“value”: “810000”
},
{
“label”: “Mar”,
“value”: “720000”
},
{
“label”: “Apr”,
“value”: “550000”
},
{
“label”: “May”,
“value”: “910000”
}
]

Тому у файлі functions.php створимо функцію get_rash($db), яка поверне дані у необхідному форматі:

function get_rash($db) {
$result = mysqli_query($db,”SELECT month as label, summa as value FROM `rash`”);
if(!$result) {
exit();
}
$arr = array();
while($row = mysqli_fetch_object($result)) {
$arr[‘data’][] = $row;
}
$arr[‘data’] = json_encode($arr[‘data’]);
return $arr;
}

Якщо роздрукувати значення, що повертається масиву $arr, ми побачимо наступне:

Array
(
[data] => [{“label”:”January”,”value”:”700000″},… ,{“label”:”December”,”value”:”150000″}]
)

Тепер у файлі index.php, викличемо на виконання дану функцію:

$data = get_rash($db);

Далі, між тегами head, додамо наступний код, який відображає діаграму на екрані:

FusionCharts.ready(function () {
var revenueChart = new FusionCharts({
“type”:”column2d”,
“renderAt”:”chartContainer”,
“width”:640,
“height”:400,
“dataFormat”:”json”,
“dataSource”: {
“chart”: {
“caption”:”Витрати за рік”,
“subCaption”:”Діаграма”,
“xAxisName”:”Місяць”,
“yAxisName”:”Сума”,
“theme”:”fint”,
“numberPrefix”:”$”
},
“data”:,
}
});
revenueChart.render();
});

Зверніть увагу, що для відображення галереї потрібно викликати метод render(), об’єкта revenueChart, який ми власне і створюємо. При створенні об’єкта необхідно вказати наступні параметри (властивості даного об’єкта):

«type» тип діаграми;

«renderAt» — ідентифікатор блоку, в якому буде відображена діаграма;

«width» – ширина діаграми;

«height» – висота діаграми;

«dataFormat» – формат даних для відображення.

Властивість dataSource – об’єкт, який містить інформацію, яку необхідно відобразити в діаграмі. Його властивість chart, містить наступні властивості:

«caption» – заголовок діаграми;

«subCaption» – підзаголовок або додатковий текст;

«xAxisName» – ім’я осі абсцис(вісь x);

«yAxisName» – ім’я осі ординат(вісь y);

«theme» – колірна тема діаграми;

«numberPrefix» – префікс, який додається до значень діаграми.

Властивість «data» – містить масив об’єктів, то є дані, які необхідно відобразити на діаграмі. У нашому випадку це рядок у форматі json, осередки data масиву $data. Оновивши інформацію в браузері ми побачимо діаграму в дії:

Створення діаграм, використовуючи бібліотеку FusionCharts

Тепер якщо властивість type присвоїти значення line, ми побачимо наступне:

Створення діаграм, використовуючи бібліотеку FusionCharts

Для створення об’ємної 3d діаграми, властивості type присвоюємо значення column3d:

Створення діаграм, використовуючи бібліотеку FusionCharts

Налаштування зовнішнього вигляду. Лінія тренду

Для налаштувань зовнішнього вигляду використовуються колірні теми, які доступні в папці theme архіву з бібліотекою, а також можна використовувати деякі налаштування:

«showBorder» – показувати чи ні рамку навколо діаграми;

«borderColor» – колір рамки;

«borderThickness» – товщина рамки;

«borderAlpha» – прозорість рамки;

«bgColor» – колір фону;

«bgAlpha» – прозорість фону діаграми.

“chart”: {
“caption”:”Витрати за рік”,
“subCaption”:”Діаграма”,
“xAxisName”:”Місяць”,
“yAxisName”:”Сума”,
“theme”:”fint”,
“numberPrefix”:”$”,
“showBorder”:1,
“borderColor”:”#075776″,
“borderThickness”:5,
“borderAlpha”:50,
“bgColor”:”#DDDDDD”,
“bgAlpha”:30
},

Так само на діаграмі, можна побудувати лінію тренда, яка може показувати, прагнення компанії до деякими показниками. Для цього потрібно додати додаткове властивість:

“trendlines”:[
{
“line”:[
{
“startvalue”:350000,
“endvalue”:500000,
“isTrendZone”:0,
“color”:”#1aaf5d”,
“displayvalue”:”До чого прагнути”,
“tooltext”:”Прагнення компанії”
}
]
}
]

«startvalue» – початкове значення тренду;

«endvalue» – кінцеве значення тренду;

«isTrendZone» – якщо передати 1, значить, буде відображена зона тренда, в іншому випадку буде лінія;

«color» – колір лінії тренду

«displayvalue» – відображуване значення;

«tooltext» – текст підказки.

Повний код javaScript, який відображає тренд:

FusionCharts.ready(function () {
var revenueChart = new FusionCharts({
“type”:”column2d”,
“renderAt”:”chartContainer”,
“width”:640,
“height”:400,
“dataFormat”:”json”,
“dataSource”: {
“chart”: {
“caption”:”Витрати за рік”,
“subCaption”:”Діаграма”,
“xAxisName”:”Місяць”,
“yAxisName”:”Сума”,
“theme”:”fint”,
“numberPrefix”:”$”,
“showBorder”:1,
“borderColor”:”#075776″,
“borderThickness”:5,
“borderAlpha”:50,
“bgColor”:”#DDDDDD”,
“bgAlpha”:30
},
“data”:,
“trendlines”:[
{
“line”:[
{
“startvalue”:350000,
“endvalue”:500000,
“isTrendZone”:0,
“color”:”#1aaf5d”,
“displayvalue”:”До чого прагнути”,
“tooltext”:”Прагнення компанії”
}
]
}
]
}
});
revenueChart.render();
});

Після оновлення інформації в браузері, ми побачимо наступне:

Створення діаграм, використовуючи бібліотеку FusionCharts

На цьому даний урок завершено. Всього Вам доброго і вдалого кодування!!!