Wykres SVG
Przykładowy skrypt


Przykład pokazuje w jaki sposób można utworzyć skrypt generujący wykres słupkowy porównujący dwa lata (miesiąc do miesiąca) na podstawie zużyć na węźle z modułu Media.


Parametry:


Nazwa skryptu: 'Porównanie zużyć z dwóch okresów'

pAR - okres A rok od

pBR - okres B rok od

pAM - okres miesiąc od

pLM - liczba miesięcy

pT - typ mediów, np. CO

pZ - id zasobu

Kod:


! Inicjalizacja zmiennych niezależnych od MC
PSBegin()
PSAdd('BAR_SERIA',2)
PSAdd('BAR_VEVAL')
PSAdd('XAXIS_NAME','Miesiąc')
PSAdd('YAXIS_NAME','Zużycie '&PAR('PT')&' w latach '&FR(PAR('PAR'))&'/'&FR(PAR('PBR')))
! Lista zużyć ROKMC i nazw miesięcy
! Inicjalizacja pętli
USTAW('DM','Styczeń|Luty|Marzec|Kwiecień|Maj|Czerwiec|Lipiec|Sierpień|Wrzesień|Październik|Listopad|Grudzień')
USTAW('ROKMCA',RokMc(PAR('PAR'),PAR('PAM')))
USTAW('ROKMCB',RokMc(PAR('PBR'),PAR('PAM')))
USTAW('ZUZ','')
USTAW('LMC','')
USTAW('IM',0)
LROKMCStart:
! Ustaw rok i mc : RA, RB, MC
USTAW('RA',RokMc(PAR('ROKMCA'),'R'))
USTAW('RB',RokMc(PAR('ROKMCB'),'R'))
USTAW('MC',RokMc(PAR('ROKMCA'),'M'))
! Licz zużycie w roku RA
USTAW('DOD',DajDateSzcz('PM',PAR('RA'),PAR('MC')))
USTAW('DDO',DajDateSzcz('KM',PAR('RA'),PAR('MC')))
USTAW('ZUZA',ZuzycieWezlaZb(DajWezelDlaZas(PAR('PZ'),PAR('PT')),0,PAR('DOD'),PAR('DDO')))
! Licz zużycie w roku RB
USTAW('DOD',DajDateSzcz('PM',PAR('RB'),PAR('MC')))
USTAW('DDO',DajDateSzcz('KM',PAR('RB'),PAR('MC')))
USTAW('ZUZB',ZuzycieWezlaZb(DajWezelDlaZas(PAR('PZ'),PAR('PT')),0,PAR('DOD'),PAR('DDO')))
USTAW('ZUZ',CHOOSE(LenC(PAR('ZUZ'))>0,PAR('ZUZ')&';','')&PAR('ZUZA')&';'&PAR('ZUZB'))
! Dopisz nazwę miesiąca
USTAW('LMC',CHOOSE(LENC(PAR('LMC'))>0,PAR('LMC')&';','')&_FSV(PAR('DM'),PAR('MC')))
! Krok pętli / przesuń ROKMC
INC('IM')
USTAW('ROKMCA',RokMc(PAR('ROKMCA'),'+'))
USTAW('ROKMCB',RokMc(PAR('ROKMCB'),'+'))
GOTOIF( CHOOSE( PAR('IM')<>PAR('PLM'),1,0 ), 'LROKMCStart' )
LROKMCKoniec:
PSAdd('BAR_NAME',PAR('LMC'))
PSAdd('BAR_VALUE',PAR('ZUZ'))
ECHO(SVG_Wykres:Slupki(PSGetPS()))

Przykładowe wywołanie:


SKRYPT('Porównanie zużyć z dwóch okresów','PAR=2020|PBR=2021|PAM=7|PLM=12|PT=CO|PZ='&ZAS:ID_ZAS)

Wynik z przykładowego wywołania:


