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 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
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&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
    )

3 Replies

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

    Hi Anonymous ,

     

    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.