PHP je jedním z nejrozšířenějších internetových programovacích jazyků, ale jeho přednosti vynikají i v jiných oblastech. Vezměme si například provádění různých početních operací, či dynamických aplikací pro soukromou potřebu. Zajisté je zde jedna nevýhoda. Skripty PHP nelze provozovat jako jiné windowsovské (a další) programy, nýbrž je nutné je spouštět přes webový server a lze s nimi pracovat jen v prohlížeči internetových stránek. Ani toho ale nedokáže zakrýt nesporné přednosti PHP.

V tomto seriálu vám chci představit PHP jako nástroj pro vykreslování grafů. Se skriptem budete mít možnost pracovat jak na internetu (např. přehledné zobrazování statistik), tak i na vašem PC, kde si můžete pro svou vlastní potřebu generovat ze zadaných hodnot přehledné grafy. Grafy nebudou generované pomocí GD knihovny, výsledek tedy nebude obrázek, ale konstrukce v HTML. K obrázkovým grafům přejdu možná jindy.

Většinou začínám tím, že předvedu hotovou aplikaci a pak ji popisuji. Dnes to udělám jinak. Tento skript je totiž mnohem složitější a k jeho pochopení bude nutné soustředit pozornost hlavně na uspořádání celé aplikace. Pro začátek vám ukážu finální výsledek našeho snažení:

Hlavní roli v mém skriptu hraje uspořádání tabulky, do níž se bude graf vypisovat. Na následujícím obrázku jsem vám celou tabulku nechal zobrazit. Věřím, že když se pouštíte do PHP, už nejspíš znáte něco z jazyka HTML. Podle obrázku tedy jistě poznáte sami, že k takovéto struktuře bude zapotřebí použít tagy COLSPAN a ROWSPAN a to v nemalé míře. Z hlavy byste tabulku sestavovali velmi dlouho. Já jsem k tomu použil Namo Web editor, kde se tabulky dají tvořit pohodlnějším způsobem. Pokud strukturu rozdělíme na části podle řádků, dostaneme 4 hlavní: řádek s nadpisem, stupnice osy Y + vlastní pole grafů, stupnice osy X + osa X a posledním je řádek s legendou. Největší kus práce bude na části s osou Y a grafem. Jak je vyznačeno zeleně, osa Y je tvořená ze dvou buňek - v jedné je číslo a ve druhé obrázek s odrážkou. Červeně označená část jedné hodnoty z grafu musí tyto jednotlivé buňky osy Y spojit v celek, aby bylo možné zvětšovat obrázek do libovolné výšky. Modrou barvou je zvýrazněna stupnice osy X - zde to není obrázek jako u osy Y, nýbrž jen obarvený spodní okraj tabulky (obrázek je pouze ten výčnělek). Tímto způsobem zabráníme nepříjemným bílým mezerám nezi odrážkami osy X, když budou popisky příliš dlouhé. Růžovou barvou není označen rámeček spojených buňek, ale pozadí grafu. Pozadí je tam z důvodu lepší přehlednosti grafu.

Nyní, když si vytvoříte takovou tabulku, je nutné zjistit, které části HTML kódu patří té dané buňce. V takto složité tabulce je orientace hodně složitá, a proto vám nezbývá než řešit to motodou pokusu a omylu. Do proměnných si pak můžete uložit některé statické údaje, jako datum, nadpis grafu, osu Y, osu X a tyto potom nechat v určených buňkách vypsat, ať nemusíte ty samé buňky zdlouhavě hledat při každém novém generování grafu.

Přichází část, kde vás potrápím oním HTML+PHP kódem. Kdybych to vysvětloval po částech mohlo by se stát, že v tom budete mít zmatek. Takhle vám tu označím nejdůležitější části a vysvětlím, proč je to řešené tak a ne onak.:

Budu postupovat od začátku a řeknu něco k těm nejdůležitějším částem. Do proměnných $cisla a $ox si uložíte hodnoty k vypsání a stupnici osy X. Podle vlastních potřeb můžete editovat označené proměnné.

Fialová část má za úkol jediné - porovnat, zda počet prvků v poli $ox a $cisla se shoduje. Pokud ne, vypíše se chybová hláška.

