😎 Show Progress with customized SVGs

These are the SVG Versions that are available for the Progress Bars:

Version 1:

0_SVG Progress V1 =

--- Please adapt this

Var Style = "Segoe UI"

Var Header = "Order Intake"

Var ActualValue = [Order Intake]

Var Target = [Order Target]

Var Unit = "€"

Var Width = 0.9

Var FontSizeTitle = 0.8 ---Main Title, Subtitle is adapted accordingly

Var HeightBars = 0.12

Var ColorTargetBar = "#d9d9d9"

Var ColorProgressBar = "#00c4cc"

--- This does not have to be adapted

---General Infos

Var Progress = Format(DIVIDE(ActualValue,Target,0),"0%" )

Var ProgressWidth = Format(DIVIDE(ActualValue,Target,0)*Width,"0%" )

--Text

Var ProgressTextAlign = Format(DIVIDE(ActualValue,Target,0)*Width+0.03,"0%" )

Var ProgressTitle = ActualValue & " of " & Target & " " & Unit

Var FontHeader = FORMAT ( FontSizeTitle, "0%" )

Var FontSizeSubitle = 0.7*FontSizeTitle

Var FontSubeader = FORMAT ( FontSizeSubitle, "0%" )

Var DistSubheader = FORMAT ( 0.22*FontSizeTitle , "0.0%" )

---Bars

Var WidthBar = FORMAT ( Width, "0.0%" )

Var HeightBars_ = FORMAT ( HeightBars, "0.0%" )

Var DistBar = FORMAT ( 0.27*FontSizeTitle , "0.0%" )

Var DistBarText = FORMAT ( 0.27*FontSizeTitle + HeightBars*2/3, "0.0%" )

---Dividers

Var D1 = Format(Width*0.25,"0.0%" )

Var D2 = Format(Width*0.5,"0.0%" )

Var D3 = Format(Width*0.75,"0.0%" )

Var SVGImage =

"data:image/svg+xml;utf8," & "<svg xmlns=""http://www.w3.org/2000/svg"">" &

-- Title --

