Hlavní menu
Kategorie
Přihlásit
Anketa
Podporujeme
Přispějte na provoz
Vítejte u dalšího dílu miniseriálu počítadel na webu. Jistě jste někdy přemýšleli, jak funguje například toplist, že ve skutečnosti zobrazuje obrázek s návštěvností. Podobnou věcičku si ukážeme na tomto tutoriálu. Využijeme k němu minulý příklad a vylepšíme ho tím, že výstup nebude textový, ale obrázkový graf.
Máme tedy databázi, jejíž struktura je popsána v minulém příkladě. Nyní uděláme výstup z databáze, ale místo každého vypsání na stránku vytvoříme další položku pole $day.
<?php
$sql = "SELECT den, COUNT(ip) AS lidi FROM `pocitadlo` GROUP BY
den ORDER BY den ASC";
$res = $db->query($sql);
while($zaznam =
mysqli_fetch_array($res))
$day[ $zaznam[ 'den' ] ] = $zaznam[ 'lidi' ];
?>
Nyní máme vytvořené asociativní pole $day, jehož indexem je den a hodnotou počet přístupů v daný den.
Ještě nastavíme hlavičku scriptu, jedná se totiž o script, který se tváří jako JPEG obrázek.
<?php
header('Content-type:
image/jpeg');
header('Content-transfer-encoding: binary');
?>
Nyní vytvoříme proměnné nastavující výšku a šířku obrázku a zjistíme nejvyšší hodnotu pole $day (den, kdy přišlo nejvíce lidí) aby se graf zobrazoval rovnoměrně. Do proměnných $u_width a $u_height si vypočítáme ořízlou velikost sloupců grafu, protože nechceme, aby se zobrazoval až do okrajů obrázku.
<?php
$max = max($day);
$height = 220;
$width = 300;
$u_height = 0.8 * $height;
$u_width = ($width / count($day)) / 2;
?>
Nyní si vytvoříme černé plátno, a nastavíme barvy. Proměnná $black obsahuje černou barvu, pole $color obsahuje barvy sloupců grafu, které se budou postupně střídat. Samozřejmě můžeme tyto hodnoty měnit, přidávat další, nebo nějaké odebrat. Proměnná $bg obsahuje šedou barvu pozadí grafu. Funkcí imageFill() vybarvíme pozadí našedo.
<?php
$new = imageCreateTrueColor($width,$height);
$bg = imageColorAllocate($new,200,200,200);
$black = imageColorAllocate($new,0,0,0);
$color[] =
ImageColorAllocate($new,146,0,0);
$color[] =
ImageColorAllocate($new,0,27,146);
$color[] =
ImageColorAllocate($new,240,232,17);
$color[] =
ImageColorAllocate($new,71,125,57);
$color[] =
ImageColorAllocate($new,240,180,17);
imageFill($new,0,0,$bg);
?>
Teď můžeme začít plnit graf. Nejdříve si zvolíme souřadnice zleva a číslo barvy nastavíme na nulu. Postupně jak budeme procházet cyklem budou se tyto hodnoty zvětšovat a to způsobí posunutí každého sloupce a jinou barvu. Použijeme cyklus for() a nastavíme počet opakování na počet dní, kolik chceme vypisovat. V tomto příkladu jsou to všechny dny.
<?php
for($i = 0; $i < count($day); $i++)
{
?>
Máme k dispozici nejvyšší hodnotu v proměnné $max, a z té si vždy spočítáme výšku úměrnou danému dni v poměru odpovídajícímu nejvyšší hodnotě. Zní to složitě, ale ve skutečnosti nejvyšší sloupec je vždy den s nejvyšší návštěvností. a ten musí být vždy stejně vysoký. Ať je to třeba 5 lidí, nebo rovnou tisíc.
<?php
$percent_height = $day[$i] / $max;
$real_height = $u_height * $percent_height;
?>
V průběhu cyklu nyní vždy vytvoříme nové plátno o požadovaných rozměrech a vybarvíme ho barvou, jaká je na řadě. Dále toto vybarvené plátno představující sloupec grafu vložíme na zadané souřadnice do hlavího plátna.
<?php
$slope =
imageCreateTrueColor($u_width,$real_height);
imageFill($slope,0,0,$color[$color_number]);
imageCopyResized($new, $slope, $left, $height - 0.1*$height -
$real_height, 0, 0, $u_width, $real_height, $u_width, $real_height);
imagedestroy($slope); /* Vymaže obrázek z mezipaměti
*/
?>
Teď už zbývá jen nastavit souřadnice o kus doprava pro další kolo cyklu, aby se sloupec jiného dne zobrazil vedle. Dále změníme číslo barvy. A to tím způsobem, že přes count($color) zjistíme kolik máme zadaných barev, a v případě že nejsme na konci pořadníku, přičteme jedničku, v případě že jsme již vyčerpali všechny barvy, skočíme opět na začátek. Pak jen cyklus ukončíme složenou závorkou.
<?php
$left += 2*$u_width;
if($color_number
== count($color) - 1) $color_number = 0;
else $color_number++;
} /* ukončení cyklu for()
*/
imageJpeg($new);
?>
Pokud nemáte k tomuto příkladu databázi z minule a přesto si chcete tento obrázkový graf vyzkoušet, můžete si pole $day vytvořit umělě. Stačí pouze, když místo první sekce scriptu, kde přistupujeme do databáze a vytváříme pole zadáte třeba následující hodnoty:
<?php
$day[] = 5;
$day[] = 7;
$day[] = 12;
$day[] = 8;
$day[] = 3;
$day[] = 5;
$day[] = 1;
$day[] = 11;
?>
Ty potom můžete měnit a pozorovat, jak se celý graf mění. Abyste celý příklad správně pochopili zkuste si zadat různé maximální hodnoty, podle kterých se budou ostatní sloupce prodlužovat nebo zkracovat. Zároveň si vyzkoušejte přidat či odebrat nějaké barvy a měnit šířku a výšku grafu změnou proměnných $height a $width. Funguje to skvěle ne? Sice nejsem dobrý grafik, ale to už nechám na Vás jak si graf vylepšíte a dáte mu lepší grafiku. Příště si ukážeme online počítadlo, které zjišťuje kolik lidí je právě na stránce.
když se na ten skript kouknu přeš ff tak mi to vypíše cestu k tomu php souboru
když přes operu tak klasiku když se nenačte obrázek
takže stačí, když na konec scriptu zadáš imageJpeg($new);