Súgó
A mértékegység a képpont, pixel. Széltében és magasságában is legfeljebb 1000 pixel lehet a kért kép és a területe (szélesség × magasság) nem lehet több 300 000-nél. Így a maximális méretek közül néhány példa: 1000x300, 500x600, 800x375, stb.
Diagramtípusok
Ez a program azért is nagyon jó, mert többféle diagrammot is csinálhatunk vele. Leírom, hogy milyeneket, és főleg, hogy melyiknél milyen az adatsorok formátuma.
Vonalas diagram
Itt, mint az ábrán is látható, de akár több adatsorral is egy érték folyamatos változását jelölhetjük.
Az adatsorok feldolgozása: Minden adatsor egy-egy vonalat képez. Az adatsor minden egyes értéke balról-jobbra az adott pont Y-koordinátájának értékét határozza meg. Ezek az értékek az X-tengely mentén egyenletesen fognak eloszlani.
|
Egyszerű vonalas grafikon
|
Koordinátás vonalas diagram
Sokban hasonlít az előzőre, de itt a vonalak tetszőleges pontjának adhatjuk meg koordinátáit.
Az adatsorok feldolgozása: A koordinátákat a következőképpen adjuk meg: a páratlan adatsor az X-koordináta, a páros az Y. Tehát, ha a [5;10] [20;30] [25;35] koordináták érintésével akarunk egy vonalat rajzolni, akkor ilyen az adatsor (szöveges kódolással): 5.0,20.0,25.0|10.0,30.0,35.0
|
Koordinátás-vonalas grafikon
|
Sávos grafikonok
A sávos grafikonoknál értékeket lehet összahasonlítani. A felosztott sávos grafikonnál a különböző adatsorok adatai egy sávon vannak, így a különböző sávok összesített értékét lehet jól összehasonlítani. A külön-külön sávosnál az adatsorok csoportosítva vannak egymás mellett, az esetleges többi adathalmaztól elkülönítve.
Az adatok megadás hasonlít a vonalas grafikonokhoz. Az adatsoron belül az értékek az egyes sávok, illetve sávrészletek méretét jelölik, az opcionális halmazok pedig a különböző sávokat a felosztott sávos és a különböző sávcsoportokat a külön-külön sávos grafikonoknál. Egy példa: HELLO,World.
|
HELLO,World, A diagram színei: ff0000,0000ff
Ugyanez külön-külön grafikontípussal
|
Tortadiagram
A tortadiagram egy kör, amit az adatok arányában a program több részletre oszt. Az adatok megadása egyszerű, ez a típus ugyanis csak egy adatsort enged meg. Ennek az értékeinek arányában fogja felosztani a program a tortát szeletekre.
|
Tortadiagram
|
Venn-diagram
Ebben a diagramban a halmazoknak a számosságát és az átfedéseket tudjuk ábrázolni. Itt is csak egy adatsort kel megadnunk, ahol:
- Az első három érték az A, B és C halmazok relatív mérete,
- a 4. érték A metszet B,
- a 5. érték B metszet C,
- a 6. érték A metszet C,
- a 7. érték A metszet B metszet C számossága.
|
Venn-diagram
|
Pontdiagram
Ez a diagramtípus arra jó, hogy több paraméter esetén azok egymáshoz viszonyított eloszlását nézzük. Itt egy példa: A Yellowstone nemzeti parkban az Old Faithful gejzír időnként kitör. Van, hogy többet kell rá várni, van, hogy kevesebbet. Van, hogy jobban kitör, van, hogy kevésbé. Ha ezeket az adatokat csoportosítjuk, párosítjuk, akkor a jobboldalt látható diagrammot kaphatjuk.
Az ábrából arra lehet következtetni, hogy kétfajta kitöréstípus van:
- Kisebb kitörés kevesebb várakozási idővel
- Nagyobb kitörés, de többet kell rá várni
Itt már bonyolultabb a pontok koordinátáinak és tulajdonságainak meghatározása: Pontosabban a koordináták még egyszerűek. Az első adatsor elemei határozzák meg az X koordinátákat, a második adatsoré pedig az Y koordinátákat.
A pontok színét úgy módosítod, hogy bekapcsolod a Vizuális jelölések az ábrán opciót és az ott leírtak alapján egy elemet definiálsz, ez fogja meghatározni a pontok alakját, színét, maximális méretét. Miért a maximálisat? Mert, ha az adatoknál egy harmadik adatsort definiálsz, akkor arra egy arányszámként tekintve lesz meghatározva az adtott pont mérete. Egy egyszerű példa:
- Típus:
Pontdiagram
- Adatok (
Számos (t:) kódolás): 30,60|30,60|100,50
- Vizuális jelölések:
x,ff0000,0,0,25
|
Pontdiagram: Az Old Faithful gejzír.
|
Adatok a grafikonokban
Itt a Google háromféleképpen engedi megadni az adatokat, amikkel a grafikon dolgozik. Mint minden adatot, ezeket is a kép URL-jében egy paraméterként kell megadni.
A következő kódolások léteznek:
Szimpla (simple)
A karakterek értéke a következőképpen alakul: A=0 B=1 C=2 ... a=26 b=27 c=28 ... 0=52 ... 9=61 Hiányzó érték=aláhúzásjel (_).
Egy érékhalmazban az értékeket csak írd egymás mellé. Több értékhalmazt vesszővel (,) tudunk elválasztani. A helloWorld,SziaPalotasB halmazcsoport így néz ki (a színezésről majd később):
Itt tehát 62 értékkel tudjuk kifejezni a grafikon adatait. Ha ennél nagyobb pontosságra, esetleg egyszerűbb áttekinthetőségre van szükségünk, akkor nézzük meg a másik kettő adatkódolást. Előnye viszont, hogy szépen röviden kifejezhetjük az értékeket.
Számos (text az eredeti verzióban)
Ebben a kódolásban a legegyszerűbben átlátható az értékek viszonya, itt ugyanis a 10-es számrendszerbeli értéket kell beírni.
1000 különböző érték van. 0.0-tól 100.0-ig. Itt halmazon belül kell az értékeket vesszővel (,) elválasztani, a halmazokat pedig a pipe/függőleges vonal karakterrel (|).
Ezzel nagyobb átláthatósággal és pontossággal dolgozhatunk. Ja igen, a hiányzó értékek helyett írjunk -1-et.
A 7.0,15.0,20.0,22.5,23.0|10.0,20.0,30.0,40.0,50.0 halmaz:
Kibővített (extended)
Ezt tényleg csak a nagyobb precizitás miatt érdemes használni. Itt kettő (2) karakter jelöl egy számértéket, ami sokkal nagyobb pontossággal enged dolgozni.
AA=0, AZ=25, Aa=26, Az=51, A0=52, A9=61, A-=62, A.=63
BA=64, BZ=89, Ba=90, Bz=115, B0=116, B9=125, B-=126, B.=127
.A=4032, .Z=4057, .a=4058, .z=4083, .0=4084, .9=4093, .-=4094, ..=4095
Mint láthatod, itt a számrendszer a következőkkel bővült: -és.
A hiányzó értéket kettő (2) aláhúzással jelöld: __.
A halmazokat a függőleges vonal/pipe karekterrel (|) lehet elválasztani, azokon belül viszont a fix két karakteres "számszélesség" miatt nincs szükség az értékek szeparálásra.
Példa: AADDIIMMSSWW,aaddiimmssww
Több koordinátatengelyleírás
Bizonyos grafikonoknál a koordinátatengelyekhez helyezhetünk leírásokat. Leírom, hogy hogyan lehet ezeket testreszabni.
Koordinátatengely-leírások helye
Ez azt határozza meg, hogy mely oldalakon lesznek leírások a koordinátatengelyen. Egy oldalon több is lehet. Az oldalak kódját vesszővel elválasztva kell beírni. Az adott leírás indexe (alias koordinátatengely-leírás index) az itt megadott felsorolásban elfoglalt hely minusz 1. Tehát az elsőnek az indexe 0. A lehetséges helyek:
x: Alsó x tengely mentény: Baloldali y tengely menténr: Jobboldali y tengely mentént: Felső x tengely mentén
Egy példa: x,y,t,x. Ez egy ilyet eredményez:
Koordinátatengely-leírások szövegei
Itt egy kicsit bonyolultabb a szintaxis:
<koordinátatengely-leírás index>:|<A hozzátartozó szöveg 1>|<A hozzátartozó szöveg 2>|...|<A hozzátartozó szöveg n>| ... és ez ismétlődik, itt egy példa:- Leírások helye:
x,y; Leírások szövege: 0:|X első|X második|X harmadik|1:|Y első|Y második
Ha azt akarod, hogy itt számok legyenek, akkor megteheted, hogy bepötyögöd őket, de jobb megoldás ezt üresen hagyni és a számtartományokat kalibrálni.
Koordinátatengely-leírások pozicionálása
Ezzel az opcióval azt érhetjük el, hogy a tengelyek mentén a leírások ne egyenletesen helyezkedjenek el, hanem általunk definiált pozíciókban legyenek. Használat:
<~tengelyleírás-index>,<1. leírás pozíció>,<2. leírás pozíció>,...,<n. leírás pozíció>|, aztán a többit a | karakterrel elválasztva ugyanígy- És ez ismételhető. Példa:
- Leírások:
x,y
- Leírások szövege:
0:|A|F|...|Z|1:|Min|Átlag|Max
- Leírások pozíciója:
0,0,20,70,100|1,0,40,100
A koordinátatengely-leírások számtartományának megadása
Ez akkor hasznos, ha a számokat akarunk a leíráshoz megadni, de ezek nem 0-tól 100-ig terjednek és nem a leíráshoz akarjuk beötyögni őket, hanem automatizálni szeretnék ezt a folyamatot. A szintaxis a következő:
<~tengelyleírás index>,<Minimum érték>,<Maximum érték>, aztán a többit a | karakterrel elválasztva ugyanígy- Itt egy példa:
- Leírások pozíciói:
x,y
- Leírások szövegei: Üresen hagyjuk
- Leírások tartománya:
0,0,500|1,300,350
Koordinátatengely-leírások egyéni stílusa
Mindent a szemnek. A leírásoknál beállíthatod a betű színét, méretét és a szöveg igazítását (tudod, balra, jobbra, középre). A szintaxis a következő:
<~tengelyleírás index>,<betűszín* >,<betűméret>,<szöveg igazítása** >, majd | karakterekkel elválasztva ugyanez ismételhető- Az igazítás, vagy az igazítás és a betűméret opcionális, elhagyható
- Következzék a példa:
- Két tengelynél van leírás, a formázás pedig a következő:
0,008000|1,0000ff,8,1
* Erről lásd a színekről szóló súgót
** Szöveg igazítása: -1: balra igazítás, 0: középre igazítás, 1: jobbra igazítás
Sávok testreszabása
Sávos diagram esetén meg lehet adni, hogy a sávok állandó mérete (vertikális esetén a szélessége, horizontális esetén a magassága) mekkora legyen és, hogy a sávok között mennyi szabad terület legyen. Itt van két példa, ahol csak ezek az értékek különböznek.
Rácsozás
A diagram hátterén akár rácsozást is elhelyezhetünk ami által az adatok szemmel könnyebben áttekinthetők. Vagy nem. Lényeg, hogy lehet rácsozni. Így:
<rácsvonalak horizontális távolsága>,<rácsvonalak vertikális távolsága>,<szaggatott rácsvonal hossza>,<szaggatott rácsvonalak közt rés>- Az utolsó kettő mező opcionális, ekkor helyettük az alapbeállítás, az
<általad megadott rácstávolság>,5,5 lesz alkalmazva.
- Nézzünk néhány példát:
10,10:
10,10,2,2:
10,10,10,0: A folyamatos vonal a nulla szaggatott résszel érhető el.
Vizuális jelölések az ábrán
Ha egy ábra egy vagy több pontját ki akarjuk emelni, akkor azt is megtehetjük a vonalas típusú diagrammoknál. (Továbbá ezt az opciót kell használni akkor is, ha a pontdiagramm pontjait akarjuk formázni.) A szintaxis a következő:
<Forma>,<Szín>,<Adatsor index>,<Adatpont>,>Méret< ... és innentől a már megszokott | karakterrel elválasztva ez ismételhető. Most következzenek a részletek:-
A formák:
a: nyílc: keresztd: rombusz (sarkán álló négyzet)o: körs: négyzetv: függőleges vonal az X tengelytől az adatpontigV: függőleges vonal az adatpontot érintve a grafikon tetejétől az aljáigx: X alakú iksz.
- A szín az itt normál módon megadva (lásd az erről szóló külön súgórészt)
- Adatsor index: az, hogy melyik vonalra kerüljön a jelölő.
0=első vonal, 1=második vonal, és így tovább
- Adatpont: ez egy lebegőpontos (tizedesjegyekkel rendelkező) szám, azt mondja meg, hogy az adatdoron [megintcsak] nulladiktól kezdődően hova kerüljön a jelölő. A tizedesjegyekkel az értékek közé helyezheted a jelölőt.
- Méret: Mekkora legyen az adott forma, jelölő
Itt a következő példában az összeset bemutatom:
c,FF0000,0,1.0,20.0|
d,80C65A,0,2.0,20.0|
a,990066,0,3.0,9.0|
o,FF9900,0,4.0,20.0|
s,3399CC,0,5.0,10.0|
v,BBCCED,0,6.0,1.0|
V,3399CC,0,7.0,1.0|
x,0000FF,0,8,20.0|
Amire még jó
Ugyanebben a mezőben azonban mást is meg lehet adni, nem csak a vonalak bizonyos pontjait lehet megjelölni.
Ezek ugyanúgy kombinálhatók az előző és az ezt követő Vizuális jelölések elemeivel. Egy bizonyos elemen (egy jelölés, egy elválasztó, egy kitöltés, stb.) belül a megfelelő paraméterek vesszővel (,) választjuk el, ezeket pedig a pipe (|) karakterrel.
Vízszintes elválasztóvonal
Ezzel egy vízszintes elválasztóvonalat szúrhatunk be a vonalas vagy pont-diagrammunkba az Y-értékeket mintegy elválasztva. Szintaxis:
h,<Szín>,0,<Vertikális pozíció>,<Vastagság>- A
|-val/vel elválasztós módszerrel ez is ismételhető
- A szín a sztenderd formátum
- A vertikális pozíció
0.0-tól 1.0-ig terjed. Az aljától a tetejéig.
- A vastagság egy egész szám.
h,808080,0,0.35,1
Vízszintes (horizontális) tartománysávok
Ezzel a diagramon egy (vagy több ilyen cuccal több) sávot határozhatsz meg a két digramtípuson, amivel egy bizonyos tartományt jelölhetsz.
r,<Szín>,0,<Tartomány kezdete>,<Tartomány vége>- A tartomány kezdete és vége
0.0-tól 1.0-ig, a grafikon aljától a tetejéig tart.
r,ddeeff,0,0.33,0.66
Függőleges (vertikális) tartománysávok
Tökugyanaz, mint az előző, horizontálisnál, csak éppen a legelején kis r helyett nagy R-et kell írni.
Grafikonvonalközti terület kitöltése
Ha bármely perverzió folytán vonalas grafikonokon a diagramm vonalai közti terület(ek)et is kitöltheted valamely színnel. Akár a Paintben.
b,<Szín>,<Első adatsor index>,<Második adatsor index>,0- A szín a sztenderd formátumú
- Az adatsor indexek annak függvényében változnak, hogy az adatsorokat milyen sorrendben adtad meg az Adatok résznél. Az első adatsor indexe 0, aztán egyesével növekszik. A megadott adatsorok közti terület lesz kitöltve az adott színnel.
- Tipp: Ha a diagram legfelső adatsorától a tetejéig akarod kitölteni a területet valamely színnel, akkor hozz létre egy 2 az adott kódolásban maximális értékű értékekkel rendelkező adatsort, ami így a diagram legfelső adatsora lesz. És akkor ezt használd a kitöltésnél, mint második adatsort.
- Tipp: Ha csak egy adatsorod van és a teljes alatta lévő terülted ki akarod tölteni, akkor a szín megadása előtt a kis
b helyett egy nagy B-t írjál, és az első és második adatsor indexeként is 0-t adjál meg.
Adatok 99,cefhjkqwrlgYcfgc,QSSVXXdkfZUMRTUQ,HJJMOOUbVPKDHKLH,AA
Kitöltés: b,76A4FB,0,1,0|b,224499,1,2,0|b,FF0000,2,3,0|b,80C65A,3,4,0
B,ddeeff,0,0,0
Vonalstílusok megadása
Vonalas diagrammoknál meg lehet adni, hogy a vonalak hogy nézzenek ki. vastagságuk, szaggatottságuk milyen legyen. És most jöjjön a szintaxis.
<első vonal vastagsága>,<Szaggatott részek hossza>,<Szaggatott részek közti rés mérete>|<második vonal vastagsága>,<Szaggatott részek hossza>,<Szaggatott részek közti rés mérete>...- Itt azonban nem te adod meg, hogy mely vonalak paramétreit állítod be, hanem ez szépen, sorrendben történik
- Szóval a példa:
3,6,3|1,1,0
Cím adása a grafikonnak
A diagrammjaidnak címet is adhatsz. Ide csak írd be a szöveget. Bár alapbeállításként nem így van, de az ékezetes karakterekkel vigyázz. Szóköz helyett is érdemes a + karakter használni. A sortöréshez használd a | karaktert.
Formázás
A szintaxis a következő: <Szín>,<Betűméret>. A szín a sztenderd formátum. Még mindig.
Cím: Hello+World,|How RU?; Formázás: 0000ff,16
Kitöltés, gradiens (színátmenet), háttércsíkozás
Ezek szintaxisa a következő: <c Vagy bg>,<Paraméterek>. A c vagy bg azt jelöli, hogy a kitöltés csak az adatok területére vonatkozik-e, vagy a címre, jelmagyarázatra is: az egész grafikonra. A paraméterek a kitöltés típusától függően változnak. Azokat is vesszővel kell elválasztani, és ha több kitöltést is akarunk alkalmazni, akkor azokat a már ismert |-al elválasztós módszerrel lehet megtenni.
Monokróm kitöltés
Ezzel a diagram hátterét, vagy bizonyos diagramtípusoknál (vonalas, pont-diagaramm, sávos) ezt a területet szűkítheted az adatok hátterére, azaz a pl. leírás alatti terület nem lesz kitöltve. A szintaxisa a következő:
<c Vagy bg>s,<Kitöltés színe>- A
c vagy bg már le van írva, az s erre a kitöltéstípusra specifikus, a szín pediga a sztenderd formátum.
Kitöltés: bg,s,ffff00|c,s,ddeeff
Színátmenet (gradiens)
Fogadjunk nem találtad ki; ezzel az opcióval színátmeneteket hozhatsz létre a grafikon hátterében. És. A. Szintaxis.
<c Vagy bg>,lg,<Dőlésszög>,<Szín 1>,<Színpozíció 1>,<Szín 2>,<Színpozíció 2>,... a színek és pozíciójuk ismétlődhet.- A
c/bg már le van írva, az lg a gradiensre specifikus.
- A dőlésszöggel azt határozhatod meg, hogy a színátmenet milyen irányban történik: horizontálisan, vertikálisan vagy valamely köztes irányban. Csak egy számot kell megadnod, a fok (°) jelet nem. 0=horizontális, 90=vertikális.
- A szín n egy RRGGBB formátumú szín
- A színpozíció n azt határozza meg, hogy a színátmenet meghatározott színe az ábra mely részén van. Ez 1.0 és 0.0 között változhat.
Kitöltés: bg,s,ffff00|c,lg,90,c0e8ff,0,f0f8ff,1
Csíkozás
Ezzel csíkozhatod a hátteret. Na találd ki, mi következik. ... Szintaxis.
<c Vagy bg>,ls,<Dőlésszög>,<Szín 1>,<Sávszélesség 1>,...,<Szín n>,<Sávszélesség n>- Az
c/bg a csíkozás helyét, az ls a csíkozás tényét határozza meg
- A dőlésszög ugyanaz, mint a színátmenetnél
- A szín n az adott csík színe
- A sávszélesség n az adott csík szélessége (vagy magassága). 0-tól 1-ig tart, ahol 1 az a teljes szélesség
- A sávok a megadott terület teljes szélességében/magasságában ismétlődnek
Kitöltés: bg,s,ffff00|c,ls,0,ffffff,0.05,ddeeff,0.05
Diagram színei
Itt beállíthatod, hogy a diagram különböző adatsorai milyen színűek lesznek. (A pontdiagrammhoz azonban nem itt kell beállítani a formák színét. Ehhez lásd a Diagram típusa súgóját, ugyanis azt a Vizuális jelölésekkel az ábrán kell megadni.)
<Adatsor 1 színe>,<Adatsor 2 színe>...- A színek RRGGBB színek, az adatsorok számát az határozza meg, hogy milyen sorrendbben írtad be az adatokat.
ff0000,0000ff80
Jelmyagyarázat, leírások a grafikonhoz
A könnyebb érthetőség kedvéért érdemes lehet az ábrán jelölni, hogy melyik vonal, akármi mit jelöl. Erre legalkalmasabb, ha szöveggel odaírod. (Megjegyzés: Kördiagrammnál erre külön mező van fenntartva.)
Leírás az első adatsorhoz|Leírás a másodikhoz|...- Eléggé magától értetődő. Itt sem árt vigyázni az ékezetes betűkkel és a szóköz helyett írhatsz + jelet.
- Érdemes a színekkel együtt használni
A jelmagyarázat: Hogy vagytok|ma,|gyerekek?, a színek pedig: ff0000,0000ff,008000
Leírások a tortadiagrammok szeleteihez
A leírásokat a tortadiagrammokhoz a Google Chart API tulajdonságai révén külön mezőben kell megadni.
- A szintaxis teljesen megegyezik a normális diagrammok jelmagyarázatával:
Leírás az első adatsorhoz|Leírás a másodikhoz|...- Eléggé magától értetődő. Itt sem árt vigyázni az ékezetes betűkkel és a szóköz helyett írhatsz + jelet.
Első||Az előzőnél nincs leírás|Negyedik|Ötödik
A GCFAK-ról
Pénteken* megnéztem a webisztánt, és mit látok, hát csak nem készült egy API a Google charthoz... Megnéztem. Roha Nagyon egyszerű használni. Annyira, hogy azt mondtam 48 órán belül lesz hozzá kliens. Nos, azt nem tudom más csinált-e de én 48 órán belül kész voltam ezzel.
Hogy mi is ez?
Grafikonokat lehet vele csinálni. Sokfélét, rengeteg opcióval. Nagyon szép, szerintem. A használata viszont önmagában nehéz. Az URL-be kell beírni mindenféle paramétereket. Brrr... 48 óra alatt én simán kitanultam, de nem egy kényelmes dolog. (Igen, az előző bekezdésbe azt írtam egyszerű, de azt nem az url paraméternevek megjegyzésére értettem.)
Gondolkoztam, hogy milyen klienst írjak hozzá. Kényelmes, nagymamámistudjahasználni, vagy olyan, raw, de erős volt a két opció. Az utóbbit választottam. Olyan, mint a C++ programnyelv. Csúnya, kicsit ki kell tanulni**, de aztán bármit megcsinálhatsz vele. Ez a kis Javascript alkalmazás egyszerűen összerakja a Google Chart API lekérés URL-jét neked. Nem táblázatba kell beírni az adatokat. Be kell pötyögni. A megfelelő szintaxissal. Nem ilyen stílusú. Ahhoz keress mást. Ez egy API kliens, nem egy Grafikonkészítő varázsló.
Hogy akkor ez miért jobb, mint eleve az URL-t bepötyögni, vagy egy egyszerűbb varázslót használni?
- Az URL-nél egyértelműen egyszerűbb, mert minden opciót elérhetsz így is és az összes opcióról, a szintaxisáról, van súgó, példával illusztrálva
- A varázslóknak hátránya szokot lenni, hogy nem minden egyes opciót támogatnak. Természetesen ezt ki kell tanulni, a varázslót pedig nem.
Én amíg csináltam ezt, elég jól kitanultam. Ezalatt azt értem, hogy ezt az eszközt használva szinte bármilyen grafikont létre tudok hozni. Ezt te is megteheted; az opciók melletti infó 
ikonra kattintva ugyanis mindig előugrik egy részletes leírás az opció használatáról.
* Ma hétfő van.
** Nem programozok C++-ban
Copyright
Ezt az egész programot én, ¶ a l o t á s B . raktam össze, de sok-sok kis daraból. Az egész tiszta JavaScript, így ha a weboldalt lemented akkor te is fogod tudni használni.
