TECHNICKÁ UNIVERZITA V LIBERCI
Fakulta mechatroniky, informatiky a mezioborových studií
Studijní program: N2612 – Elektrotechnika a informatika Studijní obor: 1802T007 – Informační technologie
Interaktivní grafy na webu s využitím HTML5 a SVG
Interactive web charts uses HTML5 and SVG
Diplomová práce
Autor: Bc. Jan Bílek
Vedoucí práce: Mgr. Jiří Vraný, Ph.D.
V Liberci 18. 5. 2012
Originál zadání práce !!!!!!!!!!
Prohlášení
Byl(a) jsem seznámen(a) s tím, že na mou diplomovou práci se plně vztahuje zákon č. 121/2000 Sb., o právu autorském, zejména § 60 – školní dílo.
Beru na vědomí, že Technická univerzita v Liberci (TUL) nezasahuje do mých autorských práv užitím mé diplomové práce pro vnitřní potřebu TUL.
Užiji-li diplomovou práci nebo poskytnu-li licenci k jejímu využití, jsem si vědom povinnosti informovat o této skutečnosti TUL; v tomto případě má TUL právo ode mne požadovat úhradu nákladů, které vynaložila na vytvoření díla, až do jejich skutečné výše.
Diplomovou práci jsem vypracoval(a) samostatně s použitím uvedené literatury a na základě konzultací s vedoucím diplomové práce a konzultantem.
Datum
Podpis
Poděkování
Děkuji vedoucímu diplomové práce Mgr. Jiřímu Vranému, Ph.D, za jeho odborné vedení při zpracování diplomové práce.
Abstrakt
Cílem diplomové práce je vytvoření webové aplikace, která bude ze zadaných dat generovat jejich grafickou reprezentaci. Tato grafická reprezentace je ve formě SVG obrázku, který je použitelný pro zobrazení na webové stránce. Práce začíná popisem implementace SVG a následným použitím této vytvořené implementace SVG v knihovně, generující běžné druhy grafů. Pro implementaci SVG i knihovnu grafů je použit jazyk PHP. Knihovna byla otestována pomocí vytvořené aplikace, která zároveň slouží jako interaktivní rozšíření knihovny. Aplikace přináší interaktivní formulář sloužící k vytváření a editaci grafů, zároveň také jednoduché rozhraní pro zobrazení grafu na webové stránce. Ve zkušební aplikaci jsou uplatněny prvky HTML5 jako localStorage a nové formulářové prvky nebo technologie AJAX. Při zobrazení grafu na webové stránce jsou také přístupné interaktivní funkce jako bublinová nápověda, která obsahuje podrobnosti o prvcích grafu, procházení grafu po ose x nebo přiblížení vybrané části grafu. Nechybí jednoduchý uživatelský manuál a dokumentace projektu.
Klíčová slova: HTML5, SVG, grafy, PHP, AJAX
Abstract
The aim of the diploma thesis is to create a web application that will generate graphic representation from given data. This graphical representation is in the form SVG image, which is usable for display on website. The thesis begins with a description of SVG implementation and use of the generated SVG implementation in the library, which generating common types of charts. To implement SVG and library of graphs is used PHP language. The library was tested using created application that serves as an interactive extension of the library. The application brings an interactive form used to creating and editing graphs, while also the simple interface for displaying the graph on the website. In the test application are used HTML5 components as localStorage and new form elements or AJAX technology. When displaying a chart on the website are also accessible interactive functions such as tooltip, which contains details about the elements of a chart and browse after the x axis of the chart or zoom of the selected part chart. There is also a simple user manual and documentation project.
Keywords: HTML5, SVG, charts, PHP, AJAX
Obsah
Abstrakt...5
Abstract...6
Obsah...7
Seznam ilustrací...8
Seznam zkratek...9
Úvod...10
1. Použité technologie...11
1.1 HTML5...11
1.2 SVG...11
1.3 AJAX...12
2. Knihovna grafů...13
2.1 Základní požadavky...13
2.2 Implementace SVG...13
2.2.1 SVG shape...15
2.2.2 Elementy SVG...15
2.2.3 SVG element...16
2.3 Návrh knihovny grafů...19
2.4 Realizace abstraktních tříd Graf a Mřížkový Graf...23
2.4.1 Třída Graf...23
2.4.2 Třída Mřížkový Graf...27
2.5 Realizace koncových tříd grafů...29
2.5.1 Sloupcový graf...30
2.5.2 Řádkový graf...31
2.5.3 Bodový graf...32
2.5.4 Čárový graf...33
2.5.5 Oblastní graf...34
2.5.6 XY Bodový graf...35
2.5.7 XY Čárový graf...36
2.5.8 XY Oblastní graf...37
2.5.9 Koláčový graf...38
2.6 Html5Grafy...39
2.7 Jednoduchý manuál knihovny...39
2.8 Dokumentace knihovny...41
3. Použití knihovny ve zkušební aplikaci...42
3.1 Struktura zkušební aplikace...42
3.2 Tvorba a editace grafu...43
3.2.1 Čtečka XML souborů...46
3.3 Zobrazení grafu...47
3.3.1 Interaktivní akce grafu...48
4. Porovnání s existujícími knihovnami...50
Závěr...52
Seznam literatury...53
Seznam ilustrací
Obr. 2.1: Diagram tříd implementace SVG...14
Obr. 2.2: SVG element...16
Obr. 2.3: Potomci třídy Graf...19
Obr. 2.4: Potomci třídy Mřížkový Graf...20
Obr. 2.5: Potomci tříd Bodový Graf a XY Bodový Graf...21
Obr. 2.6: Třídy grafů...21
Obr. 2.7: Kompletní diagram tříd...22
Obr. 2.8: Vložení SVG element do třídy Graf...25
Obr. 2.9: Sloupcový graf...30
Obr. 2.10: Řádkový graf...31
Obr. 2.11: Bodový graf...32
Obr. 2.12: Čárový graf...33
Obr. 2.13: Oblastní graf...34
Obr. 2.14: XY Bodový graf...35
Obr. 2.15: XY Čárový graf...36
Obr. 2.16: XY Oblastní graf...37
Obr. 2.17: Koláčový graf...38
Obr. 3.1: Struktura zkušební aplikace...42
Obr. 3.2: Schema zkušební aplikace...42
Obr. 3.3: Formulář pro načtení souboru...44
Obr. 3.4: Formulář pro nastavení grafu...44
Obr. 3.5: Editace existujícího grafu ...45
Obr. 3.6: Bublinová nápověda...48
Obr. 3.7: Interaktivní akce...48
Obr. 3.8: Zoomování části grafu...49
Seznam zkratek
AJAX – Asynchronous JavaScript and XML API – Application programming interface CSS – Cascading style sheets
DOM – Document object model
JavaScript – Multiplatformní, objektově orientovaný skriptovací jazyk JSON – JavaScript object Notation
PHP – Hypertext preprocessor XML – Extensible markup language SVG – Scalable vector graphics
Úvod
Diplomová práce se zabývá problematikou interaktivních grafů na webových stránkách. Jejím cílem je navrhnout a vytvořit knihovnu pro generování grafů ve formátu SVG, jejich následné zobrazení na webové stránce a reakce na akce vyvolané uživatelem. Tuto vytvořenou knihovnu dále otestovat pomocí testovací aplikace a připravit knihovnu jako modul použitelný při programování dalších www projektů. Zdokumentovat API jednotlivých metod a vytvořit jednoduchý uživatelský manuál.
V úvodu práce je krátké seznámení s použitými technologiemi. Jedná se o krátký popis HTML5, SVG a AJAX. Dále je rozebrán návrh knihovny grafů. Začíná od základních požadavků, přes implementaci SVG grafiky, kde je popsán podrobný návrh a implementace prvků SVG grafiky potřebných pro generování výsledné podoby grafu. Následuje návrh samotné knihovny grafů, který postupuje od nejobecnější třídy Graf, přes třídu Mřížkový Graf až ke koncovým třídám jednotlivých druhů grafů.
V další kapitole je pak popsána realizace abstraktních tříd Graf a Mřížkový Graf s popisem nejdůležitějších metod nezbytných pro správnou funkci knihovny a realizace koncových tříd jednotlivých druhů grafů s ukázkami vytvořených grafů. Pro snadnější používání knihovny je pak zařazen jednoduchý uživatelský manuál, ve kterém jsou popsány a ukázány nejdůležitější operace pro vytváření, úpravu a získávání kódu grafu.
Na konci kapitoly se ještě nachází krátká zmínka o vytvořené dokumentaci knihovny.
V poslední části práce je popsáno testování knihovny pomocí vytvořené aplikace, která zároveň slouží jako interaktivní rozšíření knihovny pro modul použitelný v jiných projektech. Tato aplikace přidává knihovně jednoduchý interaktivní formulář pro vytváření a editaci grafu a také jednodušší zobrazování pomocí AJAXu. Posledním bodem práce je porovnání vytvořené knihovny s podobnými knihovnami pro generování SVG grafů. V závěru jsou zrekapitulovány dosažené výsledky a možnosti dalšího vývoje.
1. Použité technologie
1.1 HTML5
Html je značkovací jazyk pro tvorbu webových stránek. HTML5 je pátá revize html, která je ve stádiu návrhu, stále se vyvíjí a její specifikace není uzavřená.
Přináší řadu novinek v celé oblasti tvorby webu. Jedná se o definici nových html značek, které sémanticky definují strukturu stránky nebo úložiště na straně klienta.
Zavádí také podporu offline aplikací, které lze provozovat v prohlížeči i bez připojení k internetu. Aplikace pak ukládá data do lokálního úložiště v prohlížeči a po připojení k internetu lze data synchronizovat s daty na serveru. Úložiště na straně klienta může být trojího druhu, je to úložiště ve formě asociativního pole, kde jsou data ukládána ve formě páru klíč – hodnota, ve formě relační databáze nebo pomocí Indexed DB, což je objektová databáze. Úložiště ve formě asociativního pole se dělí na localStorage, které uchovává data i po skončení relace prohlížeče a sessionStorage, které pracuje podobně, ale data po skončení relace smaže. HTML5 také zavádí nové multimediální značky pro přehrávání videa a audia, nové API pro JavaScriptu nebo také podporu webové grafiky pomocí značky Canvas a SVG. Podpora HTML5 je bohužel závislá na konkrétní verzi webového prohlížeče, je proto nutné zjišťování aktuální situace podpory prohlížečů, například pomocí (www.caniuse.com), kde lze snadno zjistit podporu potřebné značky pro nejpoužívanější prohlížeče. Další informace viz. specifikace HTML5 od konsorcia W3C [1] nebo [2], [3] a [4].
1.2 SVG
SVG znamená Scalable Vector Graphic, přeloženo do češtiny škálovatelná vektorová grafika. Jedná se o značkovací jazyk na bázi XML, který slouží pro popisování vektorové grafiky. Jelikož se zapisuje v syntaxi XML, je oblíbená pro použití na webových stránkách. Specifikace HTML5 zavádí html značku svg pro použití SVG kódu přímo v kódu webové stránky. Podpora SVG prohlížeči je v dnešní době většinou již bezproblémová, kromě starších prohlížečů, které SVG podporovali částečně nebo vůbec, popřípadě používali pro zpracování zásuvné moduly.
SVG se skládá ze tří základních typů grafických objektů. Jedná se o vektorové tvary, což jsou základní geometrické tvary jako obdélník, kružnice, elipsa, úsečka,
lomená čára a uzavřený polygon. Dále cesty (path), které umožňují nakreslit jakýkoliv celistvý tvar pomocí souřadnic a příkazů pro vytváření cesty. Třetím typem základního grafického objektu je text, se kterým lze pracovat podobně jako se základními geometrickými tvary. Každý SVG obrázek je poskládán z kódu dříve jmenovaných grafických objektů, které můžou být různě seskupovány a formátovány podle definovaných atributů a transformací nebo pomocí kaskádových stylů. SVG také umožňuje seskupování do skupin pomocí značky G a definování nastavení přímo pro celou skupinu objektů najednou, též je definovaná podpora pro filtrování obrazu, maskování nebo ořezávání a animace. Další informace viz. specifikace konsorcia W3C [5].
1.3 AJAX
AJAX je technologie pro vývoj interaktivních webových aplikací měnících svůj obsah bez opětovného načtení celé stránky. Je to technologie, která využívá skriptovací jazyk JavaScript na straně klienta a pomocí objektu XMLHttpRequest posílá asynchronní dotazy na server. Skriptovací jazyk na straně serveru dotazy zpracovává a posílá odpovědi aplikaci zpět ve formě XML, HTML, JSON nebo prostého textu. Tyto odpovědi skriptovací jazyk v prohlížeči zpracovává a zakomponovává do těla stránky.
Výhodou AJAXu je, že dotazy probíhají asynchronně na pozadí prohlížeče a uživatel může dále aplikaci používat. Použití AJAXu znamená zvýšení interaktivity webové aplikace a snížení velikosti přenášených dat, na druhou stranu nevýhodou je například to, že se ztrácí vztah mezi stránkou a url nebo nefunkční historie prohlížeče. Více informací viz. [6].
2. Knihovna grafů
2.1 Základní požadavky
Hlavním úkolem této práce bylo navrhnout a realizovat knihovnu, která bude zpracovávat zadaná data a bude z těchto dat generovat zdrojový kód grafu ve formátu SVG. Tento graf je poté možno zobrazit ve www prezentaci. Knihovna by měla podporovat základní druhy grafů známé z kancelářských programů. Pro vytvoření knihovny grafů byl zvolen skriptovací jazyk PHP, konkrétně ve verzi 5.3.
Při realizaci implementace knihovny byl použit následující postup řešení:
1. Implementace SVG
2. Realizace knihovny grafů s využitím předchozí implementace SVG
Knihovna byla navržena tak, aby její samostatné použití nebo použití jako modul nějaké jiné internetové aplikace bylo pro uživatele co možná nejjednodušší.
2.2 Implementace SVG
Bližší popis SVG lze najít v kapitole 1.2 nebo v publikaci [7]. SVG obsahuje tři typy objektů, jsou to základní geometrické tvary (basic shapes), cesty (path) a texty (texts). Pro potřeby generování grafů bylo zvláště potřeba implementovat základní geometrické tvary. Základních grafických primitiv SVG je následujících šest:
Úsečka – line
Obdélník – rect
Kružnice – circle
Elipsa – ellipse
Lomená čára – polyline
Uzavřený polygon – polygon
Pro každé z výše uvedených grafických primitiv byla vytvořena třída, která se stará o vytvoření příslušného objektu a vrácení kódu ve formátu SVG. Dále byla pro potřeby koláčového grafu implementována třída pro vytváření kruhové výseče.
Ta využívá pro popis kruhové výseče druhý typ SVG objektu a to cesty (path). Nakonec pro vytváření zdrojového kódu textových informací bylo nutno implementovat třídu, která slouží jako popis pro poslední typ SVG objektu – textů (texts).
Výsledná podoba implementace objektů SVG se skládá ze tří úrovní. To můžeme vidět na obrázku Obr. 2.1, kde je zobrazen diagram tříd pro SVG objekty. Na nejvyšší úrovni se nachází třída SVG shape, je to abstraktní třída, která zastřešuje obecné vlastnosti společné všem konkrétním SVG tvarům. Slouží jako rodičovská třída pro všechny SVG objekty kromě textu. Jelikož SVG text má trochu odlišné atributy, musel být definován ve vlastní třídě. Na prostřední úrovni jsou definovány všechny tvary potřebné pro konstrukci grafu, jsou odvozeny od třídy SVG shape. Všechny koncové třídy, i třída SVG text, implementují rozhraní z důvodu lepší ovladatelnosti.
To zajišťuje, že práce se všemi třídami bude podobná a důležité metody mají jednotný název pro všechny třídy.
Obr. 2.1: Diagram tříd implementace SVG
2.2.1 SVG shape
SVG shape je definovaná jako abstraktní třída, která obsahuje obecné vlastnosti pro všechny tvary v SVG grafice, které jsou od ní odvozeny. Jsou to například vlastnosti jako stroke, což je barva obrysové čáry, stroke-width je šířka obrysové čáry nebo fill, jež znamená barvu výplně. Tyto vlastnosti nejen definuje, ale pomocí nastavovacích a návratových metod také následně obhospodařuje. Při vytváření výsledného kódu SVG pak vrací kód těchto atributů, který se dosazuje do výsledného kódu jednotlivých elementů.
2.2.2 Elementy SVG
Jednotlivé elementy SVG se liší v základních parametrech pro jejich vytvoření, proto byla pro každý definována jeho vlastní třída. Každá z těchto tříd zapouzdřuje a stará se o konkrétní parametry daného elementu, přičemž obecné parametry jsou zajištěny odvozením tříd od rodičovské třídy SVG shape. Všechny třídy implementují rozhraní SvgShapeIntf viz. ukázka. Rozhraní zajišťuje, že každá třída bude obsahovat stejnou společnou přístupovou metodu. V tomto případě se jedná o zajištění metody getCode() pro vygenerování konečné podoby kódu konkrétního elementu.
Metoda getCode() vrací textovou podobu kódu SVG formátu, což je forma XML a jeho schéma vypadá následujícím způsobem: <jméno_prvku vlastnost=“vl1“ … />.
V prvním kroku se dosadí do proměnné název elementu dle třídy a názvy vlastností s hodnotami specifickými pro konkrétní třídu. Poté se připojí kód vlastností definovaných v rodičovské třídě SVG shape. Zahrnuty jsou pouze ty, které mají jinou hodnotu než výchozí.
Ukázka definice interface SvgShapeIntf:
interface SvgShapeIntf { public function getCode();
}
2.2.3 SVG element
Pro jednodušší přístup k prvkům SVG byla vytvořena třída SVG element. Jedná se o statickou třídu, která využívá návrhový vzor Tovární metoda. Slučuje do sebe všechny třídy SVG tvarů a SVG text a tím umožňuje vytvářet elementy z jednoho místa viz. Obr 2.2.
Obr. 2.2: SVG element
Pro vytvoření elementu třída SVG element nabízí dvě možnosti. První možností je vytvořit element pomocí metody vytvorSvgElement:
static public function vytvorSvgElement($elementName, array $parameters)
Metoda vytvorSvgElement očekává dva parametry a to jméno elementu, který chceme vytvořit $elementName a pole, jež obsahuje vlastnosti dle zadaného názvu elementu viz. dokumentace. Jako jméno elementu lze použít názvy line, rect, round-rect, circle, ellipse, pie-arc, polyLine, polygon a text. Metoda vrací instanci vytvořeného elementu, se kterým lze dále pracovat.
Druhou možností je vytvoření elementu pomocí jeho vlastní metody. Jsou definovány tyto metody:
static public function line($x1, $y1, $x2, $y2)
Metoda line vytvoří přímku mezi dvěma body, jejími vstupními parametry jsou čtyři číselné souřadnice, konkrétně dva body bod1[x1, y2], bod2[x2, y2]. Po úspěšném vykonání vrací instanci třídy SVG line a tu lze dále upravovat.
static public function rect($x,$y,$width,$height)
Metoda rect slouží pro vytvoření obdélníku s počátkem v bodě [x, y] a s šířkou width a délkou height. Vstupní paramentry jsou čtyři číselné souřadnice. Metoda vrací instanci třídy SVG rect.
static public function roundRect($x,$y,$width,$height, $rx, $ry)
Metoda roundRect slouží pro vytvoření obdélníku se zaoblenými rohy s počátkem v bodě [x, y] a s šířkou width a délkou height jako u obdélníku, navíc však parametry pro zaoblení rohu rx a ry. Vstupem je šestice číselných parametrů. Metoda vrací instanci třídy SVG round rect.
static public function circle($cx, $cy, $r)
Metoda circle slouží pro vytvoření kruhu se středem v bodě [cx, cy] a poloměrem r. Vstupem jsou tři číselné hodnoty. Metoda vrací instanci třídy SVG circle.
static public function ellipse($cx, $cy, $rx, $ry)
Metoda ellipse slouží pro vytvoření elipsy se středem v bodě [cx, cy] a s poloměry os rx a ry. Vstupem jsou čtyři číselné parametry. Metoda vrací instanci třídy SVG ellipse.
static public function pieArc($cx, $cy, $r, $startAngle, $delta, $absolute)
Metoda pieArc slouží pro vytvoření kruhové výseče (pro koláčový graf) se středem v bodě [cx, cy] a poloměrem r. Rozsah výseče se zadává pomocí počátečního natočení výseče startAngle k počátku (úhel 0°) a šířkou výseče delta, oboje udávané ve stupních.
Poslední parametr je logická hodnota, která udává jestli jsou souřadnice zadány relativně nebo absolutně k počátku soustavy souřadnic. Vstupem je pět číselných hodnot a jedna logická hodnota. Metoda vrací instanci třídy SVG pie arc.
static public function polyLine(array $points)
Metoda polyLine slouží pro vytvoření lomené čáry (polyline), přijímá pole bodů. Toto pole je složeno z bodů ve formátu pole bod [x, y, id]. Metoda vrací instanci třídy SVG polyline.
static public function polygon(array $points)
Metoda polygon slouží pro vytvoření uzavřeného polygonu (pro oblastní graf). Vstupem je pole bodů. Jeho jednotlivé položky jsou pole o třech položkách [x, y, id]. Metoda vrací instanci třídy SVG polygon.
static public function text($text, $x, $y)
Metoda text slouží pro vytvoření elementu text na souřadnicích x, y a s obsahem v proměnné text. Vstupem je jedna textová hodnota a dvě číselné souřadnice. Metoda vrací instanci třídy SVG text.
2.3 Návrh knihovny grafů
Jak již bylo dříve v textu zmíněno, hlavním úkolem této diplomové práce bylo navrhnout a realizovat knihovnu, která zpracuje zadaná data a vytvoří z nich grafickou reprezentaci ve formě SVG grafu, který bude použitelný ve www prezentaci. Bylo zvoleno, že knihovna bude umět vytvořit několik běžných druhů grafů:
Koláčový
Sloupcový
Řádkový
Oblast
Bodový
Čárový
Po prostudování všech těchto typů grafů se ukázalo, že se dělí na dvě skupiny a to z hlediska potřeby os a mřížky. Konkrétně se jedná o skupinu, do které patří koláčový graf, ve kterém se nevyskytují osy ani mřížka. Do druhé skupiny patří všechny ostatní grafy, jelikož u nich je potřeba os nezbytná. Podle tohoto kritéria bylo tedy nutno vytvořit na nejvyšší úrovni třídu Graf, která obsahuje všechny obecné vlastnosti pro potřeby obou skupin grafů. Z třídy Graf potom vychází jako přímý potomek třída Koláčový Graf, která je již koncovou třídou pro koláčový graf a třída Mřížkový Graf, viz. Obr. 2.3.
Obr. 2.3: Potomci třídy Graf
Třída Graf je v tomto případě abstraktní třídou na nejvyšší úrovni, popisující grafy z obecného hlediska. Její smysl spočívá hlavně v tom, že obsahuje všechny vlastnosti a metody společné všem druhům grafů. Jedná se například o metody pro nastavení rozlišení grafu, přidání nebo odebrání datové řady nebo vytvoření názvu grafu. Obsahuje také funkci pro vytvoření legendy a další společné metody.
Třída Mřížkový Graf je stejně jako třída Graf abstraktní třídou, u které nelze vytvořit její instanci. Je definovaná jako potomek třídy Graf, kterou rozšiřuje o vytvoření os a mřížky. Jejím hlavním úkolem je pro zadané datové řady vytvořit osy a mřížku v použitelném měřítku. Pro popisy os existují dvě možnosti. První možností je popis osy pomocí číselných popisků (numerické). Druhou možností jsou popisky pomocí názvů prvků (textové), která se používá například u sloupcového nebo řádkového grafu. Při vytváření os v této třídě lze snadno nastavit pro osu x i osu y její značení. To znamená, že lze zkombinovat všechny možnosti pro různé grafy, např. pro sloupcový graf jsou osy nastaveny na osa x textová, osa y numerická. Pro XY grafy jsou obě osy nastaveny jako numerické.
Z třídy Mřížkový Graf vychází čtyři potomci. Všichni potomci jsou již přímo třídy grafů ze kterých lze vytvořit instanci. Jedná se o třídy Sloupcový Graf, Řádkový Graf, Bodový Graf a XYBodový Graf, což je vidět na Obr. 2.4.
Sloupcový Graf a Řádkový Graf jsou třídy, které již nemají žádné potomky.
Na rozdíl od zbylých dvou tříd (Bodový a XYBodový Graf), které si jsou vzájemně podobné. Jejich odlišnost je v popisech jejich os x. Bodový Graf má totiž osu x orientovanou textově, na rozdíl od XYBodového Grafu, který má osu x numerickou.
Obě třídy mají dva potomky, Čárový Graf a Oblastní Graf viz. Obr. 2.5.
Obr. 2.5: Potomci tříd Bodový Graf a XY Bodový Graf
Čárový a Oblastní Graf jsou potomky tříd Bodový a XY Bodový Graf.
Z rodičovských tříd využívají hlavně vytvoření množiny bodů, jenž jsou pro správné sestavení a generování těchto grafů nezbytné. Čárový Graf používá ve své konstrukci lomenou čáru, která tvoří spojnici mezi vytvořenými body. Oblastní Graf též používá vygenerovanou množinu bodů tím, že pomocí pospojování bodů dostane souvislou oblast, která v konečném součtu tvoří zobrazovanou plochu grafu.
Třídy Čárový a Oblastní Graf jsou posledními koncovými třídami tohoto návrhu. Všechny navržené koncové třídy grafů lze vidět na Obr. 2.6 a kompletní diagram tříd na obrázku Obr. 2.7 na následující stránce.
Obr. 2.6: Třídy grafů
Obr. 2.7: Kompletní diagram tříd
2.4 Realizace abstraktních tříd Graf a Mřížkový Graf
Po dokončení návrhu, jež je popsán výše, bylo přistoupeno k realizaci knihovny.
V následujícím textu je popsána realizace navržených tříd a nejdůležitějších metod nezbytných pro funkci knihovny. Pro vytvoření knihovny grafů byl zvolen skriptovací jazyk PHP, konkrétně ve verzi 5.3. Všechny soubory, které jsou v této kapitole popsány jsou komentovány a obsaženy na přiloženém CD.
2.4.1 Třída Graf
Třída Graf slouží jako základní a nejobecnější popis grafu v knihovně. Jsou zde definovány proměnné potřebné a využívané všemi odvozenými třídami. Hlavní myšlenkou třídy Graf je definovat a obsluhovat obecné parametry nastavení pro všechny druhy grafů a změny tohoto nastavení. Dále se stará o přidávání, ukládání a udržování datových řad. Datová řada byla zvolena jako asociativní pole, ve kterém jsou jednotlivé hodnoty ukládány jako páry klíč, hodnota. Jednotlivé řady jsou identifikovány svým jedinečným klíčem, což může být uživatelsky zadaný název nebo hodnota indexu, která se automaticky dosadí. Všechny datové řady vytvářeného grafu jsou uloženy v proměnné $datoveRady. Změny v nastavení se ukládají do proměnné
$nastaveni stejným způsobem jako u datové řady. Do těchto proměnných se vkládají hodnoty pomocí metod pridejRadu, vlozNastaveni. Definovány jsou ještě další metody pro změny dat a nastavení podrobněji popsané v dokumentaci na přiloženém CD.
Ukázka metody pridejRadu:
public function pridejRadu(array $rada, $nazev = null, $barva = null) { if($nazev != null){
$this->datoveRady[$nazev] = $rada;
}else{
$this->datoveRady[] = $rada;
} ...
}
Nejdůležitějšími hodnotami pro správné zobrazení grafu jsou kromě zdrojových dat hodnoty rozlišení, uložené v proměnných $width a $height, určující rozložení a celkový vzhled grafu. Lze je nastavovat přímo pomocí metod setWidth a setHeight.
Metodou setNazevGrafu je také jednoduše možné přímo nastavit název grafu v proměnné $nazevGrafu.
Jednou z nejdůležitějších metod v třídě Graf je metoda setMezeGrafu().
Ta se stará o přípravu rozvržení zobrazované oblasti grafu. Viz. ukázka zdrojového kódu z metody setMezeGrafu.
Ukázka z metody setMezeGrafu:
protected function setMezeGrafu() { ...
//sirka grafu
$this->sirkaGrafu = $this->width - $this->okrajVlevo - $this->okrajVpravo - ($this->legendaPozice == "vpravo"
? $this->legendaRozmer : 0);
//vyska grafu
$this->vyskaGrafu = $this->height - $this->okrajDole - $this->okrajNahore - $this->velPismoNazev - ($this->legendaPozice == "vpravo"
? 0 : $this->legendaRozmer);
//horni strana grafu
$this->nahore = $this->pocY + $this->okrajNahore;
//spodni hrana grafu
$this->dole = $this->pocY + $this->okrajNahore + $this->vyskaGrafu;
//leva strana grafu
$this->vlevo = $this->pocX + $this->okrajVlevo;
//prava strana grafu
$this->vpravo = $this->pocX + $this->okrajVlevo + $this->sirkaGrafu;
}
Metoda setMezeGrafu nejprve nastaví velikost písma v grafu pomocí
rozměry potřebné pro vytvoření legendy. V dalším kroku se počítá velikost šířky oblasti grafu, což je celková šířka plátna (width) mínus okraj vlevo, vpravo a šířka legendy, pokud je povolena. Vypočtená hodnota je uložena v proměnné $sirkaGrafu. Neméně důležitou hodnotou je hodnota výšky grafu, která je vypočítána jako celková výška plátna mínus okraj dole, nahoře a výška legendy, pokud je povolena. Vypočtená hodnota je uložena v proměnné $vyskaGrafu. Pro zjednodušení výpočtů souřadnic objektů v grafu jsou zde ještě počítány další čtyři důležité hodnoty. Jedná se o meze oblasti grafu, horní strana grafu, spodní strana grafu, levá strana grafu a pravá strana grafu.
Umožňují zrychlení a zjednodušení výpočtů souřadnic při konstrukci mřížky grafu, os a elementů grafu.
K sestavování výstupního kódu grafu byly ve třídě Graf vytvořeny metody hlavickaGrafu, teloGrafu, dále využívající pomocné metody nazevGrafu a legenda.
Jelikož je výstupní kód generován ve formátu SVG, musí být do třídy Graf vložena třída SVG element, viz. kapitola 2.2.3, pomocí které lze elementy SVG jednoduše vytvářet a získat jejich kód.
Obr.2.8: Vložení SVG element do třídy Graf
Ukázka metody hlavickaGrafu:
protected function hlavickaGrafu() {
$this->kodGrafu = '<svg width="'.$this->width.'" height="'.$this->height.'">';
$rect = SvgElement::rect(0, 0, $this->width, $this->height);
$rect->setFill("white");
$this->kodGrafu .= $rect->getCode()."\n";
if($this->nazevGrafu !=""){
$this->nazevGrafu();
} }
Výstupní kód grafu v SVG je uložen v proměnné $kodGrafu. Prvním krokem pro generování výstupního kódu je provedení metody hlavickaGrafu, ta zajistí vložení počátečního otevíracího tagu SVG a nastavení dvou jeho atributů width a height.
Následně vytvoří pozadí grafu a přidá do výsledného kódu. Pokud je nastaven název grafu, pak se vytvoří i jeho kód pomocí metody nazevGrafu.
Ukázka metody nazevGrafu:
protected function nazevGrafu() {
$this->velPismoNazev = 2 * $this->velPismoOsa;
$this->pocY += $this->velPismoNazev;
$x = bcdiv($this->width, 2);
$nazev = SvgElement::text($this->nazevGrafu, $x, $this->velPismoNazev);
$nazev->setFontSize($this->velPismoNazev);
$nazev->setFill($this->barvaPismoNazev);
$nazev->setTextAnchor(SvgText::TEXT_ANCHOR_MIDDLE);
$this->kodGrafu .= $nazev->getCode()."\n";
}
Metoda nazevGrafu nejprve nastaví velikost písma názvu a poté pozici ve směru y. Následně zjistí střed obrázku a vytvoří název jako SVG element typu text a aktualizuje jeho vlastnosti dle nastavení grafu. Metoda končí přidáním kódu do proměnné s kódem grafu.
Ukázka metody teloGrafu:
protected function teloGrafu() { /* @var $element SvgShape */
foreach ($this->elementyGrafu as $element) { $this->kodGrafu .= $element->getCode()."\n";
}
$this->kodGrafu .="</svg>\n";
Kód těla grafu je sestavován pomocí metody teloGrafu, viz. ukázka na předchozí straně. Všechny elementy SVG vygenerované během doby, kdy se vytváří graf, se postupně ukládají do proměnné $elementyGrafu, což je pole. Metoda teloGrafu pole prochází po jednotlivých elementech a přidává do výstupního kódu postupně kódy jednotlivých elementů. Výsledný kód grafu se uzavře koncovým tagem SVG.
Poslední metodou, která slouží ve třídě Graf pro vytváření výstupního kódu, je metoda legenda. Pokud je povolena, pomocí proměnné $legendaEnable, vytvoří přehled datových řad, které se vyskytují v grafu. U některých jmenovaných metod je definována jejich viditelnost jako protected, protože jsou určeny až pro použití v koncových třídách grafů.
2.4.2 Třída Mřížkový Graf
Třída Mřížkový Graf je potomkem třídy Graf. Jejím hlavním smyslem je rozšíření třídy Graf o vytváření os a možnosti vytvoření mřížky, které potřebují všechny zvolené druhy grafů kromě koláčového. Bylo zjištěno, že osa může být dvojího druhu. Buď s číselným popisem (numerická) nebo s textovým popisem (textová). Jelikož každý druh grafu má složení os trochu jiné, bylo nutno vyřešit problém tak, že pro každý druh grafu lze definovat složení os zvlášť. Tento problém byl vyřešen pomocí metody vytvorOsy, viz. ukázka.
Ukázka metoda vytvorOsy:
public function vytvorOsy($osaX, $osaY)
Metoda vytvorOsy je základní metodou pro vytváření os. Jejími parametry jsou dvě textové proměnné, ve kterých metoda očekává jakého druhu budou jednotlivé osy.
Jediné povolené možnosti, jak již bylo napsáno dříve, jsou možnosti „číselná“ nebo
„popisová“.
Třída Mřížkový graf neobsahuje jen metody pro vytváření os, ale i důležité pomocné metody getKrok a setDataOsy, které se starají o přípravu před vytvářením os a mřížky viz. ukázka.
Ukázka metody getKrok a setDataOsy:
private function getKrok($number)
protected function setDataOsy($druhGrafu)
První z jmenovaných metod slouží k určení datového kroku na číselné ose.
Očekává číselnou hodnotu, která bude odpovídat největší číselné hodnotě vyskytující se na ose. Z hodnoty následně určí normalizovnou velikost čísla a pomocí porovnávacího algoritmu zvolí optimální krok dat na ose. Tím je zaručeno, že nemůže nastat situace, kdy by datová hodnota byla mimo rozsah grafu.
Metoda setDataOsy je určena pro zjišťování maximálních a minimálních hodnot na číselných osách. Očekává parametr odpovídající druhu grafu a podle něho určuje, zda je číselná osa ve směru x nebo y. Pro každou zadanou datovou řadu provede určení maximální a minimální hodnoty a porovnání s dřívějšími hodnotami maxima a minima.
Pokud je hodnota maxima větší nebo hodnota minima menší než aktuální, nahradí se, jinak zůstává hodnota původní. Tato metoda zaručuje, že pro všechny datové řady vyskytující se v grafu bude rozsah osy dostatečný a nemůže se stát, aby se vyskytla hodnota mimo rozsah osy.
Pro vytvoření os používá metoda vytvorOsy speciální metody osaPopisova a osaCiselna, viz. ukázka.
Ukázka metody osaPopisova a osaCiselna:
private function osaPopisova($osa, $datovaRada)
private function osaCiselna($osa, $maximum, $minimum)
Popisová osa se vytváří pomocí metody osaPopisova, která má dva parametry.
Prvním parametrem je směr osy, ve formátu „x“ nebo „y“, přičemž osa x je vodorovná a osa y je svislá. Druhým parametrem je datová řada, z jejíž klíčů se budou sestavovat popisy osy. Následně vytvoří popisovou osu a v případě, že je povolena, i mřížku v daném směru.
K vytvoření číselné osy slouží metoda osaCiselna. Má tři parametry. První z parametrů je stejný jako u metody pro popisovou osu a to směr osy. Další dva
hodnot určí rozsah dat číselné osy. Pro rozsah je pak zvolen vhodný krok a vytvořena číselná osa, pokud je povolena mřížka, vytvoří se i mřížka v daném směru osy.
2.5 Realizace koncových tříd grafů
A
bstraktní třídy Graf a Mřížkový Graf obsahují všechny obecné metody, které jsou potřebné pro vytváření konkrétních druhů grafů. Pro každý konkrétní druh grafu byla vytvořena třída, která je potomkem alespoň jedné z těchto tříd. Hlavním úkolem každé z koncových tříd grafu je implementovat abstraktní metodu sestavGraf definovanou v třídě Graf. Metoda sestavGraf je nepostradatelnou součástí každé z koncových tříd grafů, protože slouží pro sestavení koncové podoby grafu a vytvoření jeho kódu v SVG. Obecné schéma její činnosti probíhá následujícím způsobem.V prvním kroku jsou vypočítány meze podle metody setDataOsy ze třídy Mřížkový Graf. Následně je vygenerována hlavička a sestaveny osy a mřížka grafu. Další krok sestavení se liší podle druhu grafu, protože se v něm generují samotné elementy zobrazované v grafu (sloupce, body...). V každé třídě je pro tento krok určena speciální metoda. Jako poslední je použita metoda ze třídy Graf teloGrafu. Ta zkompletuje a uzavře tělo grafu, poté vygeneruje konečnou podobu kódu grafu.
2.5.1 Sloupcový graf
Sloupcový graf je graf, který zobrazuje zadaná data pomocí sloupců představovaných tvarem obdélníku. Třída pro sloupcový graf je definována v souboru SloupcovyGraf.php. Ke svému zobrazení vyžaduje použití os, proto je potomkem třídy Mřížkový Graf. Je vytvářen jako graf s popisovou osou x a číselnou osou y. Speciální metoda pro vytváření sloupců se jmenuje vytvorSloupce. Její princip spočívá v zjištění počtu datových řad, které rozdělí šířku sloupce na potřebný počet dílů. Pole datových řad je pak procházeno a pro každou datovou položku každé datové řady je vytvořen obdélníkový sloupec, jehož rozměry jsou určeny vypočtenou šířkou sloupce a jeho hodnotou vynásobenou krokem v pixelech na ose y. Samozřejmostí je barevné oddělení všech datových řad. Příklad vytvořeného sloupcového grafu lze vidět na obrázku Obr. 2.9.
2.5.2 Řádkový graf
Řádkový graf je graf, který se podobá grafu sloupcovému. Liší se však svou orientací os. Orientace os u řádkového grafu je opačná než u sloupcového grafu.
Znamená to, že osa x je u tohoto grafu číselná a osa y popisová. Zobrazovaná data jsou zobrazována v řádcích, představovaných obdélníky. Definice třídy grafu je uložena v souboru RadkovyGraf.php. Metoda pro vytvoření řádků se jmenuje vytvorRadky a princip funkce je následující. V prvním kroku je opět zjištěn počet datových řad jako u sloupcového grafu a následně rozdělena výška řádku na potřebný počet dílů. Poté se postupně prochází všechny datové řady položku po položce a jsou vytvářeny obdélníkové řádky s rozměry určené ve svislém směru vypočtenou výškou řádku a ve vodorovném směru datovou hodnotou položky vynásobenou krokem v pixelech na ose x. Příklad vytvořeného řádkového grafu lze vidět na obrázku Obr. 2.10.
Obr. 2.10: Řádkový graf
2.5.3 Bodový graf
Bodový graf je graf, zobrazující zadaná data jako body v rovině grafu. Třída pro bodový graf je definována v souboru BodovyGraf.php. Opět se jedná o graf vyžadující použití os. U tohoto druhu grafu se používá pro vodorovnou osu x osa popisová a pro svislou osu y osa číselná, stejně jako u sloupcového grafu. Proces vytváření bodů probíhá ve dvou fázích. V první fázi je použita metoda vytvorBody. Tato metoda prochází datové řady po jednotlivých položkách, pro každou položku vypočte její souřadnice v grafu a uloží do pomocného pole. V pomocném poli jsou souřadnice bodů ukládány opět po řadách, kde každá položka datové řady je reprezentována polem s položkami souřadnice x a souřadnice y. V druhé fázi je použita metoda nakresliBody, která projde pomocné pole s vytvořenými souřadnicemi a s jejich pomocí vytvoří požadované objekty zobrazované v grafu. Příklad vytvořeného bodového grafu lze vidět na obrázku Obr. 2.11.
Obr. 2.11: Bodový graf
2.5.4 Čárový graf
Čárový graf je graf, který zobrazuje daná data jako body pospojované pomocí čáry. Body můžou, ale nemusí být v grafu zobrazeny. Tento graf opět vyžaduje ke správnému zobrazení použití os, na vodorovné ose x je osa popisová, na svislé ose y osa číselná. Je přímým potomkem bodového grafu a definice jeho třídy je uložena v souboru CarovyGraf.php. Průběh vytváření je opět rozdělen na dvě fáze jako u bodového grafu. V první fázi je využívána metoda vytvorBody, zděděné od bodového grafu, která vytvoří pomocné pole souřadnic bodů. Práci dokončuje ve druhém kroku metoda nakresliCary. Jedná se o metodu procházející pole souřadnic bodů, vytvářející postupně pro každou řadu (pole bodů) SVG element typu polyLine, což je lomená čára. Příklad vytvořeného čárového grafu lze vidět na obrázku Obr. 2.12.
Obr. 2.12: Čárový graf
2.5.5 Oblastní graf
Oblastní graf je graf, zobrazující zadaná data jako uzavřenou křivku vymezenou body představujícími zadaná data. Graf vyžaduje použití os, na vodorovné ose x osa popisová, na svislé ose y osa číselná. Je přímým potomkem bodového grafu a definice jeho třídy je uložena v souboru OblastniGraf.php. Graf se vytváří ve dvou fázích, v první fázi je vytvořeno pole souřadnic bodů pomocí metody vytvorBody, zděděné od bodového grafu. Následně je volána metoda nakresliPolygony, která prochází postupně pole souřadnic bodů po datových řadách, vypočítá počáteční a koncový bod křivky na ose. Tyto body přidá do pole souřadnic na začátek pomocí metody array_unshift a na konec metodou array_push. Následně se pro každou řadu vytvoří SVG element polygon, což je uzavřený polygon. Příklad vytvořeného oblastního grafu lze vidět na obrázku Obr. 2.13.
2.5.6 XY Bodový graf
XY Bodový graf je graf, zobrazující zadaná data jako body v rovině grafu, jeho třída je definována v souboru XYBodovyGraf.php. Jedná se o graf vyžadující použití os. U tohoto druhu grafu se používá pro vodorovnou i pro svislou osu osa číselná. Data vstupují do tohoto druhu grafu ve tvaru asociativního pole hodnot, kde klíčem pole je hodnota na ose x a hodnotou pole je hodnota na ose y. Při sestavování grafu nejprve probíhá vymezení maximálních a minimálních hodnot. Nejprve na ose y pomocí metody setDataOsy, stejným způsobem, jako u bodového grafu. Poté na ose x metodou mezeX, která vybírá maximum a minimum z klíčů datových řad.
Následně se vytvoří pomocné pole souřadnic metodou vytvorBody a s jeho pomocí metodou nakresliBody požadované objekty zobrazované v grafu. Příklad vytvořeného xy bodového grafu lze vidět na obrázku Obr. 2.14.
Obr. 2.14: XY Bodový graf
2.5.7 XY Čárový graf
XY Čárový graf je graf, který zobrazuje daná data jako body pospojované pomocí čáry. Body můžou, ale nemusí být v grafu zobrazeny. Ke správnému zobrazení jsou třeba osy, přičemž osy v obou směrech jsou číselné. Je přímým potomkem xy bodového grafu a definice jeho třídy je uložena v souboru XYCarovyGraf.php. Jeho tvorba probíhá podobně jako u jeho rodiče xy bodového grafu. Nejprve se vypočítají maxima a minima na osách. Pak se vygeneruje pomocné pole souřadnic bodů. Nakonec se z tohoto pole vytvoří SVG prvek polyLine, který představuje lomenou čáru. Příklad vytvořeného xy čárového grafu lze vidět na obrázku Obr. 2.15.
Obr. 2.15: XY Čárový graf
2.5.8 XY Oblastní graf
XY Oblastní graf je graf, zobrazující zadaná data jako uzavřenou křivku vymezenou body představujícími zadaná data. Je to poslední z druhů grafů, jenž využívá osy. U tohoto druhu grafu se používá pro vodorovnou i pro svislou osu osa číselná, tak jako u předchozích dvou. Je přímým potomkem xy bodového grafu a definice jeho třídy je uložena v souboru XYOblastniGraf.php. Graf se vytváří ve dvou fázích, v první fázi se určují maxima a minima na osách, pak je vytvořeno pole souřadnic bodů pomocí metody vytvorBody, zděděné od xy bodového grafu. Následně je volána metoda nakresliPolygony, která prochází postupně pole souřadnic bodů po datových řadách. Vypočítá počáteční a koncový bod křivky na ose. Tyto body přidá na začátek a konec pole souřadnic, přičemž následně pro každou řadu vytvoří SVG element polygon, představující uzavřený polygon. Příklad vytvořeného xy oblastního grafu lze vidět na obrázku Obr. 2.16.
Obr. 2.16: XY Oblastní graf
2.5.9 Koláčový graf
Koláčový graf je graf, zobrazující zadaná data pomocí kruhových výsečí úměrných jejich velikosti v kruhu. Jako jediný druh z definovaných grafů nevyužívá osy. Je potomkem třídy Graf a jeho třída je definována v souboru KolacovyGraf.php.
Postup jeho konstrukce je následující. Na začátku je vybrána datová řada, která je předána metodě kolac. Z počtu položek a součtu hodnot je vypočítána průměrná hodnota na jeden stupeň. Poté je procházena postupně datová řada položku po položce a pro každou hodnotu vygenerována kruhová výseč odpovídající hodnotě dat představovaná SVG elementem pieArc. Nakonec je vždy ještě sestavena legenda, z důvodu lepší orientace v grafu. Příklad vytvořeného koláčového grafu lze vidět na obrázku Obr. 2.17.
Obr. 2.17: Koláčový graf
2.6 Html5Grafy
Pro snadnější přístup při tvorbě grafů byla vytvořena třída Html5Grafy. Tato třída slouží jako jednotný přístupový bod pro vytváření všech druhů grafů. Je to statická třída, která slučuje všechny jednotlivé třídy grafů a dovoluje je vytvářet z jednoho místa. Využívá se zde návrhový vzor Tovární metoda. Možnosti vytvoření grafu jsou dvě. První možnost, kdy se graf vytvoří pomocí statické metody vytvorGraf očekávající ve svém parametru požadovaný druh grafu, viz. ukázka. Druhá možnost, pomocí jedné ze statických metod definovaných přímo pro požadovaný druh grafu.
Ukázka metoda vytvorGraf:
static public function vytvorGraf($druh) { switch ($druh) {
case "bodovy": return Html5Grafy::bodovyGraf();
case "carovy": return Html5Grafy::carovyGraf();
...
} }
2.7 Jednoduchý manuál knihovny
Následující text by měl sloužit jako jednoduchý uživatelský manuál při používání vytvořené knihovny grafů. Na začátku je popsán princip přidání knihovny do aplikace, vytvoření grafu, vložení hodnot do grafu a získání kódu grafu. Dále je popsána možnost měnit graf pomocí jednoduchých nastavovacích příkazů.
Přidat knihovnu grafů do aplikace je poměrně jednoduchá operace. Stačí nakopírovat na nějaké viditelné místo na serveru celou složku knihovny (na přiloženém CD složka grafy_v1). Poté includovat do php skriptu soubor Html5Grafy.php, umístěný přímo ve složce grafy_v1, který slouží jako jednotný přístupový bod do knihovny.
Tím je zajištěno, že lze knihovnu bez problému používat.
Po includování souboru Html5Grafy.php do aplikace k němu lze přistupovat jako ke statické třídě pomocí Html5Grafy::, viz. ukázka vytvoření grafu.
Ukázka vytvoření grafu:
$graf = Html5Grafy::vytvorGraf('sloupcovy');
$graf = Html5Grafy::sloupcovyGraf();
Pro vytvoření grafu lze využít jednu z výše uvedených možností. První možností je využití metody vytvorGraf, druhou možností pak vytvoření metodou odpovídající přímo druhu požadovaného grafu. Více podrobností v dokumentaci na přiloženém CD.
Ukázka vložení datové řady do vytvořeného grafu:
$rada = array('led'=>2, 'uno'=>7, 'bre'=>-3, 'dub'=>5);
$graf->pridejRadu($rada);
Vložení datové řady probíhá pomocí metody pridejRadu, která očekává jako parametr pole, kde klíčem pole může být řetězec nebo číslo a hodnota, která je vždy číselná.
Ukázka získání kódu grafu:
$graf->getKodGrafu();
Kód vytvořeného grafu lze získat pomocí metody getKodGrafu, která vrací vygenerovaný kód grafu v textové podobě, viz. ukázka získání kódu grafu.
Po vytvoření grafu lze jednoduše měnit některá jeho nastavení. Nejdůležitější a nejběžnější hodnoty, které lze nastavovat jsou přístupné pomocí veřejných metod třídy Graf. Jsou to zejména nastavení rozlišení grafu, názvu grafu, zobrazení legendy a zobrazení mřížky, viz ukázka veřejně přístupných nastavení.
Ukázka veřejně přístupných nastavení:
$graf->setWidth(640)->setHeight(480);
$graf->setNazevGrafu("Název grafu");
$graf->setLegendaEnable();
$graf->setMrizkaEnable();
Druhou možností, jak měnit nastavení většiny nastavitelných hodnot v grafu, je použití metody vlozNastaveni, která očekává jako parametr pole obsahující změny nastavitelných hodnot, viz. ukázka nastavení pomocí vlozNastaveni. Obsah pole je uložen a uplatňuje se před generováním výstupního kódu grafu. Více o možnostech co a jak nastavovat viz. dokumentace na přiloženém CD.
Ukázka nastavení pomocí vlozNastaveni:
$nastaveni=array('nazevGrafu'=>“Graf“, 'mrizkaEnable'=>false);
$graf->vlozNastaveni($nastaveni);
2.8 Dokumentace knihovny
Dokumentace knihovny popisuje význam a obsah všech tříd a metod této knihovny. Je vygenerovaná pomocí programu phpDocumentor verze 1.4.4 z dokumentačních komentářů obsažených v knihovně. Jsou zde zdokumentovány kompletní API celé knihovny. Dokumentace je dostupná na přiloženém CD ve složce dokumentace.
3. Použití knihovny ve zkušební aplikaci
3.1 Struktura zkušební aplikace
Pro otestování správné funkčnosti knihovny grafů byla vytvořena zkušební aplikace, která zároveň slouží i jako příklad pro použití knihovny grafů v reálné aplikaci. Zkušební aplikace byla rozdělena na dvě hlavní části. Je to část pro tvorbu grafu a část pro zobrazení již uloženého grafu viz. Obr. 3.1.
Obr. 3.1: Struktura zkušební aplikace
Část aplikace, která se stará o tvorbu grafu se zabývá vytvářením nových grafů ze zadávaných dat a editaci již existujících grafů pomocí interaktivního formuláře. Část aplikace, která se stará o zobrazení existujícího grafu vytváří a načítá existující grafy.
Většina operací prováděných v aplikaci je interaktivních a používá techniku asynchronního načítání bez zpětného načtení celé stránky AJAX. Pro tuto techniku je nezbytně nutné použití jazyka JavaScript, který je v aplikaci reprezentován pomocí javascriptové knihovny jQuery (www.jquery.com) a jejích zásuvných modulů.
K ukládání dat bylo zvoleno úložiště na straně klienta localStorage, které ukládá data v párech klíč-hodnota podle domény a uchovává je mezi jednotlivými relacemi v prohlížeči. Z důvodu toho, že data uložená v localStorage prohlížeče lze vidět pouze v prohlížeči, kde byl graf vytvořen a nebylo by možné graf zobrazit v jiném prohlížeči nebo na jiném počítači, bylo nutné vyřešit tento problém zálohou dat v databázi na serveru. Schéma aplikace lze vidět na obrázku Obr. 3.2 na předchozí straně. Všechny zdrojové kódy zkušební aplikace jsou k dispozici na přiloženém CD.
3.2 Tvorba a editace grafu
Z důvodu usnadnění vytváření nových grafů byl vytvořen interaktivní formulář pro tvorbu grafů ze zadaných dat, viz. Obr. 3.3, na následující straně. Jako zdroj dat byl zvolen vstup ze souboru XML. Tento soubor je validován podle XSD šablony uložené v souboru graf_data_schema.xsd a musí být ve formátu viz. ukázka datového souboru.
Ukázka datového souboru:
<?xml version="1.0" encoding="UTF-8"?>
<graf>
<rada nazev="rada1">
<bod>
<klic>led</klic>
<hodnota>1</hodnota>
</bod>
</rada>
...
</graf>
Obr. 3.3: Formulář pro načtení souboru
Jako kořenový prvek je vždy v souboru prvek <graf>, který obsahuje jeden nebo více prvků <rada> s nepovinným atributem nazev. Prvek <rada> musí obsahovat alespoň jeden prvek <bod>, obsahující sekvenci prvků <klic> a <hodnota>. Prvek
<klic> musí obsahovat hodnotu textovou a prvek <hodnota> hodnotu číselnou.
Soubor je načítán asynchronně na server pomocí zásuvného modelu knihovny jQuery, jQuery.upload (http://archive.plugins.jquery.com/project/jquery-upload).
Po načtení je soubor zpracován na serveru XML čtečkou viz. kapitola 3.2.1. Zpracovaná data jsou poslána zpět prohlížeči, který podle nich vytvoří formulář pro nastavení grafu viz. Obr. 3.4, na kterém je možno upravit důležité hodnoty pro zobrazení grafu.
Formulářem pro nastavení grafu lze nastavovat důležité hodnoty pro zobrazení grafu. Za prvé je to druh grafu, kde lze vybrat požadovaný druh grafu z knihovny.
Dále šířka a výška, kterými se udává rozlišení při zobrazení grafu a zobrazovaný název grafu. Pomocí zaškrtávacích polí lze také nastavit viditelnost mřížky a legendy.
Následuje výběr barvy, zvlášť pro každou načtenou datovou řadu. Pro výběr barvy je použit zásuvný modul knihovny jQuery, jQuery SimpleColor (http://recursive-design.com/projects/jquery-simple-color/). Posledními možnostmi nastavení je rozsah zobrazených dat, který udává, kolik datových hodnot z celkového počtu načtených hodnot bude zobrazeno při zobrazení grafu a krok udává, po kolika hodnotách se bude posouvat graf při interaktivní funkci posun po ose x, viz. kapitola 3.3.1. Následně lze graf uložit pomocí tlačítka Ulož graf. Pro uložení grafu se používá úložiště na straně klienta localStorage. Do tohoto úložiště jsou uloženy datové řady s hodnotami nastavení získanými při zpracování formuláře. Jelikož většina prohlížečů implementuje úložiště localStorage jako textové, jsou data před uložením zpracována metodou JSON.stringify, která vrací data uložená jako formát JSON, což je čistě textová podoba. Data jsou zároveň ukládána také jako záloha v databázi na serveru. Ukládání v databázi na serveru je vynuceno tím, že data uložená pomocí localStorage jsou viditelná jen v prohlížeči, kde byl graf vytvořen a nebylo by možné graf zobrazit na jiném počítači nebo v jiném prohlížeči. Grafy jsou ukládány pod jedinečným id, které slouží pro jejich zpětnou editaci nebo zobrazení.
Editovat vytvořený graf lze pomocí vybrání přepínacího tlačítka editace existujícího grafu. Po jeho vybrání se zobrazí rolovací tlačítko Graf, pomocí něhož se vybírá graf, který chceme editovat, viz. Obr. 3.5.
Obr. 3.5: Editace existujícího grafu
Po vybrání grafu z nabídky se načtou z localStorage data uložená pod jeho id.
Následně se s nimi provede metoda JSON.parse, která převede textovou reprezentaci dat na objektovou reprezentaci dat v JavaScriptu. Poté se postupně sestaví formulář pro editaci, kam se dosadí hodnoty dříve uložených dat. Formulář pro editaci vypadá podobně jako formulář pro ukládání grafu, viz. Obr. 3.4. Liší se tím, že je v něm povoleno tlačítko pro uložení změn nastavení uloženého grafu, tlačítko pro zobrazení náhledu grafu a tlačítko pro smazání uloženého grafu.
Použití formuláře pro tvorbu a editaci grafů v aplikaci je velmi jednoduché.
Tento formulář je načítán ze serveru pomocí AJAXového dotazu, kódem z následující ukázky. Kód je v těle stránky rozpoznán a nahrazen kódem formuláře vráceným ze serveru.
Ukázka kódu pro vložení formuláře do stránky:
<graf akce="vytvareni_grafu"></graf>
Kód se skládá z elementu graf a atributu akce, který má nastavenou hodnotu na vytvareni_grafu. Pro správnou funkci musí být zajištěno vložení následujících skriptů do hlavičky stránky, na které má být formulář zobrazen. Jedná se o skript s knihovnou jQuery, její modul pro upload souborů a modul pro výběr barev. Posledním je skript, který se stará o načtení a obsluhu formuláře. Všechny potřebné skripty jsou dostupné na přiloženém CD.
<script type="text/javascript" src="./javaScript/jquery-1.7.2.js"></script>
<script type="text/javascript" src="./javaScript/jquery.upload-1.0.2"> </script>
<script type="text/javascript" src="./javaScript/jquery.simple-color.min"></script>
<script type="text/javascript" src="./javaScript/nacitani_formulare.js" ></script>
3.2.1 Čtečka XML souborů
Jelikož bylo zvoleno, že zdrojem dat pro tvorbu grafů budou XML soubory, bylo zapotřebí vytvořit jednoduchou čtečku XML souborů. Čtečka byla implementována jako
se CteckaXml a je definovaná v souboru CteckaXml.php. Při vytváření instance třídy CteckaXml se očekává jako parametr obsah uploadovaného XML souboru s daty pro vytvoření grafu. Následně je vytvořena instance třídy DOMDocument a XML dokument je validován oproti XSD schématu uloženém v souboru graf_data_schema.xsd. Pokud je dokument validní, jsou jednotlivé datové položky ukládány do pole dat. Data lze získat pomocí metody getXmlData(), která vrací výsledné pole dat získaných z XML dokumentu nebo pomocí metody getJsonData(), která vrací výsledné pole dat jako reprezentaci ve formátu JSON. Protože se data ukládají v prohlížeči ve formátu JSON, používá se v případě zkušební aplikace metoda getJsonData().
3.3 Zobrazení grafu
Po uložení grafu ho lze snadno zobrazit na internetové stránce. Graf je na stránku vložen pomocí AJAXového dotazu na server. Dotaz se na serveru vyhodnotí a z dodaných dat je pomocí knihovny vytvořen zdrojový kód grafu v SVG. Zdrojový kód grafu je poté vložen na určené místo do těla stránky. Pro zobrazování grafu na stránce se používá jednoduchý kód z následující ukázky, který je později nahrazen kódem grafu.
Ukázka kódu pro zobrazení grafu:
<graf akce="kresleni_grafu" id="graf1"></graf>
Kód pro zobrazení grafu se skládá z elementu graf, který má přiřazen atribut akce s hodnotou kresleni_grafu a atribut id udávající id zobrazovaného grafu.
Pro správnou funkci musí být zajištěno vložení následujících skriptů do hlavičky stránky, na které má být graf zobrazen. Jedná se o skript s knihovnou jQuery a skript, který se stará o načtení a obsluhu grafu. Všechny potřebné skripty jsou dostupné na přiloženém CD.
<script type="text/javascript" src="./javaScript/jquery-1.7.2.js"></script>
<script type="text/javascript" src="./javaScript/nacitani_grafu.js"></script>
3.3.1 Interaktivní akce grafu
Poté co je kód grafu přidán do stránky jsou mu přiřazeny interaktivní akce. Tyto akce jsou definovány ve skriptu pro načítání grafu nacitani_grafu.js. Jedná se o bublinovou nápovědu, která zobrazuje podrobnosti o jednotlivých prvcích grafu, když na nich nastane událost hover. Ukázku lze vidět na Obr. 3.6.
Obr. 3.6: Bublinová nápověda
Další interaktivní akce lze provádět pomocí tlačítek, která se objeví po najetí myši nad graf viz. Obr 3.7. Je to možnost zoomování grafu, pomocí tlačítek zoom+
a zoom- nebo posun po ose x, který lze nastavit pomocí formuláře pro tvorbu a nastavení grafu.
Zoomování části grafu se provádí pomocí SVG elementu clipPath a transformace zvětšení. Tento element obsahuje tvar, který definuje polohu a tvar výřezu SVG obrázku. V našem případě je to kruhový výřez definovaný SVG elementem circle. Celá akce zoomování začíná po kliknutí myši do oblasti zobrazeného grafu, viz. Obr 3.8.
Je pořízen výřez definovaný v SVG elementu clipPath. Na pořízený výřez je uplatněna transformace zvětšení a je přesunut na souřadnice, kde bylo kliknuto. Velikost zvětšení lze měnit pomocí tlačítek zoom+, zoom- nebo zoom vypnout pomocí vypni zoom, viz. obrázek Obr. 3.7.
Obr. 3.8: Zoomování části grafu
4. Porovnání s existujícími knihovnami
V dnešní době existuje mnoho knihoven pro tvorbu grafu na webu. Následuje krátké porovnání vybraných knihoven s knihovnou vytvořenou v této diplomové práci.
Knihovna Elycharts je knihovna používající pro vytvoření kódu grafu JavaScript.
Jedná se o knihovnu podporující SVG a VML, přičemž využívá pro svůj běh knihovnu RaphaelJS, což je javascriptová knihovna pro tvorbu interaktivní vektorové grafiky a knihovnu jQuery. Obsahuje rozsáhlou řadu druhů grafů s interaktivními prvky a možností animací. Poslední vydanou verzí je verze 2.1.3 z prosince 2010, dostupná pod MIT licencí na stránce (www.elycharts.com/).
PlotKit je smíšená javascriptová knihovna podporující základní druhy grafů, která používá SVG a Canvas. Poslední vydaná verze je již zastaralá, je to verze 0.9.1 vydaná 29.srpna 2006 pod licencí BSD. Více o knihovně PlotKit se lze dozvědět na stránce (www.liquidx.net/plotkit).
Hlavním rozdílem oproti knihovně vytvořené v této diplomové práci je fakt, že obě jmenované knihovny jsou postaveny pro běh pomocí javascriptu na klientské straně. Na rozdíl od knihovny grafů vytvořené v této práci, která pracuje a generuje grafy pomocí jazyka PHP na straně serveru a javascript využívá pouze pro interaktivní akce a asynchronní načítání grafů. Nabízená škála grafů je ve srovnání s knihovnou PlotKit podobná, knihovna Elycharts nabízí o něco širší nabídku.
Mezi knihovny pracující pomocí PHP na straně serveru patří například knihovna gChartPhp (https://github.com/pacbard/gChartPhp) nebo knihovna SVGGraph (http://www.goat1000.com/svggraph.php). Obě tyto knihovny i knihovna vytvořená v této práci jsou založeny na použití PHP pro generování kódu grafu ze zadaných dat pomocí pole hodnot. Knihovny slouží podle návodu spíše jako generátory statických grafů zobrazovaných pomocí odkazu na pevně vytvořený php soubor s definicí vytvořeného grafu, viz. příklady použití knihoven na dříve uvedených webových stránkách. Na rozdíl od knihovny vytvořené v této práci, která vytváří a zobrazuje kód grafu asynchronně pomocí knihovny jQuery, takže data i nastavení lze bezproblémově měnit během provozu bez potřeby přepisování zdrojového kódu vytvořeného grafu.
vybrané knihovny poměrně liší, základní druhy grafů a nastavení jsou však pro všechny jmenované knihovny podobné. Další rozdíl je v podpoře interaktivních funkcí, kde první dvě knihovny podporují pouze bublinovou nápovědu a knihovna vytvořená v této práci přidává navíc ještě procházení grafu po ose x a možnosti pro přiblížení části grafu.
