От автора: Очень часто на страницах веб-приложений необходимо отображать различную статистическую информацию, к примеру, данные о расходах компании за год. При этом, зачастую, данные хранятся в виде таблиц, и выводить их на экран в табличном виде — не совсем удачная идея, так как это ухудшает восприятие информации пользователем. Наиболее удачным вариантом будет отображение данных в виде диаграмм или графиков, которые легко и быстро читаются пользователями. Поэтому, в данном уроке мы рассмотрим создание диаграмм и графиков, используя библиотеку FusionCharts.
Установка библиотеки
Первым делом установим библиотеку FusionCharts, для этого переходим на официальный сайт //www.fusioncharts.com/ и кликаем по ссылке Download Free Trial:
Тем самым переходим на страницу скачивания версии Trial.
Библиотека распространятся в двух версиях – это платная и бесплатная Trial версия. Версия Trial предназначена для некоммерческого использования, и не имеет ни каких ограничений (как временных, так и по функционалу) по сравнению с платной версией. За исключением того, что в бесплатной версии, на всех диаграммах, присутствует логотип компании создателя данной библиотеки. Далее вводим имя и адрес электронной почты и получаем возможность скачать данную библиотеку. После скачивания необходимо подключить библиотеку к Вашему сайту.
Для сегодняшнего урока мы будем базу данных fusion, с единственной таблицей rash, в которой хранятся данные о расходах компании за текущий год (в таблице нас интересуют поля month и summa):
Так же для примера мы будем использовать, практически пустую веб-страницу в которой создан всего один блок <div id=»chartContainer»>, необходимый для размещения в нем диаграммы. Исходный код даной страницы:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?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" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="//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:
|
1 2 3 4 5 6 7 8 9 10 |
<?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.
|
1 2 3 |
<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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
"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), которая вернет данные в необходимом формате:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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, мы увидим следующее:
|
1 2 3 4 |
Array ( [data] =&gt; [{"label":"January","value":"700000"},… ,{"label":"December","value":"150000"}] ) |
Теперь в файле index.php, вызовем на исполнение данную функцию:
|
1 |
$data = get_rash($db); |
Далее, между тегами head, добавим следующий код, который отобразит диаграмму на экране:
|
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 27 28 |
<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» – подзаголовок или дополнительный текст;
«xAxisName» – имя оси абсцисс(ось x);
«yAxisName» – имя оси ординат(ось y);
«theme» – цветовая тема диаграммы;
«numberPrefix» – префикс, добавляемый к значениям диаграммы.
Свойство «data» – содержит массив объектов, то есть данные, которые необходимо отобразить на диаграмме. В нашем случае это строка в формате json, ячейки data массива $data. Обновив информацию в браузере, мы увидим диаграмму в действии:
Теперь если свойству type присвоить значение line, мы увидим следующее:
Для создания объемной 3d диаграммы, свойству type присваиваем значение column3d:
Настройки внешнего вида. Линия тренда
Для настроек внешнего вида используются цветовые темы, которые доступны в папке theme архива с библиотекой, а также можно использовать некоторые настройки:
«showBorder» – показывать либо нет рамку вокруг диаграммы;
«borderColor» – цвет рамки;
«borderThickness» – толщина рамки;
«borderAlpha» – прозрачность рамки;
«bgColor» – цвет фона;
«bgAlpha» – прозрачность фона диаграммы.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
"chart": { "caption":"Расходы за год", "subCaption":"Диаграмма", "xAxisName":"Месяц", "yAxisName":"Сумма", "theme":"fint", "numberPrefix":"$", "showBorder":1, "borderColor":"#075776", "borderThickness":5, "borderAlpha":50, "bgColor":"#DDDDDD", "bgAlpha":30 }, |
Так же на диаграмме, можно отобразить линию тренда, которая может показывать, стремление компании к некоторым показателям. Для этого нужно добавить дополнительное свойство:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
"trendlines":[ { "line":[ { "startvalue":350000, "endvalue":500000, "isTrendZone":0, "color":"#1aaf5d", "displayvalue":"К чему стремиться", "tooltext":"Стремление компании" } ] } ] |
«startvalue» – начальное значение тренда;
«endvalue» – конечное значение тренда;
«isTrendZone» – если передать 1, значит, будет отображена зона тренда, в противном случае будет линия;
«color» – цвет линии тренда
«displayvalue» – отображаемое значение;
«tooltext» – текст подсказки.
Полный код javaScript, отображающий тренд:
|
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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<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> |
После обновления информации в браузере, мы увидим следующее:
На этом данный урок завершен. Всего Вам доброго и удачного кодирования!!!
Комментарии (1)