Oranžová část: na vrchol každého grafu je možno umístit obrázek jako dekoraci. Tento obrázek je uložen v proměnné $top_file. Tato část zjistí, zda je v proměnné nějaký záznam, a pokud ano, uloží do proměnné $top HTML kód k tomuto obrázku. Není-li $top_file definována, do proměnné $top se nic neuloží. V každém případě však musí být proměnná $top definována, protože se vypisuje vždy (ušetříme tím pár řádek php kódu uvnitř tabulky).

Šedá část: spočítá průměrnou hodnotu v grafu a tuto uloží na konec pole $cisla.

Béžová část: zjistí nejvyšší hodnotu v grafu. Toho využijeme při určování poměru zmenšení grafů oproti nejvyššímu.

Zelená část: počítá onen poměr zmenšení. Maximální hodnota bude mít vždy výšku 161 a ostatní hodnoty se podle ní zmenší. Proč 161? Vyzkoušel jsem si, že je to optimální výška, aby nám graf zůstal celistvý. Při vyšší výšce by se tabulka rozházela a graf by potom nabral velmi zajímavých tvarů :). Zmenšenou výšku každého grafu si uložíme do pole $a.

...

Vínově zbarvená část: Pokud by hodnoty garů byly příliš vysoké (v řádu tísíců až miliard), tabulka by se opět rozsunula a nevypadalo by to přehledně. Čísla nad 1000 tedy ořízneme a vypíšeme jen první 3 číslice. Na druhou stranu lidé, kteří si budou graf prohlížet musí vidět tato čísla. Pro tento případ jsem si vytvořil malý JavaScript, který při přesunu myší nad zkráceným číslem ukáže jeho celou hodnotu. Tato část určí, která čísla potřebují zkrátit a podle toho stanoví proměnné $sub1, $sub2 a $sub3, které potom využijeme ke složení odkazu na JavaScriptovou funkci.

Hnědá část: zde se vypisují všechny grafy mino průměru. Pro velké hodnoty v grafech je zde opět funkce, která zlepšuje přehlednost. A to tím způsobem, že oddělí velká čísla tečkou mezi tisíci. Aktivaci této funkce provedete v proměnné $pointize. Zajímavou funkci najdeme, pokud určíme proměnnou $mark. Skript je dělán tak, že pro všechny grafy, které mají menší hodnotu, než číslo uvedené v $mark se použije jiná barva. Můžete si ji určit v $bar_mark. Tohle ještě není všechno. Každý graf je vlastně odkaz. A po kliknutí na něj se označí opět úplně rozdílnou barvou. Tohle může pomoci při prezentaci grafu jako zvýraznění některé hodnoty. Růžová část php kódu tedy dělí skript ještě na zvýrazněnou a nezvýrazněnou část. Při označování se využívá prostého předání parametru v URL. Parametrem je zde číslo grafu, který má být zvýrazněn.

S průměrnou hodnotou nemůžeme pracovat jako s celým grafem, protože zde je to už jen statistika a ne údaj. Fialová část skriptu tedy vytiskne graf průměru.

Modrá část: Vypisuje hodnoty na ose Y. Nová vlastnst je ta, že po určení $oy_round mohou být čísla zaokrouhlena na čitelnější podobu. Funkce oddělení tisíců tečkou se shoduje s předchozí.

Oranžová část vytiskne jen odrážky osy X.

Hnědá část: Pokud jsou popisky osy X příliš hlouhé, využijeme zde opět předchozí JavaScriptové funkce a po přejetí myší přes popisek se zobrazí celý název.

Toť nejdůležitější části skriptu. Doufám, že se mi podařilo tento článek uspořádat do pochopitelné podoby. Jste-li v PHP začátečníkem, možná je toho na vás příliš, ale věřím, že zkušenějším programátorům by většina věcí měla být jasná. Přeji vám hodně úspěchů s výslednou aplikací, kterou ZDE přikládám ke stažení.

Příště tento skript ještě trochu rozšířím (ano...je to možné :))) ) o jedno významnou drobnost :o). Těším se s vámi u dalšího dílu...

Čevelíček Marek