# Diagram (Chart) widget

> Hat diagramtípus kézi adatokból, CSV-fájlból vagy Google Sheetből: beállítások, adatformátumok és a buborékdiagram.

A **Chart** widget (az Elementor panelén **Diagram**) interaktív diagramot rajzol az oldalra. Hat diagramtípust tud: vonal, oszlop, radar, gyűrű és kör, poláris terület és buborék. Az adatot kézzel is megadhatod, de beolvashatod CSV-fájlból vagy Google Sheetből is.

A widget a Pro bővítményben van, ezért a **The Plus Addons for Elementor Pro** aktív kell legyen. Használat előtt kapcsold be: **The Plus Addons → Widgets**, keress rá a **Chart** szóra, és kapcsold be a kapcsolóját.

![Oszlopdiagram a nyilvános oldalon, jelmagyarázattal és tengelyekkel](./kepek/szovegek-adatok-diagram-oszlop.webp)

*Oszlopdiagram a nyilvános oldalon, jelmagyarázattal és tengelyekkel* (https://minta-bolt.hu/tp-diagram-oszlop/)

A kép egy kész oszlopdiagramot mutat: a megadott adatokból valódi, interaktív diagram lesz tengelyekkel és jelmagyarázattal.

## Elrendezés

A widget **Tartalom** fülén az **Elrendezés** szakasz a diagram forrását és típusát állítja.

![A Diagram widget Elrendezés szakasza](./kepek/szovegek-adatok-diagram-panel.webp)

*A Diagram widget Elrendezés szakasza* (https://minta-bolt.hu/wp-admin/post.php?post=7&action=elementor)

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Diagramtípus** | Az adatok forrása: **Egyéni** (kézi megadás), **CSV-fájl** vagy **Google Sheet** | Egyéni |
| **Diagram kiválasztása** | A diagram alakja: vonal, oszlop, radar, gyűrű és kör, poláris terület, buborék (képes választó) | Vonal |
| **Tájolás** | Oszlopdiagramnál **Függőleges oszlop** vagy **Vízszintes sáv**; gyűrű és kör típusnál **Kördiagram** vagy **Fánkdiagram** | Függőleges oszlop, illetve Kördiagram |
| **Címke értéke** | A tengely vagy az adatpontok címkéi, a `|` jellel elválasztva (csak kézi adatnál) | Jan \| Feb \| Mar |

Az egyes típusoknál a **Hogyan működik** felirat melletti súgó ikon az adott típus leírására visz.

## Adatok kézi megadása

Az **Egyéni** forrásnál az adatokat az **Adatkészlet** szakaszban adod meg. Ez a vonal-, oszlop- és radardiagramnál egy lista, az **Elem hozzáadása** gombbal további adatsort vehetsz fel.

![Az Adatkészlet szakasz egy adatsorral](./kepek/szovegek-adatok-diagram-adatkeszlet.webp)

*Az Adatkészlet szakasz egy adatsorral* (https://minta-bolt.hu/wp-admin/post.php?post=7&action=elementor)

Egy adatsor főbb mezői:

| Mező | Mit csinál |
| --- | --- |
| **Címke** | Az adatsor neve (ez jelenik meg a jelmagyarázatban) |
| **Adatok** | Az adatsor értékei, a `|` jellel elválasztva, például `25 | 15 | 30`. Annyi érték kell, ahány címkét a **Címke értéke** mezőben megadtál |

Az adatsor további beállításai a pontok és vonalak színezésére valók: **Többféle háttérszín adatpontonként**, **Pont háttérszíne**, **Többféle szegélyszín**, **Pont kerete**, **Kitöltés** és **Szaggatott keret**.

A gyűrű- és kördiagramnál, valamint a poláris területdiagramnál nincs adatsorlista: egyetlen **Adatok** mező van (alapértéke `10 | 15 | 20`), mellette a **Háttérszínek** és a **Szegélyszínek** mező. Ide a színeket szintén `|` jellel elválasztva írd, például `#f7d78299|#6fc78499|#8072fc99`.

## Diagramtípusok lépésről lépésre

Mind a hat típusnál ugyanúgy indulsz: add hozzá a **Chart** widgetet az oldalhoz, a **Diagramtípus** maradjon **Egyéni**, majd a **Diagram kiválasztása** résznél válaszd ki a típust. A **Címke értéke** mezőbe a címkéket `|` jellel elválasztva írd, az adatokat pedig az **Adatkészlet** szakaszban add meg. A típusok közti eltérés az adatmezőkben és a **Tájolás** listában van.

### Oszlopdiagram és vízszintes sávdiagram

1. A **Diagram kiválasztása** résznél válaszd az oszlop ikont.
2. A **Tájolás** listából válaszd a **Függőleges oszlop** vagy a **Vízszintes sáv** értéket.
3. A **Címke értéke** mezőbe írd a tengely címkéit, például `Jan | Feb | Már`.
4. Az **Adatkészlet** szakaszban add meg az adatsor **Címkéjét** és az **Adatok** mezőben az értékeket, például `25 | 15 | 30`.

![Vízszintes sávdiagram a nyilvános oldalon](./kepek/szovegek-adatok-2-diagram-sav.webp)

*Vízszintes sávdiagram a nyilvános oldalon* (https://minta-bolt.hu/tp-diagram-sav/)

A kép a **Vízszintes sáv** tájolást mutatja: a címkék a függőleges tengelyen, az értékek a vízszintesen futnak. A diagram az adatokból valódi, interaktív diagram, a sávok az értékekkel arányosak.

### Kördiagram és fánkdiagram

1. A **Diagram kiválasztása** résznél válaszd a **Gyűrű- és kördiagram** ikont.
2. A **Tájolás** listából válaszd a **Kördiagram** vagy a **Fánkdiagram** értéket.
3. A **Címke értéke** mezőbe írd a cikkelyek címkéit.
4. Kördiagramnál az **Adatok** mezőbe írd az értékeket, a **Háttérszínek** és a **Szegélyszínek** mezőbe a cikkelyenkénti színeket, mind `|` jellel elválasztva.
5. Fánkdiagramnál az **Adatkészlet** szakasz listáját töltsd ki: minden listaelem egy gyűrű a diagramban, saját **Címkével**, **Adatokkal** és színekkel. Az alapértelmezett lista három gyűrűt rajzol, ezért ha csak egy gyűrű kell, töröld a többi elemet.

![Kördiagram három cikkellyel](./kepek/szovegek-adatok-2-diagram-kor.webp)

*Kördiagram három cikkellyel* (https://minta-bolt.hu/tp-diagram-kor/)

Kördiagramnál minden érték egy cikkely, a méretük az értékek arányát követi.

![Fánkdiagram egy gyűrűvel](./kepek/szovegek-adatok-2-diagram-fank.webp)

*Fánkdiagram egy gyűrűvel* (https://minta-bolt.hu/tp-diagram-fank/)

Fánkdiagramnál a közepe üres, és minden **Adatkészlet** elem külön gyűrűt kap.

### Radardiagram

A radardiagram (más néven pók- vagy hálódiagram) több értéket mutat körkörös elrendezésben, ezért változók összehasonlítására jó.

1. A **Diagram kiválasztása** résznél válaszd a radar ikont.
2. A **Címke értéke** mezőbe írd a tengelyek nevét, `|` jellel elválasztva.
3. Az **Adatkészlet** szakaszban add meg az adatsor **Címkéjét** és az **Adatok** mezőben az értékeket. Annyi értéket írj, ahány címkét megadtál.

### Poláris területdiagram

A poláris területdiagram a radardiagramhoz hasonlóan körkörös, de kitöltött, az értékekkel arányos szeletekből áll.

1. A **Diagram kiválasztása** résznél válaszd a poláris terület ikont.
2. A **Címke értéke** mezőbe írd a szeletek címkéit, `|` jellel elválasztva.
3. Az **Adatok** mezőbe írd az értékeket, a **Háttérszínek** mezőbe pedig a szeletek színeit.

## Speciális opció és egyéb opció

A **Speciális opció** szakasz a diagram megjelenését finomítja.

![A Speciális opció szakasz](./kepek/szovegek-adatok-diagram-specialis.webp)

*A Speciális opció szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=7&action=elementor)

- **Oszlop mérete** és **Oszlopköz**: az oszlopok szélessége és a köztük lévő hely (oszlopdiagramnál).
- **Rácsvonalak**: a rácsvonalak be- és kikapcsolása, az X- és Y-tengely rácsvonalainak színe, a nullavonal színe, a keret rajzolása és a **Kezdés nullánál** kapcsoló. Ha ez ki van kapcsolva, a tengely nem feltétlenül nullánál kezdődik, ahogy a fenti oszlopdiagramon is látszik.
- **Címke**: a címkék megjelenítése, színe és mérete.
- **Jelmagyarázat**: megjelenítés, szín, pozíció, igazítás és méret.
- **Eszköztipp**: a rámutatáskor megjelenő buborék, az esemény, a betűméret, a cím, a törzsszöveg és a háttér színe, valamint a **Sima** kapcsoló.
- **Képarány** és **Képarány megtartása**: a diagram arányainak rögzítése.
- Vonal-, radar- és buborékdiagramnál **Egyéni pontstílusok**: pontstílus, pont háttere, normál és rámutatáskori mérete, kerete és annak szélessége.

Az **Egyéb opció** szakasz az **Animáció** listát (a megjelenési animáció lefutása, alapértéke `easeOutQuart`) és az **Időtartam** mezőt adja. A **Stílus** fülön a **Grafikonstílus** szakasz a szélességet, a magasságot és az igazítást állítja.

## Diagram CSV-fájlból

Ha az adataid már CSV-fájlban vannak, a widget közvetlenül beolvassa.

1. Győződj meg róla, hogy a CSV-fájl oszlopelválasztója **pontosvessző** (`;`), nem vessző. Ha nem az, előbb alakítsd át.
2. Töltsd fel a fájlt a **Média → Új médiafájl hozzáadása** oldalon, és másold ki az URL-jét.
3. Add hozzá a **Chart** widgetet az oldalhoz.
4. A **Diagramtípus** listából válaszd a **CSV-fájl** lehetőséget.
5. Az **Add meg a CSV-fájl URL-jét** mezőbe illeszd be a fájl címét.
6. A **Diagram kiválasztása** résznél válaszd ki a diagram alakját.

![A CSV-fájl forrás beállításai](./kepek/szovegek-adatok-diagram-csv-panel.webp)

*A CSV-fájl forrás beállításai* (https://minta-bolt.hu/wp-admin/post.php?post=12&action=elementor)

Fontos: a pontosvesszős elválasztó kötelező, a vesszővel elválasztott szabványos CSV nem olvasódik be helyesen.

## Diagram Google Sheetből

Ha az adatok Google Sheetben vannak, nem kell újra begépelned őket.

1. A Google Sheetsben tedd közzé a táblázatot a weben (**Fájl → Megosztás → Közzététel a weben**), hogy bejelentkezés nélkül is elérhető legyen.
2. Add hozzá a **Chart** widgetet az oldalhoz.
3. A **Diagramtípus** listából válaszd a **Google Sheet** lehetőséget.
4. Az **API-kulcs** mezőbe írd be a Google API-kulcsodat.
5. A **Táblázat ID-ja** mezőbe másold be a táblázat azonosítóját: ez a címben a `/d/` és az `/edit` közötti hosszú karaktersor.
6. A **Táblázattartomány** mezőbe írd be a diagramra szánt cellatartományt, például `A1:B10`.
7. A **Diagram kiválasztása** résznél válaszd ki a diagram alakját.

![A Google Sheet forrás beállításai](./kepek/szovegek-adatok-diagram-sheet-panel.webp)

*A Google Sheet forrás beállításai* (https://minta-bolt.hu/wp-admin/post.php?post=13&action=elementor)

A táblázatnak közzé kell lenni téve a weben: egy privát, csak megosztási linkkel elérhető táblázat nem töltődik be.

## Buborékdiagram

A buborékdiagram három értéket mutat egyszerre: két tengelyen a pont helyét, és a buborék méretét.

1. Add hozzá a **Chart** widgetet, a **Diagramtípus** maradjon **Egyéni**.
2. A **Diagram kiválasztása** résznél válaszd a buborék ikont (**Buborék**).
3. Nyisd meg az **Adatkészletek** szakaszt, és adj meg egy **Címkét**.
4. Az **Adatok** mezőbe pontonként három értéket írj szögletes zárójelben, `|` jellel elválasztva: `[x|y|méret]`. Több pontot egymás után írhatsz, például `[5|15|15][10|18|12][7|14|14]` (ez az alapérték).

![A buborékdiagram adatkészlete](./kepek/szovegek-adatok-diagram-buborek-panel.webp)

*A buborékdiagram adatkészlete* (https://minta-bolt.hu/wp-admin/post.php?post=8&action=elementor)

Az első szám a pont vízszintes, a második a függőleges helye, a harmadik a buborék mérete.

![Buborékdiagram a nyilvános oldalon](./kepek/szovegek-adatok-diagram-buborek.webp)

*Buborékdiagram a nyilvános oldalon* (https://minta-bolt.hu/tp-diagram-buborek/)

A buborékok a megadott `x|y` helyen jelennek meg, a méretük a harmadik számtól függ.