"<text x='0' y=""10%"" font-size=""" & FontHeader & """ font-family = """ & Style & """ font-weight='bold' fill='#000' > " & Header & " </text>" &

-- Progress Info --

"<text x='0' y=""" & DistSubheader & """ font-size=""" & FontSubeader & """ font-family = """ & Style & """ fill='#000'> " & ProgressTitle & " </text> " &

-- Progress Bar Background --

"<rect x='0' y=""" & DistBar & """ width=""" & WidthBar & """ height=""" & HeightBars_ & """ fill=""" & ColorTargetBar & """ rx='5' />" &

-- Filled Progress --

"<rect x='0' y=""" & DistBar & """ width=""" & ProgressWidth & """ height=""" & HeightBars_ & """ fill=""" & ColorProgressBar & """ rx='5' />" &

"<text x=""" & ProgressTextAlign & """ y=""" & DistBarText & """ font-size=""" & FontSubeader & """ font-family = """ & Style & """ fill='#000'> " & Progress & " </text> " &

-- Divisions --

"<rect x=""" & D1 & """ y=""" & DistBar & """ width='1' height=""" & HeightBars_ & """ fill='#ffff' opacity='0.8' />" &

"<rect x=""" & D2 & """ y=""" & DistBar & """ width='1' height=""" & HeightBars_ & """ fill='#fff' opacity='0.8' />" &

"<rect x=""" & D3 & """ y=""" & DistBar & """ width='1' height=""" & HeightBars_ & """ fill='#fff' opacity='0.8' />" &

"</svg>"

RETURN SVGImage

Version 2:

0_SVG Progress V3 =

--- Please adapt this

Var Style = "Segoe UI"

Var Header = "Order Intake"

Var ActualValue = [Order Intake]

Var Target = [Order Target]

Var Unit = "€"

Var Width = 0.9

Var FontSizeTitle = 0.8 ---Main Title, Subtitle is adapted accordingly

Var HeightBars = 0.12

Var ColorTargetBar = "#d9d9d9"

Var ColorProgressBar = "#00c4cc"

--- This does not have to be adapted

---General Infos

Var Progress = Format(DIVIDE(ActualValue,Target,0)*100,"0" )

Var ProgressWidth = Format(DIVIDE(ActualValue,Target,0)*Width,"0%" )

--Text

Var ProgressTextAlign = Format(DIVIDE(ActualValue,Target,0)*Width+0.03,"0%" )

Var ProgressTitle = ActualValue & " of " & Target & " " & Unit

Var FontHeader = FORMAT ( FontSizeTitle, "0%" )

Var FontSizeSubitle = 0.7*FontSizeTitle

Var FontSubeader = FORMAT ( FontSizeSubitle, "0%" )

Var DistSubheader = FORMAT ( 0.22*FontSizeTitle , "0.0%" )

---Bars

Var WidthBar = FORMAT ( Width, "0.0%" )

Var HeightBars_ = FORMAT ( HeightBars, "0.0%" )

Var DistBar = FORMAT ( 0.27*FontSizeTitle , "0.0%" )

Var DistBarText = FORMAT ( 0.27*FontSizeTitle + HeightBars*2/3, "0.0%" )

Var DistPercText = FORMAT ( 0.27*FontSizeTitle + HeightBars*1.6, "0.0%" )

---Dividers

Var D1 = Format(Width*0.25,"0.0%" )

Var D2 = Format(Width*0.5,"0.0%" )

Var D3 = Format(Width*0.75,"0.0%" )

Var SVGImage =

"data:image/svg+xml;utf8," & "<svg xmlns=""http://www.w3.org/2000/svg"">" &

-- Title --

"<text x='0' y=""10%"" font-size=""" & FontHeader & """ font-family = """ & Style & """ font-weight='bold' fill='#000' > " & Header & " </text>" &

-- Progress Info --

"<text x='0' y=""" & DistSubheader & """ font-size=""" & FontSubeader & """ font-family = """ & Style & """ fill='#000'> " & ProgressTitle & " </text> " &

-- Progress Bar Background --

"<rect x='0' y=""" & DistBar & """ width=""" & WidthBar & """ height=""" & HeightBars_ & """ fill=""" & ColorTargetBar & """ rx='5' />" &

-- Filled Progress --

"<rect x='0' y=""" & DistBar & """ width=""" & ProgressWidth & """ height=""" & HeightBars_ & """ fill=""" & ColorProgressBar & """ rx='5' />" &

"<text x=""" & ProgressTextAlign & """ y=""" & DistBarText & """ font-size=""" & FontSubeader & """ font-family = """ & Style & """ fill='#000'> " & Progress & " </text> " &

-- Divisions --

"<rect x=""" & D1 & """ y=""" & DistBar & """ width='1' height=""" & HeightBars_ & """ fill='#ffff' opacity='0.8' />" &

"<rect x=""" & D2 & """ y=""" & DistBar & """ width='1' height=""" & HeightBars_ & """ fill='#fff' opacity='0.8' />" &

"<rect x=""" & D3 & """ y=""" & DistBar & """ width='1' height=""" & HeightBars_ & """ fill='#fff' opacity='0.8' />" &

-- Percentage text

"<text x=""" & D1 & """ y=""" & DistPercText & """ font-size=""" & FontSubeader & """ font-family = """ & Style & """ text-anchor='middle' fill='#000'> 25% </text> " &

"<text x=""" & D2 & """ y=""" & DistPercText & """ font-size=""" & FontSubeader & """ font-family = """ & Style & """ text-anchor='middle' fill='#000'> 50% </text> " &

"<text x=""" & D3 & """ y=""" & DistPercText & """ font-size=""" & FontSubeader & """ font-family = """ & Style & """ text-anchor='middle' fill='#000'> 75% </text> " &

"<text x=""" & WidthBar & """ y=""" & DistPercText & """ font-size=""" & FontSubeader & """ font-family = """ & Style & """ text-anchor='middle' fill='#000'> 100% </text> " &

"</svg>"

RETURN SVGImage

Version 3:

0_SVG Progress V2 =

--- Please adapt this

Var Style = "Segoe UI"

Var Header = "Order Intake"

Var ActualValue = [Order Intake]

Var Target = [Order Target]

Var Unit = "€"

Var Width = 0.9

Var FontSizeTitle = 0.8 ---Main Title, Subtitle is adapted accordingly

Var HeightBars = 0.12

Var ColorTargetBar = "#d9d9d9"

Var ColorProgressBar = "#00c4cc"

--- This does not have to be adapted

---General Infos

Var Progress = Format(DIVIDE(ActualValue,Target,0),"0%" )

Var ProgressWidth = Format(DIVIDE(ActualValue,Target,0)*Width,"0%" )

--Text

Var ProgressTextAlign = Format(DIVIDE(ActualValue,Target,0)*Width+0.03,"0%" )

Var ProgressTitle = ActualValue & " of " & Target & " " & Unit

Var FontHeader = FORMAT ( FontSizeTitle, "0%" )

Var FontSizeSubitle = 0.7*FontSizeTitle

Var FontSubeader = FORMAT ( FontSizeSubitle, "0%" )

Var DistSubheader = FORMAT ( 0.22*FontSizeTitle , "0.0%" )

---Bars

Var WidthBar = FORMAT ( Width, "0.0%" )

Var HeightBars_ = FORMAT ( HeightBars, "0.0%" )

Var DistBar = FORMAT ( 0.27*FontSizeTitle , "0.0%" )

Var DistBarText = FORMAT ( 0.27*FontSizeTitle + HeightBars*2/3, "0.0%" )

---Dividers

Var D1 = Format(Width*0.1,"0.0%" )

Var D2 = Format(Width*0.2,"0.0%" )

Var D3 = Format(Width*0.3,"0.0%" )

Var D4 = Format(Width*0.4,"0.0%" )

Var D5 = Format(Width*0.5,"0.0%" )

Var D6 = Format(Width*0.6,"0.0%" )

Var D7 = Format(Width*0.7,"0.0%" )

Var D8 = Format(Width*0.8,"0.0%" )

Var D9 = Format(Width*0.9,"0.0%" )

Var SVGImage =

"data:image/svg+xml;utf8," & "<svg xmlns=""http://www.w3.org/2000/svg"">" &

-- Title --

"<text x='0' y=""10%"" font-size=""" & FontHeader & """ font-family = """ & Style & """ font-weight='bold' fill='#000' > " & Header & " </text>" &

-- Progress Info --

"<text x='0' y=""" & DistSubheader & """ font-size=""" & FontSubeader & """ font-family = """ & Style & """ fill='#000'> " & ProgressTitle & " </text> " &

-- Progress Bar Background --

"<rect x='0' y=""" & DistBar & """ width=""" & WidthBar & """ height=""" & HeightBars_ & """ fill=""" & ColorTargetBar & """ rx='5' />" &

-- Filled Progress --

"<rect x='0' y=""" & DistBar & """ width=""" & ProgressWidth & """ height=""" & HeightBars_ & """ fill=""" & ColorProgressBar & """ rx='5' />" &

"<text x=""" & ProgressTextAlign & """ y=""" & DistBarText & """ font-size=""" & FontSubeader & """ font-family = """ & Style & """ fill='#000'> " & Progress & " </text> " &

-- Divisions --

"<rect x=""" & D1 & """ y=""" & DistBar & """ width='1' height=""" & HeightBars_ & """ fill='#ffff' opacity='0.8' />" &

"<rect x=""" & D2 & """ y=""" & DistBar & """ width='1' height=""" & HeightBars_ & """ fill='#fff' opacity='0.8' />" &

"<rect x=""" & D3 & """ y=""" & DistBar & """ width='1' height=""" & HeightBars_ & """ fill='#fff' opacity='0.8' />" &

"<rect x=""" & D4 & """ y=""" & DistBar & """ width='1' height=""" & HeightBars_ & """ fill='#fff' opacity='0.8' />" &

"<rect x=""" & D5 & """ y=""" & DistBar & """ width='1' height=""" & HeightBars_ & """ fill='#fff' opacity='0.8' />" &

"<rect x=""" & D6 & """ y=""" & DistBar & """ width='1' height=""" & HeightBars_ & """ fill='#fff' opacity='0.8' />" &

"<rect x=""" & D7 & """ y=""" & DistBar & """ width='1' height=""" & HeightBars_ & """ fill='#fff' opacity='0.8' />" &

"<rect x=""" & D8 & """ y=""" & DistBar & """ width='1' height=""" & HeightBars_ & """ fill='#fff' opacity='0.8' />" &

"<rect x=""" & D9 & """ y=""" & DistBar & """ width='1' height=""" & HeightBars_ & """ fill='#fff' opacity='0.8' />" &

"</svg>"

RETURN SVGImage

Version 4:

0_SVG Progress V4 =