# Dinamikus diagramkészítő

> Diagramok készítése a Lekérdezéskészítő adataiból: a modul bekapcsolása, a diagram beállításainak lapjai és megjelenítése Elementorban és a blokkszerkesztőben.

A Dinamikus diagramkészítővel (Charts Builder) egy korábban létrehozott lekérdezés adatait jelenítheted meg diagramon. Elérhető típusok például az oszlop-, vonal-, kör-, földrajzi (Geo) és hisztogram-diagram, és más típusok is. A diagramot később bármelyik oldalon megjelenítheted a **Dynamic Chart** widgettel vagy blokkal.

## A modul bekapcsolása

1. Nyisd meg a **JetEngine → JetEngine** vezérlőpultot, és válaszd a **Modulok** fület.
2. A **Külső modulok** között kapcsold be a **Dinamikus diagramkészítő** kapcsolót.
3. Megjelenik egy ablak, amely jelzi, hogy a JetEngine telepíti és aktiválja a hozzá tartozó bővítményt (a JetEngine dinamikus diagramkészítőjét).
4. A telepítés után az ablak sikeres állapotra vált, és megjelenik a **Go to Charts Builder** gomb. Erre kattintva a Charts Builder oldalára jutsz.

A Charts Builder később a JetEngine vezérlőpultról is elérhető.

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

Ezen a lapon nevezed el a diagramot, kiválasztod az adatok forrását, és előnézetben láthatod az elérhető oszlopokat.

- **Name**: a diagram neve.
- **Data Query**: a Lekérdezéskészítővel korábban létrehozott lekérdezés. A diagram elkészítése előtt a lekérdezésnek készen kell lennie.
- **Fetch the data**: lekér egy adatmintát, hogy megtalálja az összes lehetséges oszlopot, és megjelenítse a táblázat előnézetét.

A **Re-fetch Data** gomb WooCommerce-lekérdezésnél nem működik.

## Chart Type (diagramtípus)

Ezen a lapon választod ki a diagram típusát: „Bar”, „Line”, „Pie”, „Geo”, „Histogram” és más típusok közül. A példa az „Columns” (oszlopdiagram) típust használja.

## Columns (oszlopok)

Itt adod meg a diagram adatait. A beállítás a metamezőkhöz hasonlóan működik.

Az első oszlop a diagram csoportfeliratait adja, az összes többi oszlop a diagram adatait.

- **Column Name**: az oszlop neve.
- **Data Source**: az adatforrás. Két lehetőség van: „Post/Term/User/Object Field” és „Meta Field”.
- **Select Field**: az aktuális objektumok mezője, amelyet ebben az oszlopban megjelenítesz.
- **Filter Column Output**: alapból ki van kapcsolva. Bekapcsolva módosíthatod, hogyan jelenik meg az információ az adott oszlopban. Például a dátumok formátuma átalakítható. A bekapcsolás után megjelenik a **Filter Callback** lista, ahonnan kiválasztod az oszlop adatait módosító függvényt.
- **Data Type**: az oszlop adatainak típusa: „Default”, „Ensure number” (számmá alakítás) vagy „Ensure string” (szöveggé alakítás).

A példában egy női divatáru ármegjelenítő diagramhoz három oszlopot veszel fel:

| Oszlop | Column Name | Data Source | Select Field | Data Type |
|---|---|---|---|---|
| Első | „Item name” | „Post/Term/User/Object Field” | „Title” | „Ensure string” |
| Második | „Item price” | „Post/Term/User/Object Field” | „Plain Price” | „Ensure string” |
| Harmadik | „Item sale price” | „Post/Term/User/Object Field” | „Plain Sale Price” | „Ensure string” |

A beállítások után a **Reload Preview** gombbal rajzoltathatod ki a diagramot.

Az előnézet megjelenítéséhez a **Chart Styles** lapon meg kell adnod a diagram szélességét.

Ha kevesebb elemet szeretnél a diagramon, használd a Lekérdezéskészítő lapozási beállítását. A **JetEngine → Lekérdezéskészítő** listájában nyisd meg szerkesztésre azt a lekérdezést, amelyet a diagramhoz választottál, és a **Pagination** (lapozás) lapon állítsd be a **Limit** értéket. A lapozás azt adja meg, hány elem (termék, bejegyzés, időpont) jelenjen meg egy oldalon. Ha a határérték 10, az előnézeten is csak tíz termék látszik.

## Chart Config (diagram beállításai)

Itt a diagram megjelenését és viselkedését állíthatod.

- **Legend**: a jelmagyarázat helye, jobbra vagy balra, vagy kikapcsolhatod.
- **Is Stacked**: a diagram elemeit halmozott formában egyesíti.
- **Advanced Options**: alapból ki van kapcsolva. Bekapcsolva megjelenik a **Set Advanced Options** mező, ahol JSON formátumban kézzel adhatsz meg további beállításokat. A használható beállításokat a Google Charts oszlopdiagramjának konfigurációs lehetőségei között találod. Példa (fehér háttér és animáció):

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

A változtatás eredményét a **Reload Preview** gombbal ellenőrizheted. A diagram animálásához szükség van a haladó beállításokra.

## Chart Styles (diagram stílusa)

- **Width**: a diagram vászonának szélessége pixelben.
- **Height**: a vászon magassága pixelben.

## A diagram megjelenítése Elementorban

1. Nyisd meg az oldalt, és kattints az **Edit with Elementor** (szerkesztés Elementorral) lehetőségre.
2. A widgetek között keress rá a **Dynamic Chart** widgetre, és add az oldalhoz.
3. A **Chart** mezőben válaszd ki a korábban létrehozott diagramot.

## A diagram megjelenítése a blokkszerkesztőben

1. Nyisd meg az oldalt, és a „plusz” ikonnal keresd meg a **Dynamic Chart** blokkot.
2. Add az oldalhoz.
3. A blokk beállításaiban válaszd ki a korábban létrehozott diagramot.

Az oldalt megnyitva a diagram a webhelyen is megjelenik.