Implementarea și personalizarea graficelor în rapoartele HTML
Graficele sunt instrumente vizuale esențiale pentru interpretarea datelor în rapoarte. În funcție de tipul de informații pe care dorim să le prezentăm și de contextul utilizatorului final, putem folosi diverse tipuri de grafice.
Astfel au fost implementate trei tipuri comune de grafice utilizate în rapoartele de tip HTML: Staked Column, Clustered Column, Line, StackedLine, și Pie Chart.
Aceste grafice sunt configurate cu ajutorul funcțiilor personalizate care permit definirea tuturor proprietăților necesare, oferind flexibilitate și control asupra aspectului și comportamentului lor.
Staked Column Chart
Acest tip de grafic este utilizat pentru a reprezenta proporții și distribuții cumulative în cadrul unor categorii. Fiecare bară este împărțită în segmente, fiecare segment reprezentând o parte din total. Este ideal pentru vizualizarea contribuției fiecărei categorii la un întreg.
1. Proprietăți principale ale graficului Stacked Column:
a. titlu : Textul afișat ca titlu al graficului.
Valoare curentă: 'Ponderea tipurilor de incasari''
Valoare implicită: Fără titlu ('').
b. titlu_font : Tipul de font utilizat pentru titlu.
Valoare curentă: 'Arial'
Valoare implicită: 'Calibri' sau alt font standard.
c. titlu_fontBold : Specifică dacă fontul titlului este îngroșat (bold).
Valoare curentă: 1 (bold)
Valoare implicită: 0 (normal).
d. titlu_fontItalic : Specifică dacă fontul titlului este italic.
Valoare curentă: 0 (nu este italic)
Valoare implicită: 0 (nu este italic).
e. titlu_fontUnderline : Specifică dacă fontul titlului este subliniat.
Valoare curentă: 0 (nu este subliniat)
Valoare implicită: 0 (nu este subliniat).
f. titlu_fontSize : Dimensiunea fontului titlului.
Valoare curentă: 14
Valoare implicită: 11 sau 12.
g. titlu_culoare : Codul de culoare pentru titlu (în format RGB).
Valoare curentă: -16777216 (negru).
Valoare implicită: -16777216 (negru).
2. Proprietăți legate de legendă:
a. legenda_vizibila : Specifică dacă legenda este vizibilă.
Valoare curentă: 1 (vizibil)
Valoare implicită: 1 (vizibil).
b. legenda_aliniereOrizontala : Alinierea orizontală a legendei (left, center, right).
Valoare curentă: 'center'
Valoare implicită: 'center'.
c. legenda_aliniereVerticala : Alinierea verticală a legendei (top, middle, bottom).
Valoare curentă: '' (neconfigurat)
Valoare implicită: 'bottom'.
d. legenda_directie : Direcția în care este orientată legenda (horizontal, vertical).
Valoare curentă: '' (neconfigurat)
Valoare implicită: 'horizontal'.
e. legenda_culoareFundal : Codul de culoare pentru fundalul legendei.
Valoare curentă: 16777215 (alb)
Valoare implicită: 16777215 (alb).
3. Proprietăți legate de grafic:
a. grafic_borduraSus, grafic_borduraJos, grafic_borduraStanga, grafic_borduraDreapta : Specifică dacă există bordură pe laturile graficului.
Valoare curentă: 1 (bordură prezentă)
Valoare implicită: 0 (fără bordură).
b. grafic_borduraCuloare : Codul de culoare pentru bordura graficului.
Valoare curentă: 13882323 (gri deschis)
Valoare implicită: 0 (negru sau altă culoare standard).
c. grafic_culoareFundal : Codul de culoare pentru fundalul graficului.
Valoare curentă: 16777215 (alb)
Valoare implicită: 16777215 (alb).
d. grafic_latime : Lățimea graficului în pixeli.
Valoare curentă: 650
Valoare implicită: 600.
e. grafic_inaltime: Înălțimea graficului în pixeli.
Valoare curentă: 280
Valoare implicită: 300.
f. grafic_adancime : Adâncimea graficului în cazul reprezentării 3D.
Valoare curentă: 30
Valoare implicită: 0.
4. Proprietăți legate de serii și valori:
a. serii : Definește categoriile afișate în grafic, fiecare având un nume (denumire) și o culoare (culoare).
Comerț cu culoare 13623994
ALTELE cu culoare 14277119
b. valori: Valorile asociate categoriilor (serie1, serie2) pentru diferite luni (eticheta).
Valoare curentă: Exemple posibile:
[
{ "eticheta": "Ianuarie", "serie1": 5000, "serie2": 3000 },
{ "eticheta": "Februarie", "serie1": 6000, "serie2": 3500 }
]
Clustered Column Chart
Clustered Column Chart este potrivit pentru compararea valorilor dintre categorii distincte. Barele individuale sunt afișate una lângă alta, ceea ce facilitează analiza diferențelor între grupuri.
1. Proprietăți principale ale graficului Clustered Column:
a. tipchart: Specifică tipul graficului. Este un grafic de tip Clustered Column.
Valoare curentă: 'Clustered Column'
Valoare implicită: Depinde de implementare; de obicei, 'Column Chart' sau alt tip comun.
b. titlu: Textul afișat ca titlu al graficului.
Valoare curentă: 'Evoluţia veniturilor pe ultimele 6 luni'
Valoare implicită: Fără titlu (șir gol '').
c. titlu_font: Tipul de font utilizat pentru titlu.
Valoare curentă: 'Arial'
Valoare implicită: 'Calibri' sau alt font standard.
d. titlu_fontBold: Specifică dacă fontul titlului este îngroșat (bold).
Valoare curentă: 1
Valoare implicită: 0 (normal).
d. titlu_fontItalic: Specifică dacă fontul titlului este italic.
Valoare curentă: 0
Valoare implicită: 0.
e. titlu_fontUnderline: Specifică dacă fontul titlului este subliniat.
Valoare curentă: 0
Valoare implicită: 0.
f. titlu_fontSize: Dimensiunea fontului titlului.
Valoare curentă: 14
Valoare implicită: 11 sau 12.
g. titlu_culoare: Codul de culoare pentru titlu (în format RGB).
Valoare curentă: -16777216 (negru)
Valoare implicită: -16777216 (negru).
2. Proprietăți legate de legendă:
a. legenda_vizibila : Specifică dacă legenda este vizibilă.
Valoare curentă: 1
Valoare implicită: 1.
b. legenda_aliniereOrizontala : Specifică alinierea orizontală a legendei (left, center, right).
Valoare curentă: 'center'
Valoare implicită: 'center'.
c. legenda_aliniereVerticala : Specifică alinierea verticală a legendei (top, middle, bottom).
Valoare curentă: '' (nenecesar în acest caz).
Valoare implicită: Depinde de implementare ('bottom' sau altă poziție implicită).
d. legenda_directie : Specifică direcția în care este orientată legenda (horizontal, vertical).
Valoare curentă: ''
Valoare implicită: 'horizontal'.
e. legenda_culoareFundal : Codul de culoare pentru fundalul legendei.
Valoare curentă: 16777215 (alb)
Valoare implicită: 16777215 (alb).
3. Proprietăți legate de grafic:
a. grafic_borduraSus, grafic_borduraJos, grafic_borduraStanga, grafic_borduraDreapta: Specifică dacă există bordură pe laturile graficului.
Valoare curentă: 1 pentru toate
Valoare implicită: 0 (fără bordură).
b. grafic_borduraCuloare: Codul de culoare pentru bordura graficului.
Valoare curentă: 13882323 (gri deschis)
Valoare implicită: 0 (negru).
c. grafic_culoareFundal: Codul de culoare pentru fundalul graficului.
Valoare curentă: 16777215 (alb)
Valoare implicită: 16777215 (alb).
d. grafic_latime: Lățimea graficului în pixeli.
Valoare curentă: 650
Valoare implicită: 600.
e. grafic_inaltime: Înălțimea graficului în pixeli.
Valoare curentă: 280
Valoare implicită: 300.
f. grafic_adancime: Specifică adâncimea 3D a graficului.
Valoare curentă: 30
Valoare implicită: 0 (grafic 2D).
4. Serii:
Reprezintă categoriile de date afișate în grafic.
Exemplu:
Comerț: Culoare 13623994
ALTELE: Culoare 14277119
5. Valori:
Reprezintă valorile pentru diferite luni.
Exemplu:
[
{ "eticheta": "Ianuarie", "serie1": 5000, "serie2": 3000 },
{ "eticheta": "Februarie", "serie1": 6000, "serie2": 3500 }
]
Line Chart
Acest tip de grafic este utilizat pentru a afișa date numerice sau categorice sub forma unei linii continue. Acest grafic conectează punctele de date printr-o linie, evidențiind tendințele și relațiile dintre valori pe un anumit interval de timp sau alte categorii.
1. Proprietăți principale ale graficului Line:
a. titlu : Textul afișat ca titlu al graficului.
Valoare curentă: 'Ponderea tipurilor de incasari''
Valoare implicită: Fără titlu ('').
b. titlu_font : Tipul de font utilizat pentru titlu.
Valoare curentă: 'Arial'
Valoare implicită: 'Calibri' sau alt font standard.
c. titlu_fontBold : Specifică dacă fontul titlului este îngroșat (bold).
Valoare curentă: 1 (bold)
Valoare implicită: 0 (normal).
d. titlu_fontItalic : Specifică dacă fontul titlului este italic.
Valoare curentă: 0 (nu este italic)
Valoare implicită: 0 (nu este italic).
e. titlu_fontUnderline : Specifică dacă fontul titlului este subliniat.
Valoare curentă: 0 (nu este subliniat)
Valoare implicită: 0 (nu este subliniat).
f. titlu_fontSize : Dimensiunea fontului titlului.
Valoare curentă: 14
Valoare implicită: 11 sau 12.
g. titlu_culoare : Codul de culoare pentru titlu (în format RGB).
Valoare curentă: -16777216 (negru).
Valoare implicită: -16777216 (negru).
2. Proprietăți legate de legendă:
a. legenda_vizibila : Specifică dacă legenda este vizibilă.
Valoare curentă: 1 (vizibil)
Valoare implicită: 1 (vizibil).
b. legenda_aliniereOrizontala : Alinierea orizontală a legendei (left, center, right).
Valoare curentă: 'center'
Valoare implicită: 'center'.
c. legenda_aliniereVerticala : Alinierea verticală a legendei (top, middle, bottom).
Valoare curentă: '' (neconfigurat)
Valoare implicită: 'bottom'.
d. legenda_directie : Direcția în care este orientată legenda (horizontal, vertical).
Valoare curentă: '' (neconfigurat)
Valoare implicită: 'horizontal'.
e. legenda_culoareFundal : Codul de culoare pentru fundalul legendei.
Valoare curentă: 16777215 (alb)
Valoare implicită: 16777215 (alb).
3. Proprietăți legate de grafic:
a. grafic_borduraSus, grafic_borduraJos, grafic_borduraStanga, grafic_borduraDreapta : Specifică dacă există bordură pe laturile graficului.
Valoare curentă: 1 (bordură prezentă)
Valoare implicită: 0 (fără bordură).
b. grafic_borduraCuloare : Codul de culoare pentru bordura graficului.
Valoare curentă: 13882323 (gri deschis)
Valoare implicită: 0 (negru sau altă culoare standard).
c. grafic_culoareFundal : Codul de culoare pentru fundalul graficului.
Valoare curentă: 16777215 (alb)
Valoare implicită: 16777215 (alb).
d. grafic_latime : Lățimea graficului în pixeli.
Valoare curentă: 650
Valoare implicită: 600.
e. grafic_inaltime: Înălțimea graficului în pixeli.
Valoare curentă: 280
Valoare implicită: 300.
f. grafic_adancime : Adâncimea graficului în cazul reprezentării 3D.
Valoare curentă: 30
Valoare implicită: 0.
4. Proprietăți legate de serii și valori:
a. serii : Definește categoriile afișate în grafic, fiecare având un nume (denumire) și o culoare (culoare).
Comerț cu culoare 13623994
ALTELE cu culoare 14277119
b. valori: Valorile asociate categoriilor (serie1, serie2) pentru diferite luni (eticheta).
Valoare curentă: Exemple posibile:
[
{ "eticheta": "Ianuarie", "serie1": 5000, "serie2": 3000 },
{ "eticheta": "Februarie", "serie1": 6000, "serie2": 3500 }
]
Stacked Line Chart
Acest tip de grafic este o extensie a graficului de tip Line, utilizat pentru a afișa valorile mai multor serii de date cumulative, adunate una peste alta. Fiecare serie de date este reprezentată ca o linie, iar valorile fiecărei serii sunt adăugate cumulativ la cele ale seriilor anterioare. Acest tip de grafic este ideal pentru a evidenția contribuțiile relative ale fiecărei serii la un total agregat.
1. Proprietăți principale ale graficului Stacked Line:
a. titlu : Textul afișat ca titlu al graficului.
Valoare curentă: 'Ponderea tipurilor de incasari''
Valoare implicită: Fără titlu ('').
b. titlu_font : Tipul de font utilizat pentru titlu.
Valoare curentă: 'Arial'
Valoare implicită: 'Calibri' sau alt font standard.
c. titlu_fontBold : Specifică dacă fontul titlului este îngroșat (bold).
Valoare curentă: 1 (bold)
Valoare implicită: 0 (normal).
d. titlu_fontItalic : Specifică dacă fontul titlului este italic.
Valoare curentă: 0 (nu este italic)
Valoare implicită: 0 (nu este italic).
e. titlu_fontUnderline : Specifică dacă fontul titlului este subliniat.
Valoare curentă: 0 (nu este subliniat)
Valoare implicită: 0 (nu este subliniat).
f. titlu_fontSize : Dimensiunea fontului titlului.
Valoare curentă: 14
Valoare implicită: 11 sau 12.
g. titlu_culoare : Codul de culoare pentru titlu (în format RGB).
Valoare curentă: -16777216 (negru).
Valoare implicită: -16777216 (negru).
2. Proprietăți legate de legendă:
a. legenda_vizibila : Specifică dacă legenda este vizibilă.
Valoare curentă: 1 (vizibil)
Valoare implicită: 1 (vizibil).
b. legenda_aliniereOrizontala : Alinierea orizontală a legendei (left, center, right).
Valoare curentă: 'center'
Valoare implicită: 'center'.
c. legenda_aliniereVerticala : Alinierea verticală a legendei (top, middle, bottom).
Valoare curentă: '' (neconfigurat)
Valoare implicită: 'bottom'.
d. legenda_directie : Direcția în care este orientată legenda (horizontal, vertical).
Valoare curentă: '' (neconfigurat)
Valoare implicită: 'horizontal'.
e. legenda_culoareFundal : Codul de culoare pentru fundalul legendei.
Valoare curentă: 16777215 (alb)
Valoare implicită: 16777215 (alb).
3. Proprietăți legate de grafic:
a. grafic_borduraSus, grafic_borduraJos, grafic_borduraStanga, grafic_borduraDreapta : Specifică dacă există bordură pe laturile graficului.
Valoare curentă: 1 (bordură prezentă)
Valoare implicită: 0 (fără bordură).
b. grafic_borduraCuloare : Codul de culoare pentru bordura graficului.
Valoare curentă: 13882323 (gri deschis)
Valoare implicită: 0 (negru sau altă culoare standard).
c. grafic_culoareFundal : Codul de culoare pentru fundalul graficului.
Valoare curentă: 16777215 (alb)
Valoare implicită: 16777215 (alb).
d. grafic_latime : Lățimea graficului în pixeli.
Valoare curentă: 650
Valoare implicită: 600.
e. grafic_inaltime: Înălțimea graficului în pixeli.
Valoare curentă: 280
Valoare implicită: 300.
f. grafic_adancime : Adâncimea graficului în cazul reprezentării 3D.
Valoare curentă: 30
Valoare implicită: 0.
4. Proprietăți legate de serii și valori:
a. serii : Definește categoriile afișate în grafic, fiecare având un nume (denumire) și o culoare (culoare).
Comerț cu culoare 13623994
ALTELE cu culoare 14277119
b. valori: Valorile asociate categoriilor (serie1, serie2) pentru diferite luni (eticheta).
Valoare curentă: Exemple posibile:
[
{ "eticheta": "Ianuarie", "serie1": 5000, "serie2": 3000 },
{ "eticheta": "Februarie", "serie1": 6000, "serie2": 3500 }
]
Pie Chart
Graficul de tip „Pie” este utilizat pentru a arăta părți dintr-un întreg. Fiecare segment reprezintă un procent din total, făcând acest tip de grafic excelent pentru evidențierea distribuțiilor.
1. Proprietăți principale ale graficului Pie:
a. titlu : Textul afișat ca titlu al graficului.
Valoare curentă: 'Evoluţia veniturilor pe ultimele 6 luni'
Valoare implicită: Fără titlu ('').
b. titlu_font : Tipul de font utilizat pentru titlu.
Valoare curentă: 'Arial'
Valoare implicită: 'Calibri' sau alt font standard.
c. titlu_fontBold : Specifică dacă fontul titlului este îngroșat (bold).
Valoare curentă: 1 (bold)
Valoare implicită: 0 (normal).
d. titlu_fontItalic : Specifică dacă fontul titlului este italic.
Valoare curentă: 0 (nu este italic)
Valoare implicită: 0 (nu este italic).
e. titlu_fontUnderline : Specifică dacă fontul titlului este subliniat.
Valoare curentă: 10 (configurație atipică, posibil greșită)
Valoare implicită: 0 (nu este subliniat).
f. titlu_fontSize : Dimensiunea fontului titlului.
Valoare curentă: 14
Valoare implicită: 11 sau 12.
g. titlu_culoare : Codul de culoare pentru titlu (în format RGB).
Valoare curentă: -16777216 (negru)
Valoare implicită: -16777216 (negru).
2. Proprietăți legate de legendă:
a. legenda_vizibila : Specifică dacă legenda este vizibilă.
Valoare curentă: 1 (vizibil)
Valoare implicită: 1 (vizibil).
b. legenda_aliniereOrizontala : Alinierea orizontală a legendei (left, center, right).
Valoare curentă: 'center'
Valoare implicită: 'center'.
c. legenda_aliniereVerticala : Alinierea verticală a legendei (top, middle, bottom).
Valoare curentă: '' (neconfigurat)
Valoare implicită: 'bottom'.
d. legenda_directie : Direcția în care este orientată legenda (horizontal, vertical).
Valoare curentă: '' (neconfigurat)
Valoare implicită: 'horizontal'.
e. legenda_culoareFundal : Codul de culoare pentru fundalul legendei.
Valoare curentă: 16777215 (alb)
Valoare implicită: 16777215 (alb).
3. Proprietăți legate de grafic:
a. grafic_borduraSus, grafic_borduraJos, grafic_borduraStanga, grafic_borduraDreapta : Specifică dacă există bordură pe laturile graficului.
Valoare curentă: 1 (bordură prezentă)
Valoare implicită: 0 (fără bordură).
b. grafic_borduraCuloare : Codul de culoare pentru bordura graficului.
Valoare curentă: 13882323 (gri deschis)
Valoare implicită: 0 (negru sau altă culoare standard).
c. grafic_culoareFundal : Codul de culoare pentru fundalul graficului.
Valoare curentă: 16777215 (alb)
Valoare implicită: 16777215 (alb).
d. grafic_latime : Lățimea graficului în pixeli.
Valoare curentă: 650
Valoare implicită: 600.
e. grafic_inaltime : Înălțimea graficului în pixeli.
Valoare curentă: 280
Valoare implicită: 300.
f. grafic_adancime : Adâncimea graficului (efect 3D).
Valoare curentă: 30
Valoare implicită: 0 (grafic 2D).
g. grafic_procentDistanta : Procentajul distanței dintre segmentele graficului.
Valoare curentă: 30
Valoare implicită: 0 (fără separare).
h. grafic_tipRotatie : Tipul de rotație utilizat pentru grafic.
Valoare curentă: 'UseAngles'
Valoare implicită: 'Default'.
i. grafic_unghiRotatie : Unghiul de rotație al graficului, în grade.
Valoare curentă: -35
Valoare implicită: 0 (fără rotație).
4. Proprietăți legate de serii și valori:
a. serii: Definește categoriile afișate în grafic, fiecare având un nume (denumire) și o culoare (culoare).
Valoare curentă: Două serii:
- Comerț cu culoare 13623994
- ALTELE cu culoare 14277119
b. valori: Valorile asociate categoriilor (serie1, serie2) pentru diferite luni (eticheta).
Valoare curentă:
[
{ "eticheta": "Ianuarie", "serie1": 5000, "serie2": 3000 },
{ "eticheta": "Februarie", "serie1": 6000, "serie2": 3500 }
]
Aceste grafice sunt integrate în rapoarte HTML prin intermediul funcțiilor personalizate, care specifică proprietăți precum: dimensiuni, culori, etichete, surse de date și multe altele. Utilizarea funcțiilor permite reutilizarea codului și asigură consistență între diverse rapoarte.
DECLARE @data_ini DATE, @data_fin DATE
SELECT @data_ini = data_ini,
@data_fin = data_fin
FROM OPENJSON(@paramsJSON)
WITH
(
[data_ini] DATE '$.data_ini',
[data_fin] DATE '$.data_fin'
)
INSERT INTO @ret_table([GRAFIC Pondere Incasari], [TABEL Incasari])
SELECT
[GRAFIC Pondere Incasari] =
( SELECT
tip = 'Pie',
titlu='Ponderea tipurilor de incasari',
titlu_font = 'Arial',
titlu_fontBold = 1,
titlu_fontItalic = 0,
titlu_fontUnderline = 10,
titlu_fontSize = 14,
titlu_culoare = -16777216,
legenda_vizibila = 1,
legenda_aliniereOrizontala = 'LEFT',
legenda_aliniereVerticala = 'CENTER',
legenda_directie = 'BOTTOMTOTOP',
legenda_culoareFundal = 16777215,
grafic_borduraSus = 0,
grafic_borduraJos = 0,
grafic_borduraStanga = 0,
grafic_borduraDreapta = 0,
grafic_borduraCuloare = 13882323,
grafic_culoareFundal = 16777215,
grafic_latime = 650,
grafic_inaltime = 280,
grafic_adancime = 30,
grafic_procentDistanta = 50,
grafic_tipRotatie = 'UseAngles',
grafic_unghiRotatie = -35,
serii = (SELECT *
FROM (SELECT denumire = 'Comert', culoare = 13623994 --
UNION
SELECT denumire = 'ALTELE', culoare = 14277119
) a
FOR JSON PATH),
valori = (SELECT TRIM(desc_plt) AS eticheta, SUM(suma) AS serie1
FROM bonfisc_cum_plt_view
WHERE anluna >= '202501'
GROUP BY tip_plt, desc_plt
FOR JSON PATH)
FOR JSON PATH, WITHOUT_ARRAY_WRAPPER) ,
[TABEL Incasari] =
(
SELECT tabel_id = '',
tabel_class = 'tabel_standard',
coloane = (SELECT *
FROM (
VALUES ('Tip incasare', 60, 'L'),
('Suma', 40, 'R')
) AS t(denumire, latime, aliniere)
FOR JSON PATH),
valori = (SELECT [coloana1], [coloana2], [rand_class], [rand_colspan]
FROM (
SELECT [coloana1] = TRIM(desc_plt),
[coloana2] = CAST(ISNULL(SUM(suma), 0) AS VARCHAR(16)) + ' RON',
[rand_class] = 'row_class',
[rand_colspan] = '1|1'
FROM bonfisc_cum_plt_view
WHERE anluna >= '202501'
GROUP BY tip_plt, desc_plt
UNION ALL
SELECT [coloana1] = 'TOTAL',
[coloana2] = CAST(SUM(suma) AS VARCHAR(16)) + ' RON',
[rand_class] = 'total_class',
[rand_colspan] = '1|1'
FROM bonfisc_cum_plt_view
WHERE anluna >= '202501') a
FOR JSON PATH)
FOR JSON PATH, WITHOUT_ARRAY_WRAPPER
)
```