Forum Discussion

Anonymous's avatar
Anonymous
Not applicable
1 year ago
Solved

Embedded a pie chart in a matrix

Hello everyone,

 

I'm facing an issue embedding a pie chart in a matrix.
I'm working on a Tableau migration, and one of my reports uses a matrix that contains pie charts.

Everything is dynamic, so the pie chart displays the correct measure for each value.

I cannot use Power BI Paginated Reports, so I need to find a way to achieve this in Power BI Desktop.

Does anyone have any ideas on how to accomplish this?

 

Thanks in advance!

  • You can create a SVG with a measure

     

    Here is a example for a pie chart

     

    You need to set the measure category to image URL for it to display correctly 

  • Hello, 

    I had to do something similar for a customer, 

    I used SVG approach, this is the code I used if it could help you 🙂

     

    Values_Donut = 
    // ----------- PARAMETERS -----------
    // Define chart properties
    VAR _Radius = 50
    VAR _DonutWidth = 10

     

    // Calculate measures for each category
    VAR Total = COUNT(Revis[RevisionDescription (groups)])
    VAR _MeasureOne = CALCULATE(COUNT(Revis[RevisionDescription (groups)]), Revis[RevisionDescription (groups)] = "First mention")
    VAR _MeasureTwo = CALCULATE(COUNT(Revis[RevisionDescription (groups)]), Revis[RevisionDescription (groups)] = "Broadly unchanged wording & ...")
    VAR _MeasureThree = CALCULATE(COUNT(Revis[RevisionDescription (groups)]), Revis[RevisionDescription (groups)] = "Significant redrafting")

     

    // Define colors
    VAR _FirstColour = "#8a7200"
    VAR _SecondColour = "#ab1d65"
    VAR _ThirdColour = "#54761f"

     

    // ----------- CALCULATE ANGLES -----------
    VAR _Total = _MeasureOne + _MeasureTwo + _MeasureThree

     

    VAR _AngleOne = IF(NOT ISBLANK(_Total), DIVIDE(_MeasureOne, _Total, 0) * 100, 0)
    VAR _AngleTwo = IF(NOT ISBLANK(_Total), DIVIDE(_MeasureTwo, _Total, 0) * 100, 0)
    VAR _AngleThree = IF(NOT ISBLANK(_Total), DIVIDE(_MeasureThree, _Total, 0) * 100, 0)

     

    // Calculate stroke offsets
    VAR _OffsetTwo = 100 - _AngleOne + 25
    VAR _OffsetThree = 100 - (_AngleOne + _AngleTwo) + 25

     

    I put the return in a second answer 🙂 

  • Cookistador's avatar
    Cookistador
    1 year ago

    RETURN
    IF(
        ISINSCOPE(Revis[Condition Date Format]),
        "data:image/svg+xml;utf8," & 
        "<svg width=""100%"" height=""100%"" xmlns=""http://www.w3.org/2000/svg"" viewBox=""0 0 " & _Radius & " " & _Radius & """ class=""donut"">" &
            "<circle class=""segment"" cx=""" & _Radius / 2 & """ cy=""" & _Radius / 2 & """ r=""15.91549430918954"" fill=""transparent"" stroke=""" & _FirstColour & """ stroke-width=""" & _DonutWidth & """ stroke-dasharray=""" & _AngleOne & " " & 100 - _AngleOne & """ stroke-dashoffset=""25""></circle>" &
            "<circle class=""segment"" cx=""" & _Radius / 2 & """ cy=""" & _Radius / 2 & """ r=""15.91549430918954"" fill=""transparent"" stroke=""" & _SecondColour & """ stroke-width=""" & _DonutWidth & """ stroke-dasharray=""" & _AngleTwo & " " & 100 - _AngleTwo & """ stroke-dashoffset=""" & _OffsetTwo & """></circle>" &
            "<circle class=""segment"" cx=""" & _Radius / 2 & """ cy=""" & _Radius / 2 & """ r=""15.91549430918954"" fill=""transparent"" stroke=""" & _ThirdColour & """ stroke-width=""" & _DonutWidth & """ stroke-dasharray=""" & _AngleThree & " " & 100 - _AngleThree & """ stroke-dashoffset=""" & _OffsetThree & """></circle>" &
        "</svg>",
        "data&colon;image/svg+xml;utf8, <svg height=""200"" width=""200"" xmlns=""http://www.w3.org/2000/svg"">
    <text x=""50"" y=""100"" fill=""black"" font-family=""Calibri"" font-size=""48"">" & Total & "</text>
    </svg>"
    )

4 Replies

  • Deku's avatar
    Deku
    Super User

    You can create a SVG with a measure

     

    Here is a example for a pie chart

     

    You need to set the measure category to image URL for it to display correctly 

  • Hello, 

    I had to do something similar for a customer, 

    I used SVG approach, this is the code I used if it could help you 🙂

     

    Values_Donut = 
    // ----------- PARAMETERS -----------
    // Define chart properties
    VAR _Radius = 50
    VAR _DonutWidth = 10

     

    // Calculate measures for each category
    VAR Total = COUNT(Revis[RevisionDescription (groups)])
    VAR _MeasureOne = CALCULATE(COUNT(Revis[RevisionDescription (groups)]), Revis[RevisionDescription (groups)] = "First mention")
    VAR _MeasureTwo = CALCULATE(COUNT(Revis[RevisionDescription (groups)]), Revis[RevisionDescription (groups)] = "Broadly unchanged wording & ...")
    VAR _MeasureThree = CALCULATE(COUNT(Revis[RevisionDescription (groups)]), Revis[RevisionDescription (groups)] = "Significant redrafting")

     

    // Define colors
    VAR _FirstColour = "#8a7200"
    VAR _SecondColour = "#ab1d65"
    VAR _ThirdColour = "#54761f"

     

    // ----------- CALCULATE ANGLES -----------
    VAR _Total = _MeasureOne + _MeasureTwo + _MeasureThree

     

    VAR _AngleOne = IF(NOT ISBLANK(_Total), DIVIDE(_MeasureOne, _Total, 0) * 100, 0)
    VAR _AngleTwo = IF(NOT ISBLANK(_Total), DIVIDE(_MeasureTwo, _Total, 0) * 100, 0)
    VAR _AngleThree = IF(NOT ISBLANK(_Total), DIVIDE(_MeasureThree, _Total, 0) * 100, 0)

     

    // Calculate stroke offsets
    VAR _OffsetTwo = 100 - _AngleOne + 25
    VAR _OffsetThree = 100 - (_AngleOne + _AngleTwo) + 25

     

    I put the return in a second answer 🙂 

    • Cookistador's avatar
      Cookistador
      Super User

      RETURN
      IF(
          ISINSCOPE(Revis[Condition Date Format]),
          "data&colon;image/svg+xml;utf8," & 
          "<svg width=""100%"" height=""100%"" xmlns=""http://www.w3.org/2000/svg"" viewBox=""0 0 " & _Radius & " " & _Radius & """ class=""donut"">" &
              "<circle class=""segment"" cx=""" & _Radius / 2 & """ cy=""" & _Radius / 2 & """ r=""15.91549430918954"" fill=""transparent"" stroke=""" & _FirstColour & """ stroke-width=""" & _DonutWidth & """ stroke-dasharray=""" & _AngleOne & " " & 100 - _AngleOne & """ stroke-dashoffset=""25""></circle>" &
              "<circle class=""segment"" cx=""" & _Radius / 2 & """ cy=""" & _Radius / 2 & """ r=""15.91549430918954"" fill=""transparent"" stroke=""" & _SecondColour & """ stroke-width=""" & _DonutWidth & """ stroke-dasharray=""" & _AngleTwo & " " & 100 - _AngleTwo & """ stroke-dashoffset=""" & _OffsetTwo & """></circle>" &
              "<circle class=""segment"" cx=""" & _Radius / 2 & """ cy=""" & _Radius / 2 & """ r=""15.91549430918954"" fill=""transparent"" stroke=""" & _ThirdColour & """ stroke-width=""" & _DonutWidth & """ stroke-dasharray=""" & _AngleThree & " " & 100 - _AngleThree & """ stroke-dashoffset=""" & _OffsetThree & """></circle>" &
          "</svg>",
          "data&colon;image/svg+xml;utf8, <svg height=""200"" width=""200"" xmlns=""http://www.w3.org/2000/svg"">
      <text x=""50"" y=""100"" fill=""black"" font-family=""Calibri"" font-size=""48"">" & Total & "</text>
      </svg>"
      )

  • Anonymous's avatar
    Anonymous
    Not applicable

    Thank you
    I was able to build what I neeed with your help