# Diagram létrehozása

> A diagramszerkesztő fülei: általános beállítások, diagramtípus, oszlopok, beállítások és stílus.

Új diagramot a **JetEngine → Charts Builder → Új hozzáadása** gombbal készíthetsz. A szerkesztő bal oldalán öt fül áll: **Általános beállítások**, **Chart Type**, **Oszlopok**, **Chart Config** és **Chart Styles**. A jobb oldali **Create Chart** gomb menti a diagramot.

![Az új diagram általános beállításai](./kepek/diagram-uj-altalanos.webp)

*Az új diagram általános beállításai* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-engine-charts&chart_action=add)

A szerkesztő alján a **Reload Preview** gomb rajzolja újra az előnézetet. Amíg nincs lekérdezés, diagramtípus és legalább egy oszlop megadva, az előnézet helyén egy ellenőrzőlista mutatja, mi hiányzik.

## Általános beállítások

| Beállítás | Mit csinál |
| --- | --- |
| **Név** | A diagram neve. Ez jelenik meg a listában és a diagram kiválasztásakor. |
| **Data Query** | A diagram adatforrása: egy korábban a Lekérdezéskészítővel létrehozott lekérdezés. A lista alatti hivatkozásokkal a kiválasztott lekérdezést szerkesztheted, vagy újat hozhatsz létre. |
| **Fetch Data** | Lekér egy adatmintát a lekérdezésből, hogy a szerkesztő megismerje az elérhető oszlopokat. A gomb utána **Re-fetch Data** feliratú. |

![A kiválasztott lekérdezés a diagram beállításai között](./kepek/diagram-lekerdezes-valasztva.webp)

*A kiválasztott lekérdezés a diagram beállításai között* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-engine-charts&chart_action=add)

A lekérdezést mindig a diagram elkészítése előtt hozd létre. A **Re-fetch Data** nem működik WooCommerce-lekérdezéssel.

Ha kevesebb elemet szeretnél a diagramon, a lekérdezés **Lapozás** (Pagination) beállításában add meg a **Limit** értékét. Ez azt határozza meg, hány elemet ad vissza a lekérdezés egy oldalon, ezért a diagram is csak ennyit rajzol ki.

## Chart Type

Ezen a fülön a diagram típusát választod ki. Az elérhető típusok:

| Típus | Felirat a felületen |
| --- | --- |
| Vízszintes sávdiagram | **Bar** |
| Vonaldiagram | **Line** |
| Területdiagram | **Area** |
| Kördiagram | **Pie** |
| Fánkdiagram | **Donut** |
| Buborékdiagram | **Bubble** |
| Lépcsős területdiagram | **Stepped Area** |
| Gyertyadiagram | **Candlestick** |
| Hisztogram | **Histogram** |
| Oszlopdiagram | **Oszlopok** |
| Pontdiagram | **Scatter** |
| Térképdiagram | **Geo** |

![A választható diagramtípusok](./kepek/diagram-tipusok.webp)

*A választható diagramtípusok* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-engine-charts&chart_action=add)

## Oszlopok

Az **Oszlopok** fülön adod meg, milyen adatokat rajzoljon a diagram. Az oszlopok a metamezőkhöz hasonlóan működnek. Az **első oszlop** adja a diagram csoportcímkéit (például az x tengely feliratait), a **további oszlopok** pedig az ábrázolt adatsorokat.

Új oszlopot a **New column** gombbal veszel fel. Egy oszlop beállításai:

