Создание диаграмм, используя библиотеку FusionCharts

Создание диаграмм, используя библиотеку FusionCharts

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

скачать исходникискачать урок

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

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

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее

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

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

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

Так же для примера мы будем использовать, практически пустую веб-страницу в которой создан всего один блок <div id=»chartContainer»>, необходимый для размещения в нем диаграммы. Исходный код даной страницы:

<?php
header('Content-Type: text/html; charset=utf-8');
require "functions.php";

$db = connect("localhost",'root','','fusion');

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>Диаграмма расходов за год</title>
</head>
<body style="background-color: rgb(27, 188, 155);">
 <div style="text-align: center;" id="chartContainer">Блок для диаграммы</div>
</body>
</html>

Обратите внимание, что файл functions.php, необходим для выборки данных из базы данных, поэтому в нем создана всего одна функция, которая выполняет подключение к базе данных и возвращает дескриптор открытого соединения. Код файла functions.php:

<?php
 function connect($host,$user,$pass,$dbname) {

 $db = mysqli_connect($host,$user,$pass,$dbname);
 if(mysqli_connect_error($db)) {
  exit('Connect Error: ' . mysqli_connect_error($db));
 }
 return $db; 
}
?>

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

<script type="text/javascript" src="js/fusioncharts.js"></script>
<script type="text/javascript" src="js/fusioncharts.charts.js"></script>
<script type="text/javascript" src="js/themes/fusioncharts.theme.fint.js"></script>

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

Вывод диаграммы

Первым делом необходимо получить данные из базы данных в определенном формате. Библиотека 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] =&amp;gt; [{"label":"January","value":"700000"},… ,{"label":"December","value":"150000"}]
)

Теперь в файле index.php, вызовем на исполнение данную функцию:

$data = get_rash($db);

Далее, между тегами head, добавим следующий код, который отобразит диаграмму на экране:

<script>
 
 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":<?php echo $data['data']?>,
 
 }
  });
 
  revenueChart.render();
 });
 
</script>

Обратите внимание, что для отображения галереи нужно вызвать метод render(), объекта revenueChart, который мы собственно и создаем. При создании объекта необходимо указать следующие настройки (свойства данного объекта):

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

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

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

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

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

Свойство dataSource – объект, который содержит информацию, которую необходимо отобразить в диаграмме. Его свойство chart, содержит, следующие свойства:

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

«subCaption» – подзаголовок или дополнительный текст;

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее

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

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

«theme» – цветовая тема диаграммы;

«numberPrefix» – префикс, добавляемый к значениям диаграммы.

Свойство «data» – содержит массив объектов, то есть данные, которые необходимо отобразить на диаграмме. В нашем случае это строка в формате json, ячейки data массива $data. Обновив информацию в браузере, мы увидим диаграмму в действии:

Теперь если свойству type присвоить значение line, мы увидим следующее:

Для создания объемной 3d диаграммы, свойству type присваиваем значение column3d:

Настройки внешнего вида. Линия тренда

Для настроек внешнего вида используются цветовые темы, которые доступны в папке 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, отображающий тренд:

<script>
 
 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":<?php echo $data['data']?>,
 "trendlines":[
 {
 "line":[
 {
 "startvalue":350000,
 "endvalue":500000,
 "isTrendZone":0,
 "color":"#1aaf5d",
 "displayvalue":"К чему стремиться",
 "tooltext":"Стремление компании"
 }
 ]
 }
 ]
 }
  });
 
  revenueChart.render();
 });
 
</script>

После обновления информации в браузере, мы увидим следующее:

На этом данный урок завершен. Всего Вам доброго и удачного кодирования!!!

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Создание диаграмм с помощью Google Chart

Прямо сейчас посмотрите курс по созданию диаграмм с помощью Google Chart!

Смотреть курс

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (1)

  1. Юрий

    здравствуйте отличный урок, появился вопрос, как добавить под низом вторую диаграму с другими значениями? например по alias диаграммы, но как вывести две диаграммы??

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree