Sparkline

Browse: Home / ERPIO One / Sparkline

Táto pomôcka umožnuje zobrazenie malých riadkových grafov tzv. sparkline, či už v gride alebo liste, v mobilnom aj webovom klientovi. Generuje Sparkline grafy ako PNG obrázky pomocou dynamicky vytvorenej URL v dátovom zdroji.

🚀 Základné použitie

https://erpio.app/scripts/sparkline/?type=line&values=10,20,30,15&height=100

Skript vráti: ✅ PNG obrázok
✅ pripravený na použitie v ERPIO One

🔧 Parametre

✅ values (povinný)

Zoznam čísel oddelených čiarkou.

values=10,20,30,15

• podporuje kladné aj záporné hodnoty
• poradie určuje priebeh grafu

✅ type (nepovinný)

Typ grafu (case-insensitive – funguj column aj Column).

Default:

column

Podporované hodnoty:

✅ height (nepovinný)

Výška obrázka v pixeloch.

Default:

100

Príklad:

height=50

Šírka sa určí automaticky podľa počtu hodnôt.

✅ padding (nepovinný)

Odsadenie grafu zo všetkých strán.

Default:

0

Príklad:

padding=10

✅ zabezpečí, že graf nie je nalepený na okraje

🎨 Typy grafov

📊 Column

type=column

• stĺpcový graf
• podporuje:
  • ✅ pozitívne hodnoty (hore)
  • ✅ negatívne hodnoty (dole)
  • ✅ 0 ako baseline

📈 Line

type=line

• klasický čiarový graf
• automaticky škáluje podľa min/max hodnoty
• vhodný pre trend

✅ podporuje záporné hodnoty

🟦 Area

type=area

• vyplnený graf (plocha)
• bez outline (čistý vizuál)
• rovnaká škála ako line

✅ vhodný na vizualizáciu objemu / trendu

🟢🔴🟣 WinLoss

type=winloss

• všetky stĺpce majú rovnakú výšku
• slúži len na indikáciu smeru:

🥧 Pie

type=pie

• koláčový graf
• automatická logika:

ak súčet > 100:

➡️ hodnoty sa prepočítajú na percentá

ak súčet < 100:

➡️ zvyšok sa doplní bielou farbou

Ignoruje záporné a nulové hodnoty.

⚙️ Vlastnosti

✅ PNG výstup

• vhodné pre web aj emaily
• podporuje transparentné pozadie

✅ Transparentné pozadie

• pozadie je plne priehľadné
• vhodné pre tmavé aj svetlé UI

✅ Automatická šírka

• šírka závisí od počtu hodnôt
• minimum: 80px

✅ Vyhladzovanie (anti-aliasing)

• graf sa renderuje vo vyššom rozlíšení
• následne sa zmenší → výsledok je hladký

💡 Príklady

📈 Line

https://erpio.app/scripts/sparkline/?type=line&values=10,12,9,14,18&height=80

📊 Column (s mínusmi)

https://erpio.app/scripts/sparkline/?type=column&values=20,10,0,-30,10,-1

🟦 Area

https://erpio.app/scripts/sparkline/?type=area&values=5,8,3,10,7

🟢🔴 WinLoss

https://erpio.app/scripts/sparkline/?type=winloss&values=1,-1,0,1,-1

🥧 Pie

https://erpio.app/scripts/sparkline/?type=pie&values=30,20,10

📦 S paddingom

https://erpio.app/scripts/sparkline/?type=line&values=10,20,30&padding=10

⚠️ Obmedzenia

• values musia obsahovať iba čísla
• extrémne malé height (<20) môžu zhoršiť čitateľnosť
• pie je vhodný skôr pre menší počet hodnôt

✅ Odporúčania

• používaj padding=5–10 pre lepší vzhľad
• pre malé grafy (height < 60) použi:
  • line alebo winloss
• pre prehľad trendu:
  • line ✅
• pre kompaktné KPI:
  • column ✅

✅ Použitie v ERPIO One

V dátovom zdroji je potrebné vyskladať URL do stĺpca, napr. v T-SQL pomocou funkcie STRING_AGG a pod.

V záložke Stĺpce / Columns si kliknem na editáciu stĺpca s Url adresou a nastavím mu protokol na image grid web

Stĺpec so sparkline sa potom zobrazuje aj v mobilnom aj webovom klientovi.

Mobilný klient

Webový klient:

💣 Demo

Type: Column Line Area WinLoss Pie

Values:

Height:

Padding:

Zobraz