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

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

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

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

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

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

Тем самым переходим на страницу скачивания версии 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» – подзаголовок или дополнительный текст;

«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>

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

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

Создание диаграмм с помощью 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