SVG column chart

[JohanvA]

Hi everyone,

I want to plot this SVG code in a matrix table. It represents a column chart.

Unfortunately, I have two issues:

- All (10) columns are the same height instead of being adjusted to the height based on the max. Brutomarge

- The format in label is not represented in the column charts; I only see the first number instead of the number in thousands 

(e.g. 512345 should be 512K, but I only see the 5). 

If more information is provided, let me know! I will have to create a sample set then. 

The code is as following:

SVG Column Chart =

-- Header Information

VAR xmldecleration = "data:image/svg+xml;utfa, "

VAR namespace = "xmlns='http://www.w3.org/2000/svg' "

VAR visualwidth = 80

VAR visualheight = 380

VAR paddingbottom = 50

VAR size = "width='" & visualwidth & "' height='" & visualheight & "' "

VAR header = xmldecleration & "<svg " & namespace & size & ">"

-- Design Elements

VAR fillcolor =

    "<defs>

        <linearGradient id='barGradient' x1='0%' y1='100%' x2='0%' y2='0%'>

        <stop offset='0%' style='stop-color: orange; stop-opacity: 0.9' />

        <stop offset='100%' style='stop-color: purple; stop-opacity: 1' />

        </linearGradient>

    </defs>"

VAR animation =

    "<animate attributeName='height' from='0' to='" & visualheight & "' dur='1s' begin='2s' fill='freeze' />

    <animate attributeName='opacity' from='0' to='1' dur='1s' begin='2s' fill='freeze' />"

VAR textstyle =

 "<style>

    text {

      font-family: 'Calibri', sans-serif;

      font-size='18';

      font-color = 'black'

    }

</style>"

-- Measure Values

VAR measurevalueMax = CALCULATE([Brutomarge], ALLSELECTED(Grootboektransacties[Project]))

VAR measurevalue = [Brutomarge]

var columnheight = DIVIDE( [Brutomarge] , measurevalueMax ) * (visualheight - paddingbottom)

VAR columnwidth = visualwidth * 0.7

VAR label = FORMAT( measurevalue , "#,##0,.0" ) & "K"

VAR axislabel = SELECTEDVALUE( Grootboektransacties[Project] )

-- SVG image

VAR img =

header & textstyle &

"

        <rect x='0' y='" & ( visualheight - columnheight ) & "' width='" & columnwidth & "' height='" & columnheight & "' fill='url(#barGradient)'>

            " & animation & "

        </rect>

            " & fillcolor & "

        <text x='" & ( columnwidth / 2 ) & "' y='" & ( visualheight - columnheight - 10 ) & "' text-anchor='middle' font-size='16'>" & label & "</text>

        <text x='" & ( columnwidth / 2 ) & "' y='" & 370 & "' text-anchor='middle' font-size='14'>" & axislabel & "</text>

    </svg>

"

RETURN

img

[JohanvA]

Hi @v-jingzhan-msft ,

Thanks for your reply. 

Adjusting the row padding value doesn't have effect on the chart, and it not about the settings, but a change in the measure is required. 

The formatting didn't have an effect either unfortunately. 

I added two images here below. The first image is how it looks now, and the second option is the desired one. I hope this clarifies it somewhat more. 

[v-jingzhan-msft]

Hi @JohanvA 

You can set the Row padding value to adjust the height of rows. However every row in a table/matrix visual has the same height. It doesn't support different heights for rows at present. 

For the second issue, I'm not sure if this works but you may have a try: 

FORMAT( [Column1] , "#,##0,.0K" )

Best Regards,
Jing
If this post helps, please Accept it as Solution to help other members find it. Appreciate your Kudos!

[JohanvA · Accepted solution]

Hello everyone, 

the SVG is working now, and feel free to copy/paste it, and adjust it to your own dataset. 

I had to make some transformations:

- apparently the VAR columnheight needed a FORMAT function, although is was working without in one of my other dashboards

- since the values could be negative, I had to add a new VAR (newheight), and adjust the measure accordingly

- an IF-statement is added at the end, to make the distinction between negative and positve results

- I couldn't get the animation function working properly, so I deleted that in the end result. The VAR animation is still in it. You could add it back in the measure if you want

SVG Column Chart =

-- Header Information

VAR xmldecleration = "data&colon;image/svg+xml;utfa, "

VAR namespace = "xmlns='http://www.w3.org/2000/svg' "

VAR visualwidth = 80

VAR visualheight = 200

VAR newheight = 400

VAR paddingbottom = 50

VAR size = "width='" & visualwidth & "' height='" & newheight & "' "

VAR header = xmldecleration & "<svg " & namespace & size & ">"

-- Design Elements

VAR fillcolor =

    "<defs>

        <linearGradient id='barGradient' x1='0%' y1='100%' x2='0%' y2='0%'>

        <stop offset='0%' style='stop-color: orange; stop-opacity: 0.9' />

        <stop offset='100%' style='stop-color: purple; stop-opacity: 1' />

        </linearGradient>

    </defs>"

VAR animation =

    "<animate attributeName='height' from='0' to='" & visualheight & "' dur='1s' begin='2s' fill='freeze' />

    <animate attributeName='opacity' from='0' to='1' dur='1s' begin='2s' fill='freeze' />"

VAR textstyle =

 "<style>

    text {

      font-family: 'Calibri', sans-serif;

      font-size='18';

      font-color = 'black'

    }

</style>"

-- Measure Values

VAR measurevalueMax = MAXX(ALLSELECTED(Grootboektransacties[Project]) , CALCULATE([Brutomarge] ) )

VAR measurevalueMin = MINX(ALLSELECTED(Grootboektransacties[Project]) , CALCULATE([Brutomarge] ) )

VAR measurevalue = [Brutomarge]

var columnheight =

IF(

    [Brutomarge] <0,

    FORMAT(DIVIDE( [Brutomarge] , measurevalueMin ) * (visualheight - paddingbottom), "#,##"),

    FORMAT(DIVIDE( [Brutomarge] , measurevalueMax ) * (visualheight - paddingbottom), "#,##")

)

VAR columnwidth = visualwidth * 0.7

VAR label = FORMAT( measurevalue , "#,##0,.0" ) & "K"

VAR axislabel = SELECTEDVALUE( Grootboektransacties[Project] )

-- SVG image

VAR imgpositive =

header & textstyle &

"

        <rect x='0' y='" & ( visualheight - columnheight ) & "' width='" & columnwidth & "' height='" & columnheight & "' fill='url(#barGradient)'>

        </rect>

            " & fillcolor & "

        <text x='" & ( columnwidth / 2 ) & "' y='" & ( visualheight - columnheight - 10 ) & "' text-anchor='middle' font-size='16'>" & label & "</text>

        <text x='" & ( columnwidth / 2 ) & "' y='" & 380 & "' text-anchor='middle' font-size='14'>" & axislabel & "</text>

    </svg>

"

VAR imgnegative =

header & textstyle &

"

        <rect x='0' y='" & ( visualheight ) & "' width='" & columnwidth & "' height='" & columnheight & "' fill='url(#barGradient)'>

        </rect>

            " & fillcolor & "

        <text x='" & ( columnwidth / 2 ) & "' y='" & ( visualheight - 10 ) & "' text-anchor='middle' font-size='16'>" & label & "</text>

        <text x='" & ( columnwidth / 2 ) & "' y='" & 380 & "' text-anchor='middle' font-size='14'>" & axislabel & "</text>

    </svg>

"

RETURN

IF(

    [Brutomarge] <0,

    imgnegative,

    imgpositive

)