WebNews.cz - počítače, komunikace, mobily, internet, finance

Mapa serveru | Administrace

Vytvoření sloupcového grafu

Michal Terč - Profil - 28.10.2001
V tomto článku si ukážeme, jak lze pomocí PHP vytvořit jednoduchý sloupcový graf.

Na svém webu používám evidenci návštěvnosti, kterou jsem si upravil podle článku uvedeného na Zive.cz. V tomto článku bylo i zobrazení návštěvnosti pomocí grafu, který nebyl ale funkční a ani mi nevyhovoval. Proto jsem se rozhodl vytvořit si vlastní skript na zobrazení grafu návštěvnosti.

Od skriptu jsem požadoval, aby zobrazoval počet unikátních IP i počet zobrazení zároveň. Dále bylo potřeba zobrazovat návštěvnost z různých tabulek pro graf návštěvnosti za dny, měsíce a roky. Dalším požadavkem ještě bylo zobrazení různého počtu sloupců, který bude zadán parametricky. Nakonec jsem tedy vytvořil skript, který vytvoří graf z údajů v databázi a zobrazí ho na stránce.

Stránka pro zobrazení grafu návštěvnosti by mohla vypadat třeba takto. Nazveme ji např. graf.php.

<html><body>

<?
if (!$table) $table = "stat_prehled";
switch ($table) {
   case "stat_prehled":
     if (!$points) $points = 30;
     $title = "dnů";
     break;
   case "stat_mesic":
     $title = "měsíců";
     if (!$points) $points = 12;
     break;
   case "stat_rok":
     if (!$points) $points = 10;
     $title = "roků";
     break;
} ?>

<font face=Verdana, Arial, Helvetica, sans-serif size=4><b>Graf návštěvnosti za posledních <? echo "$points $title"; ?></font></b></font><br><br>
<table border=0 width=160 cellpadding=0>
   <tr><td width=156 height=2><b><font face=Verdana, Arial, Helvetica, sans-serif size=2>Počet unikátních IP</font></b></td>
   <td width=12 bgcolor=#99CC66 height=2> </td></tr>
   <tr><td width=156><b><font face=Verdana, Arial, Helvetica, sans-serif size=2>Počet stránek</font></b></td>
   <td width=12 bgcolor=#852D2B> </td></tr>
</table>

<? echo "<img src=\"graf_create.php?table=$table&points=$points\">"; ?>

<p>
<a href="graf.php?table=stat_prehled&points=30">Posledních 30 dnů</a>&nbsp;&nbsp;
<a href="graf.php?table=stat_mesic&points=12">Posledních 12 měsíců</a>&nbsp;&nbsp;
<a href="graf.php?table=stat_rok&points=10">Posledních 10 let</a>&nbsp;&nbsp;
</p>
<hr>
<p><a href="http://www.gpm.web4u.cz/miket/web.php" target="_blank">WebNews - PHP a MySQL</a></p>

</body></html>

Na začátku stránky se zjišťuje podle názvu tabulky, za jaké období má být graf zobrazen a podle toho se nastavuje počet zobrazených sloupců:
stat_prehled ... graf návštěvnosti za posledních 30 dnů
stat_mesic ... graf návštěvnosti za posledních 12 měsíců
stat_rok ... graf návštěvnosti za posledních 10 let

Dále je zobrazení legendy pro graf a zobrazení samotného grafu. Pro zobrazení grafu je použit tag <img>, kde je místo cesty k souboru s obrázkem volání skriptu graf_create.php pro vytvoření grafu s požadovanými parametry. Na konci stránky jsou odkazy pro zobrazení grafu návštevnosti za posledních 30 dnů, 12 měsíců a 10 let. Všechny odkazy volají tuto stejnou stránku graf.php s různými parametry.

Nepovinné parametry pro skript graf_create.php:
$table ... jméno tabulky, ze které se bude graf vytvářet
$points ... počet zobrazených sloupců (posledních záznamů s tabulky)

Pro pochopení skriptu na vytvoření grafu si uděláme malou rekapitulaci grafických funkcí použitých při vytváření obrázku s grafem návštěvnosti:

ImageCreate() ... vytvoří objekt obrázku o zadané velikosti

ImagePNG() ... zobrazení vytvořeného obrázku (podle formátu obrázku možno použít i ImageGIF() a ImageJPEG())

ImageDestroy() ... zrušení objektu obrázku

ImageColorAllocate() ... vrátí index barvy podle zadaných složek RGB

ImageFilledRectangle() ... nakreslí vyplněný obdelník

ImageLine() ... nakreslí čáru

ImageFontHeight() ... vrátí výšku zadaného písma v bodech

ImageStringUp() ... napíše požadovaný text

A zde je konečně požadovaný skript pro zobrazení grafu návštěvnosti graf_create.php.

<?
header( "Content-type: image/png");
require("../inc/connect.php");
require("../inc/functions.php");

if (!$table) $table = "stat_prehled";

