JpGraph. Рисуем графики температуры

24/11/2008 17:13:32

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

PHP, конечно, имеет полный набор базового функционального инструментария для работы с изображениями, но проще взять уже готовую библиотеку. Немного покапавшись в залежах Интернета и, учитывая что график должен строиться по большому массиву значений (температурные показания снимаются каждые 5 минут), я решил воспользоваться библиотекой JpGraph. При скачивании нужно только иметь ввиду, что существует библиотека отдельно для 5-ой версии PHP и отдельно для 4-ой версии. Необходимо распаковать скаченную библиотеку в любое доступное для php-скриптов место.

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

<scripT type="text/javascript" src="jquery.js"></script>
<scripT type="text/javascript">

$(document).ready(
function()
{
    // "Инициализируем" div
    $.get("data.php?", function(data){$("#g_temp_in").html(data);});

    // Обновление графика каждые 5 минут
    var timer = window.setInterval(
    function()
    {
        $.get("data.php?"+Math.random(), function(data){$("#g_temp_in").html(data);});
    }, 300000);
}
)
</script>                                                              

Температура в доме:
<div id="g_temp_in</div>";
?>

Теперь создаем файл data.php и пишем в него примерно следующее:

<?
// Подключаем библиотеку
include ("jpgraph/jpgraph.php");
include ("jpgraph/jpgraph_line.php");

// Пишем SQL-запрос к базе
// Структура базы может быть разной, поэтому заменю его тестовыми значениями
$ydata = array("2.5", "2.7", "2.8", "3.0");
$xdata = array("12:00", "12:05", "12:10", "12:15");
$graph = new Graph(450,200,"auto");
$graph->SetScale("textlin");
$graph->SetMarginColor('white');
$graph->SetFrame(true,'#B3BCCB', 1);
$graph->SetTickDensity(TICKD_DENSE);
$graph->img->SetMargin(50,20,20,60);
$graph->title->SetMargin(10);
$graph->xaxis->SetTickLabels($xdata);
$graph->xaxis->SetLabelAngle(90);
$graph->xaxis->SetPos('min');

// Обычно значений много, не менее 250 в сутки, 
// поэтому нельзя выводить все значения из массива $xdata на шкалу X
// Это будет сильным нагромождением, поэтому я вывожу каждое 30-е значение.
$my_interval = ceil($i / 30);
$graph->xaxis->SetTextTickInterval($my_interval);

$lineplot=new LinePlot($ydata);
$graph->Add($lineplot);
$graph->Stroke();

?>

В результате у меня получилось примерно следующее.


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