Tímto oficiálně představuji své další dítko, tentokrát flashový generátor sloupcových grafů — Vector Graph 1.0. Prozatím v jakési rané verzi, ještě toho moc neumí, ale to se časem bude zlepšovat. Už se pracuje na vyšší verzi ;-). Nejprve si prohlédněte, jak to celé vypadá:
Jak to funguje
Stáhnete si flashový swf soubor, kterému pomocí XML souboru předáte data, týkající se grafu, který chcete vykreslit. Flash si stáhne onen XML soubor, naháže ho do automatu a vyhodí vám graf. Co všechno si můžete nastavit? Prozatím toho moc není, ale již ve verzi 1.0 umí Vector Graph:
- Nastavit až pět nezávislých grafů do jedné obrazovky (ale musí mít stejnou ypsilonovou osu). Mezi jednotlivými grafy je možné se přepínat pomocí záložek umístěným vlevo dole. Vše je doprovázeno jednoduchou animací.
- Nastavit mezní hodnoty pro ypsilonovou osu (tedy začátek a konec).
- V jednom grafu může být až sedm různých sloupečků. Pochopitelně s jinými hodnotami a různě pojmenované.
- Můžete si pojmenovat graf.
Dokumentace
Na XML soubor se odkážete pomocí proměnné zdroj ve chvíli,
kdy v HTML vkládáte flashový soubor do stránky. Příklad:
<param name="movie" value="grafy.swf?zdroj=pokus.xml"
/>
Tento příkaz odkazuje na soubor grafy.swf a předává
proměnnou zdroj. Tato proměnná obsahuje název XML souboru,
který bude později načten. To je k načítání XML souboru asi všechno,
dávejte případně pozor na to, ať máte správně zadanou cestu.
XML soubor musí být uložen v UTF kódování. Struktura XML souboru je následující:
<grafy max="100" min="0" nazev="Podíl prohlížečů">
<graf nazev="2007">
<sloupec nazev="Firefox">30</sloupec>
<sloupec nazev="Opera">10</sloupec>
<sloupec nazev="MSIE">55</sloupec>
<sloupec nazev="safari">5</sloupec>
</graf>
<graf nazev="2006">
<sloupec nazev="Firefox">25</sloupec>
<sloupec nazev="Opera">5</sloupec>
<sloupec nazev="MSIE">70</sloupec>
</graf>
</grafy>
Jako první musí být kořenový element grafy, který má tři
atributy. První je max, což je maximální hodnota na ypsilonové
ose. Atribut min je logicky minimální, spodní hodnota.
V atributu nazev se skrývá obecný název celého seskupení
grafů. Vevnitř tohoto elementu se pak nachází jednotlivé dílčí grafy, a
to v elementu graf. Ten má pouze jeden atribut
nazev. Tento atribut se zobrazí dole jako záložka. V tomto
elementu se poté nachází samotné sloupečky grafu. V atributu
nazev můžete opět specifikovat popis sloupečku a do těla
elementu pak patří číselná hodnota položky. Pokud chcete více
souběžných grafů, dejte je prostě za sebou, jako obsah elementu
grafy. To je asi tak vše.
Co je v plánu
Tohle je samozřejmě příliš skromné, takže do budoucna jsou v plánu tyto věci:
- Trochu hezčí grafický kabát. Tohle jsem zbastlil sám, podle toho to taky vypadá.
- Větší možnosti nastavení: například jestli se má číslo ukazující hodnotu sloupečku ukázat až po animaci nebo už před ní, možnost zapnout/vypnout animaci.
- Každý graf by mohl mít svou vlastní ypsilonovu osu.
- Více barevných provedení, zelenočervená nemusí ladit ke každému webu.
- Více typů grafů.
Chcete si to vyzkoušet?
Stačí si stáhnout swf soubor a už můžete pracovat.
Muflo · 19. červenec 2008, 02:43 · #
Pěkné :). Tak trochu mě to pobízí k opětovnému nahlédnutí flashe a actionscriptu. Nevím co se za posledních pár let všechno změnilo, ale předpokládám, že základ je stejný.
Jinak jako ideální graf vidím generovaný např. pomocí PHP a cacheovaný. Nikdy si nemůžete být 100% jisti, že uživatel má plugin flash nainstalovaný.
Nejlepší kombinace je asi zobrazovat graf pomocí flashe a v případě, že uživatel nemá nainstalován flash, zobrazovat graf pomocí obrázku.
tiso · 19. červenec 2008, 22:22 · #
Pre inšpiráciu:
http://shemesh.axspace.com/…ataTipItems/
via http://shemesh.wordpress.com/…he-easy-way/