switch ($table) {
   case "stat_prehled":
     if (!$points) $points = 30; // počet zobrazených sloupců
     $format = "d.m.y"; // formát labelů na ose X
     $line_1 = 100; // horizontální rastr - tenká čára
     $line_2 = 500; // horizontální rastr - tlustší čára
     $bar_width = 10; // šířka sloupce
     $bar_space = 5; // mezera mezi sloupci
     break;
   case "stat_mesic":
     if (!$points) $points = 12;
     $format = " m.Y";
     $line_1 = 1000;
     $line_2 = 5000;
     $bar_width = 20;
     $bar_space = 10;
     break;
   case "stat_rok":
     if (!$points) $points = 10;
     $format = " Y";
     $line_1 = 10000;
     $line_2 = 50000;
     $bar_width = 40;
     $bar_space = 10;
     break;
}

// zjištění počtu údajů v tabulce
$sql1 = MySqlQuery("SELECT COUNT(*) AS all_count FROM $table");
$all_count = mysql_Result($sql1, 0, "all_count");
if ($all_count < $points) $points = $all_count;
$start = $all_count - $points;

// zjištění max. údajů pro výpočet max. velikosti sloupce
$sql1 = MySqlQuery("SELECT * FROM $table ORDER BY time LIMIT $start,$points");
$pocet = mysql_NumRows($sql1);
$max_lidi = 0;
$max_stranek = 0;
while ($zaznam1 = mysql_fetch_array ($sql1)) {
   if ($max_lidi < $zaznam1["lidi"]) $max_lidi = $zaznam1["lidi"];
   if ($max_stranek < $zaznam1["stranek"]) $max_stranek = $zaznam1["stranek"];
}

// výpočet šířky a výšky grafu
$left = 0;
$bar = 2*$bar_width+$bar_space;
$height = 450;
$width = $left+$bar*$points-$bar_space;
$top = 60;
$bottom = $height-70;
$scale = ($bottom - $top) / $max_stranek;

// vytvoření objektu obrázku
$im = imagecreate($width,$height);

// nastavení barev
$white=ImageColorAllocate($im,255,255,255);
$black=ImageColorAllocate($im,0,0,0);
$seda=ImageColorAllocate($im,192,192,192);
$zelena=ImageColorAllocate($im,hexdec("99"),hexdec("CC"),hexdec("66"));
$hneda=ImageColorAllocate($im,hexdec("85"),hexdec("2D"),hexdec("2B"));

// vytvoření stupnice
ImageFilledRectangle($im,$left,$bottom+1,$width,$bottom+3,$black);
$i = $line_2;
while ($i < $max_stranek) {
  ImageFilledRectangle($im, $left, $bottom-round($i*$scale,0)-1, $width, $bottom-round($i*$scale,0)+1, $seda);
   $i += $line_2;
}
$i = $line_1;
while ($i < $max_stranek) {
   ImageLine($im, $left, $bottom-round($i*$scale,0), $width, $bottom-round($i*$scale,0), $seda);
   $i += $line_1;
}

// vykreslení grafu
$x=$bar_width/2-imagefontheight(3)/2;
$xl=$bar_width-imagefontheight(3)/2;
$i = 0;
while ($i < $pocet) {
   $lidi = mysql_Result($sql1,$i,"lidi");
   $stranek = mysql_Result($sql1,$i,"stranek");
   ImageFilledRectangle($im, $left+$bar*$i, $bottom-round($lidi*$scale,0), $left+$bar*$i+$bar_width, $bottom, $zelena);
   ImageFilledRectangle($im, $left+$bar*$i+$bar_width+1, +$bottom-round($stranek*$scale,0), $left+$bar*$i+$bar_width*2+1, $bottom, $hneda);
   ImageStringUp($im, 3, $left+$x+$bar*$i, $bottom-round($lidi*$scale,0)-10,$lidi,$black);
   ImageStringUp($im, 3, $left+$x+$bar*$i+$bar_width+1, $bottom-round($stranek*$scale,0)-10, $stranek, $black);
   ImageStringUp($im, 3, $left+$xl+$bar*$i+1, $bottom+65,Date($format, mysql_Result($sql1,$i,"time")), $black);
   $i++;
}

// zobrazení obrázku
imagepng($im);
// zrušení objektu obrázku
ImageDestroy($im);
?>

Na to jak bude vypadat konečný výsledek zobrazení grafu návštěvnosti se můžete podívat zde.

U zdrojových souborů k příkladu naleznete i SQL skripty pro vytvoření a naplnění tabulek použitých v příkladu. Jako podklad pro graf samozřejmě můžete použít jakoukoli jinou tabulku.


Kompletní zdrojové soubory příkladu - graf.zip (7 kB)
Základní include využité v příkladu - inc.zip (7 kB)

Tisk článku - Poslat článek - (7029 zobrazení)
Redakce | | | ISSN 1213-9335 | © 2005 Developed by terc.cz