<svg width="100%" height="100%" viewBox="0 0 1056 252"><style>.SVGTextLabel {font: 10px sans-serif;}</style><defs><marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse"><path d="M 0 0 L 10 5 L 0 10 z" /></marker><marker id="arrowR" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6"><path d="M 0 0 L 10 5 L 0 10 z" /></marker><marker id="arrowT" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6"><path d="M 0 10 L 5 0 L 10 10 z" /></marker></defs><rect x="40" y="202.779646017699" width="30" height="29.2203539823009" style="fill:MediumBlue"/><rect x="70" y="210.28407079646" width="30" height="21.7159292035398" style="fill:Teal"/><text x="70" y="247" text-anchor="middle" class="SVGTextLabel">Lipiec</text><rect x="120" y="178.108849557522" width="30" height="53.8911504424779" style="fill:MediumBlue"/><rect x="150" y="206.438053097345" width="30" height="25.5619469026549" style="fill:Teal"/><text x="150" y="247" text-anchor="middle" class="SVGTextLabel">Sierpień</text><rect x="200" y="200.71592920354" width="30" height="31.2840707964602" style="fill:MediumBlue"/><rect x="230" y="199.965486725664" width="30" height="32.0345132743363" style="fill:Teal"/><text x="230" y="247" text-anchor="middle" class="SVGTextLabel">Wrzesień</text><rect x="280" y="166.336283185841" width="30" height="65.6637168141593" style="fill:MediumBlue"/><rect x="310" y="176.373451327434" width="30" height="55.6265486725664" style="fill:Teal"/><text x="310" y="247" text-anchor="middle" class="SVGTextLabel">Październik</text><rect x="360" y="144.151327433628" width="30" height="87.8486725663717" style="fill:MediumBlue"/><rect x="390" y="150.952212389381" width="30" height="81.0477876106195" style="fill:Teal"/><text x="390" y="247" text-anchor="middle" class="SVGTextLabel">Listopad</text><rect x="440" y="125.437168141593" width="30" height="106.562831858407" style="fill:MediumBlue"/><rect x="470" y="129.236283185841" width="30" height="102.763716814159" style="fill:Teal"/><text x="470" y="247" text-anchor="middle" class="SVGTextLabel">Grudzień</text><rect x="520" y="232" width="30" height="0" style="fill:MediumBlue"/><rect x="550" y="117.416814159292" width="30" height="114.583185840708" style="fill:Teal"/><text x="550" y="247" text-anchor="middle" class="SVGTextLabel">Styczeń</text><rect x="600" y="107.520353982301" width="30" height="124.479646017699" style="fill:MediumBlue"/><rect x="630" y="148.325663716814" width="30" height="83.6743362831858" style="fill:Teal"/><text x="630" y="247" text-anchor="middle" class="SVGTextLabel">Luty</text><rect x="680" y="20" width="30" height="212" style="fill:MediumBlue"/><rect x="710" y="147.293805309735" width="30" height="84.7061946902655" style="fill:Teal"/><text x="710" y="247" text-anchor="middle" class="SVGTextLabel">Marzec</text><rect x="760" y="150.154867256637" width="30" height="81.8451327433628" style="fill:MediumBlue"/><rect x="790" y="166.946017699115" width="30" height="65.053982300885" style="fill:Teal"/><text x="790" y="247" text-anchor="middle" class="SVGTextLabel">Kwiecień</text><rect x="840" y="186.926548672566" width="30" height="45.0734513274336" style="fill:MediumBlue"/><rect x="870" y="194.806194690266" width="30" height="37.1938053097345" style="fill:Teal"/><text x="870" y="247" text-anchor="middle" class="SVGTextLabel">Maj</text><rect x="920" y="206.156637168142" width="30" height="25.8433628318584" style="fill:MediumBlue"/><rect x="950" y="209.158407079646" width="30" height="22.841592920354" style="fill:Teal"/><text x="950" y="247" text-anchor="middle" class="SVGTextLabel">Czerwiec</text><g stroke="black" stroke-width="1"><line x1="20" y1="232" x2="1046" y2="232" marker-end="url(#arrowR)"/><line x1="20" y1="232" x2="20" y2="10" marker-end="url(#arrowT)"/></g><text x="1046" y="247" text-anchor="end" class="SVGTextLabel">Miesiąc</text><g transform="translate(12.5, 10) rotate(-90)"><text x="0" y="0" text-anchor="end" class="SVGTextLabel">Zużycie CO w latach 2020/2021</text></g></svg>