Počítadlo už máme hotové, včetně jeho grafického výsledného zobrazení. V dnešním díle si proto ukážeme, jak vytvořit sloupcový graf s týdenním přehledem návštěvnosti. Funkce na zobrazení grafu se může hodit na cokoliv, je jen na vás k čemu ji budete v budoucnu používat.
Výsledek dnešního snažení bude vypadat asi takto:

Stejně jako v minulém díle, se i dnes neobejdeme bez GD knihovny, přes kterou budeme vytvářet výsledný obrázek s grafem.
Nejprve si vytvoříme funkci graf(), která z vstupního pole vybere největší hodnotu a podle ní nastaví měřítko na horizontální ose grafu. Výška obrázku grafu, bude záviset na počtu hodnot v poli. Vstupní pole obsahuje klíče–datumy a hodnoty. Ke konci jednoduše projdeme pole a datumy napíšeme na vertikální osu. Hodnota bude udávat délku modrého sloupce grafu.
Celá funkce je důsledně okomentovaná, takže ji nebudu blíže rozebírat.
function graf($pole) { #pocet hodnot $pocet=count($pole); #vytvorime obrazek spravne velikosti 300 x vyska $image=imagecreate(300,($pocet*30)+56); #zjistime vysku grafu $vyska_grafu = $pocet*30; #definujeme barvy $cerna=ImageColorAllocate($image,0,0,0); $pozadi=ImageColorAllocate($image,238,238,238); $bila=ImageColorAllocate($image,255,255,255); $seda=ImageColorAllocate($image,192,192,192); $modra=ImageColorAllocate($image,44,81,150); #vybereme nejvetsi cislo z pole pro cisla na vrchni ose $maximum = max($pole)+30; #maximum zaokrouhlime na desitky, aby to lepe vypadalo $maximum = round($maximum/10)*10; #vydelime maximum peti, abychom dostali cisla na ose $max = $maximum/5; #nejprve vytvorime pozadi celeho obrazku ImageFilledRectangle($image,0,0,299,$vyska_grafu+55,$pozadi); #potom cerny okraj okolo obrazku ImageRectangle($image,0,0,299,$vyska_grafu+55,$cerna); #bile pozadi grafu ImageFilledRectangle($image,60,25,280,$vyska_grafu+35,$bila); #vytvor vrchni horizontalni osu ImageLine($image, 60, 25, 280, 25, $cerna); #zjistime pomer sirka_grafu/hodnoty = velikost jednoho bodu $bod = 220/$maximum; for ($i=0;$i<=5;$i++) { #vertikalni cerny zobacek --|-- ImageLine($image, 60+$i*44, 24, 60+$i*44, 30, $cerna); #vertikalni seda cara ImageLine($image, 60+$i*44, 31, 60+$i*44, $vyska_grafu+35 , $seda); #cisla nad osou Imagettftext($image, 7, 0, 56+$i*43, 20, $cerna, 'verdana.ttf', round($i*$max)); } #leva cerna linka grafu – vertikalni osa ImageLine($image, 60, 24, 60, 35+$pocet*30, $cerna); #spodni seda linka grafu ImageLine($image, 60, $vyska_grafu+35, 280, $vyska_grafu+35 , $seda); #zaciname delat graf $y=35; while (list($datum,$hodnota)=each($pole)) { $delka_sloupce = $hodnota*$bod; #modry obdelnik – vyplneny. ImageFilledRectangle($image,60,$y,$delka_sloupce+60,$y+22,$modra); #cerny okraj okolo obdelniku ImageRectangle($image,60,$y,$delka_sloupce+60,$y+22,$cerna); #vypiseme datum Imagettftext($image, 7, 0, 7, $y+15, $cerna, 'verdana.ttf', $datum); #za sloupec napisem hodnotu Imagettftext($image, 7, 0, $delka_sloupce+65, $y+15, $cerna, 'verdana.ttf', $hodnota); #zvedneme Y souradnici pro vykresleni dalsiho sloupce $y+=30; } Imagettftext($image, 7, 0, 203, $vyska_grafu+52, $cerna, 'verdana.ttf', "http://www.qark.net"); #posleme hlavicku Header("Content-type: image/png"); #zobrazime obrazek imagePNG($image); #uvolnime obrazek z pameti imagedestroy($image); }
Vzhledem k tomu, že funkce graf() zobrazí vstupní pole s klíči a hodnotami, musíme si takové pole vytvořit. V případě počítadla nám k tomu může sloužit třeba taková funkce tyden(), která z tabulky vybere počet unikátních denních návštěvníků a vytvoří potřebné pole. Pokud budete potřebovat výpis pro více, či méně jak 7 dní, stačí použít následující funkci třeba jako tyden(3) a dostanete výpis za poslední tři dny.
function tyden($dny=7) { $pole = array(); #nejprve vybereme dnesni navstevniky a ulozime je do pole $dotaz = mysql_query("SELECT count(*) FROM pocitadlo WHERE datum=NOW()"); #vlozime hodnotu do pole list($pole['DNES'])=mysql_fetch_array($dotaz); $dotaz = mysql_query("SELECT DATE_FORMAT(datum,'%d/%m %y') uprav_datum, count(*) as pocet FROM pocitadlo WHERE datum<>NOW() GROUP BY datum ORDER BY datum DESC LIMIT $dny"); while ($vypis=mysql_fetch_object($dotaz)) { #klic=datum, hodnota je pocet navstevniku $pole[$vypis->uprav_datum]=$vypis->pocet; } return $pole; }
Vytvoříte si například soubor graf.php a do něj vložíte dnešní funkce, připojíte se k databázi a zavoláte je v následujícím pořadí.
#nejprve se pripojte k databazi $pole = tyden(); graf($pole);
Zobrazení grafu v XHTML <img src="graf.php" alt="Graf" />
Zdojový soubor si můžete stáhnout [ZDE]
linkuj.cz],
[
jagg.cz],
[
asdf.sk],
[
del.icio.us]
PDF]
RSS komentářů] k článku
Napsat] komentářQarku, premyslel jsi o jinem reseni? Prvni co by napadlo me pri vytvareni grafu, by byly ruzne divy primo v html, rozmistene pomoci CSS. Jako napriklad tady.
Jak je to vlastne s rychlosti vytvareni tech obrazku? Neni to pomalejsi? Tipoval bych, ze divy budou rychlejsi (pro mensi pocet zobrazenych obdelniku), ale zase nejdou ulozit jako obrazek.
Mej se, Tomas
]Web je nyní kompletně uzavřen. Od této chvíle není možné přidávat žádné komentáře!
Další informace naleznete zde.