ФОРУМ КУПИТЬ

Последние статьи

ВСЕ СТАТЬИ

Учет и контроль. Используем Open Flash Chart

03/04/2010 11:23:46

Возможно, данная статья устарела.
В современных реалиях по целому ряду причин использование технологии Flash не рекомендуется. Вместо нее сейчас доступно большое количество свободных библиотек для отрисовки графиков, использующих технологии CSS, JS, HTML5.
Все новые статьи

При создании информационной системы Умный Дом, в которой хранится огромное количество различных данных, просто необходимо использовать различные инструменты визуализации цифр, показаний, значений. Так мы можем наглядно увидеть график изменения температуры, потребления электроэнергии или воды, нагрузки на ту или иную систему или модуль. Это дает возможность точно представлять что происходит в доме, проанализировав, найти существующие проблемы и сделать работу общей системы более оптимальной и экономичной.

В предыдущей статье я уже затрагивал вопрос построения графиков температуры с помощью библиотеки jpGraph. При создании графиков на основе большого количества данных это, пожалуй, наиболее приемлемый вариант. Но нет ли возможности сделать графики более привлекательными с точки зрения внешнего вида, а также добавить интерактив и анимацию? Конечно есть! Все это просто решается с помощью библиотеки Open Flash Chart 2.

Для работы библиотеки достаточно двух файлов (open-flash-chart.swf, swobject.js и папки php-ofc-library из дистрибутива, которую я переименовал в ofc). Строить всевозможные графики с помощью этой замечательной библиотеки очень просто.

Например, создаем файл chart.php

<head>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
<?
// Одна хитрость. Параметры в скрипт, формирующий график нужно передавать через функцию urlencode()
$my_url = urlencode("chart-data.php?chart=".$_REQUEST['chart']);
echo "swfobject.embedSWF("open-flash-chart.swf", "my_chart", "450", "200", "9.0.0", "js/expressInstall.swf", {"data-file":"$my_url"} );";
?>
</script>
</head>

<a href=/chart.php?chart=electro>Эл-во</a>
<a href=/chart.php?chart=gaz>Газ</a>
<a href=/chart.php?chart=water>Вода</a>

<div id="my_chart"></div>

Далее создаем файл chart-data.php

<?

// Считываем из базы данных нужные нам значения
$sql="SELECT DATE_FORMAT(dev_date, '%Y/%m'), dev_value FROM tmp_5 ORDER BY dev_date";
if(!($result=mysql_query($sql,$conn)))
echo "<!--#19-->";
else
{
	while(($data=mysql_fetch_row($result)))
	{
		if ( $old_value > 0 )
		{
			$dev_data[$n] = $data[1] - $old_value;
			$dev_year[$n] = $data[0];
			$n++;
		}
		$old_value = $data[1];
	}
}
$max_range = round(max($dev_data) * 1.3, 0);
$step = 200;
// Строим график, используя библиотеку
include 'libs/ofc/open-flash-chart.php';
$chart = new open_flash_chart();
$bar = new bar_glass();
$bar->set_values( $dev_data );
$bar->colour = '#D54C78';
$chart->add_element( $bar );
$x = new x_axis();
$x->colour = '#909090';
$x_labels = new x_axis_labels();
$x_labels->set_vertical();
$x_labels->set_labels($dev_year);
$x->set_labels( $x_labels );
$y = new y_axis();
$y->set_range(0, $max_range, $step );
$chart->set_y_axis($y);
$chart->set_x_axis($x);
echo $chart->toString();
?>

А дополнив скрипт нужным функционалом получаем что-нибудь вроде этого.
Напомню, что для организации блоков и элементов в оформлении Web-интерфейса я использую слегка переделанный Fluid 960 Grid System.

Умный Дом своими руками. Учет потребления. Open Flash Chart

Несколько слов о том, какие графики можно строить и что уже используется.
1. Безусловно, необходимо обеспечить визуализацию потребления электроэнергии, газа и воды по месяцам. С помощью такого графика мы сможем сравнивать потребление в сравнении с предыдущим месяцем, а также за аналогичный период годом ранее.
2. Интересно иметь график потребления по дням и неделям.
3. Отдельный учет можно вести по потреблению электроэнергии. Например, потребление электричества по часам и по отдельным фазам для выявления пиков нагрузки. Можно построить круговую диаграмму распределения средней нагрузки на фазы. В приведенном выше примере, например, видно, что одна из фаз нагружена более чем на 70% относительно общего потребления, тогда как другая только на 5%. Такая ситуация не является нормальной.
4. Важно иметь возможность видеть и другие параметры электропитания, которые в моем случае считываются с электросчетчика Меркурий, такие как Напряжение или cosФ.

Умный Дом своими руками. График напряжения

 5. Но самое большое преимущество графической визуализации данных достигается в случае наложения нескольких графиков. Это позволяет качественно иначе интерпретировать полученный результат. Так, к примеру, на общее потребление газа можно наложить график уличной температуры. С помощью Open Flash Chart 2 делается это сосвсем несложно.

$dot = new hollow_dot();
$dot->size(3)->halo_size(1);
$line1 = new line();
$line1->set_default_dot_style($dot);
$line1->set_values($dev_data2);
$line1->set_key(iconv('CP1251', 'UTF-8', "Сред. t на улице"), 10 );
$chart->add_element( $line1 );
$y2 = new y_axis_right();
$y2->set_range(-30, $max_range2, $step2 );
$y2->set_colour( '#2020FF' );
$line1->attach_to_right_y_axis();
$chart->set_y_axis_right($y2);

 

Умный Дом своими руками. Зависимость потребления газа от температуры на улице

6. Точно таким же образом можно контролировать работу программы управления отоплением, наложив друг на друга три графика: температуры подающей линии котла до гидравлического разделителя, температуры контура после 3-х ходового, температуры на улице. Можно придумать еще много примеров того, как, имея все данные в единой базе данных, строить любые аналитические диаграммы и графики.

Умный Дом своими руками. График работы системы отопления

Работа над графическим интерфейсом системы продолжается и по мере появления новых элементов и полезных графиков, буду добавлять их описания в эту статью.

Автор: Andrey_B
Любое использование материалов сайта возможно только с разрешения автора и с обязательным указанием источника.



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

(необязательно, не отображается на сайте)


Сортировка комментариев: Последние сверху | Первые сверху

2012-03-12 17:34:04 | Stavr
Попалась вот такая библиотека для визуализации графиков dygraphs
Интересна тем, что можно "зуммировать" графики