| Beállítás | Mit csinál |
| --- | --- |
| **Column Name** | Az oszlop neve. A táblázat fejlécében és a jelmagyarázatban jelenik meg. |
| **Adatforrás** | Honnan jöjjön az oszlop adata: **Fetched Column** (a lekért mintában talált oszlop), **Post/Term/User/Object Field** vagy **Meta mező**. |
| **Select Field** | A kiválasztott forrás mezője. A **Post/Term/User/Object Field** forrásnál a bejegyzés, kifejezés, felhasználó vagy más objektum beépített mezői közül választasz (például **Cím**). A **Meta mező** forrásnál a JetEngine metamezői közül. |
| **Egyéni mező kulcsa** | Csak a **Meta mező** forrásnál: tetszőleges egyéni mező kulcsát is megadhatod, ha az nem szerepel a listában. |
| **Filter Column Output** | Alapból ki van kapcsolva. Bekapcsolva egy visszahívási függvénnyel (**Filter Callback**) átalakíthatod az oszlop értékét, például egy dátum formátumát. |
| **Adattípus** | Az oszlop értékeit a megadott típusra alakítja: **Alapértelmezett**, **Ensure number**, **Ensure string** vagy **Ensure date**. |

![Az első oszlop beállításai](./kepek/diagram-oszlop-elso.webp)

*Az első oszlop beállításai* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-engine-charts&chart_action=add)

Az első oszlopnál a példában a bejegyzés címét választottuk. A metamezős oszlopnál az **Egyéni mező kulcsa** mezőbe írtuk a mező kulcsát:

![Metamezős oszlop beállításai](./kepek/diagram-oszlop-meta.webp)

*Metamezős oszlop beállításai* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-engine-charts&chart_action=add)

Ha az oszlopok készen vannak, a **Reload Preview** gombbal rajzold ki a diagramot. Az előnézethez a **Chart Styles** fülön meg kell adni a szélességet.

## Chart Config

A fül a diagram megjelenését és működését szabályozza.

| Beállítás | Mit csinál |
| --- | --- |
| **Legend** | A jelmagyarázat helye: a diagramtól jobbra, alatta, balra, a diagramon belül a bal felső sarokban, fölötte, vagy egyáltalán nem jelenik meg. |
| **Is Stacked** | Az elemeket egymásra halmozva (oszlopokban összegezve) jeleníti meg. |
| **Advanced Options** | Alapból ki van kapcsolva. Bekapcsolva megjelenik a **Set Advanced Options** mező, ahol JSON formátumban további beállításokat adhatsz meg. |

![A Chart Config fül](./kepek/diagram-beallitasok.webp)

*A Chart Config fül* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-engine-charts&chart_action=add)

### Haladó beállítások JSON-nal

A **Set Advanced Options** mezőbe a diagramtípushoz tartozó konfigurációs beállítások írhatók JSON formátumban. A diagramokat a Google Charts rajzolja, ezért annak oszlopdiagram-beállításai használhatók. Például fehér háttér, keret és animáció:

```json
{
  "backgroundColor": {
    "fill": "#FFF",
    "strokeWidth": 5
  },
  "animation": {
    "duration": 3000,
    "easing": "linear",
    "startup": true
  }
}
```

Animációt csak a haladó beállításokkal lehet kérni, a nélkül a diagram nem animált.

![A haladó beállítások JSON-nal](./kepek/diagram-halado-json.webp)

*A haladó beállítások JSON-nal* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-engine-charts&chart_action=add)

## Chart Styles

| Beállítás | Mit csinál |
| --- | --- |
| **Szélesség** | A diagram vászon szélessége pixelben. |
| **Magasság** | A diagram vászon magassága pixelben. |

![A Chart Styles fül](./kepek/diagram-stilus.webp)

*A Chart Styles fül* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-engine-charts&chart_action=add)

Az előnézet akkor rajzolódik ki, ha a szélesség meg van adva.

## Mentés és előnézet

Kattints a **Reload Preview** gombra, és ellenőrizd az előnézetet. Ha minden rendben van, a **Create Chart** gombbal mentsd a diagramot.

![Az elkészült diagram előnézete](./kepek/diagram-elonezet.webp)

*Az elkészült diagram előnézete* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-engine-charts&chart_action=add)

Az előnézeten a termékek ára és akciós ára oszloppárokban látszik, a jelmagyarázat a diagram alatt áll.