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]
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.