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

24

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

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