Dinamikus diagramkészítő

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ó):

{
  "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.