Forum Discussion

Anonymous's avatar
Anonymous
Not applicable
2 years ago
Solved

SVG column chart

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 ...
Need Help
  • Anonymous's avatar
    Anonymous
    2 years ago
    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: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
    )
Anonymous's avatar
Anonymous
Not applicable
2 years ago

Hi Anonymous 

 

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!

Anonymous's avatar
Anonymous
Not applicable
2 years ago
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
)