skip to main content
Power BI
    • What is Power BI
    • Why Power BI
    • Customer stories
    • Data visuals
    • Security
    • Power BI Desktop
    • Power BI Pro
    • Power BI Premium
    • Power BI Mobile
    • Power BI Embedded
    • Power BI Report Server
  • Pricing
    • Azure + Power BI
    • Office 365 + Power BI
      • Energy
      • Healthcare
      • Manufacturing
      • Retail
    • For analysts
    • For IT
      • Overview
      • Embedded analytics
      • Power BI visuals
      • Automation
      • Documentation
      • Community
    • Overview
    • Find consulting services
    • Partner showcase
    • Find a partner
    • Become a partner
    • Instructor-led Training
      • Overview
      • Guided learning
      • Documentation
      • Webinars
      • Roadmap
      • Overview
      • Issues
      • Give feedback
    • Blog
    • Overview
    • Forums
    • Galleries
    • Submit ideas
    • Events
    • User groups
    • Community blog
    • Register
    • ·
    • Sign In
    • ·
    • Help
    Go To
    • Galleries
    • COVID-19 Data Stories Gallery
    • Themes Gallery
    • Data Stories Gallery
    • R Script Showcase
    • Webinars and Video Gallery
    • Quick Measures Gallery
    • MBAS Gallery
    • MBAS Gallery 2020
    cancel
    Turn on suggestions
    Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
    Showing results for 
    Search instead for 
    Did you mean: 
    • Microsoft Power BI Community
    • Galleries
    • Quick Measures Gallery
    • Re: Simple SVG KPI (Power BI august 2018 update)

    Re: Simple SVG KPI (Power BI august 2018 update)

    02-19-2021 21:34 PM

    Super User I stevedep
    Super User I
    176 Views
    LinkedIn LinkedIn Facebook Facebook Twitter Twitter
    matemusic
    matemusic Advocate III
    Advocate III
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    Simple SVG KPI (Power BI august 2018 update)

    ‎08-09-2018 09:14 AM

    Hi,

     

    based on the last update Power BI video of SVG visualisation here is a measure, that creates simple KPI. 

    User has to add reference for 3 values: Main Value, Goal and Max Value.

    Based on values KPI color is changing to green or red. User can also change colors or edit if function for color changing.

    Measure category has to be Image URL.

    Visualisation only works in table visual. I hope someday will works in other visualisations too. 

    Maybe there is a change to get a simple visualisation, where DAX measure could return HTML code for creating custom visuals.

    If you like measure, please use it and improve it. Please share your versions of measure.

    Code: 

    SVG KPI = 
    ------------------------DATA (replace values)-------------------------
    VAR MainValue = 'Value'[Measure] 
    VAR GoalValue = 'Goal'[Goal Value]
    VAR MaxValue = 'Max Value'[MaxValue] //End value of bar must be higher than value and goal
    VAR GoalTxt = "Goal"
    -----------------------COLORS--------------------
    VAR ColorGood= "Green"
    VAR ColorBad ="Red"
    VAR GoalColor = "Orange"
    ----------------IF statement for colors------------------------------------------
    VAR KPIColor = if(GoalValue<=MainValue;ColorGood;ColorBad)
    ---------------------------------------
    VAR ValuePos = MainValue/MaxValue*100
    VAR GoalPos = GoalValue/MaxValue*100
    VAR PicHigh = "150"
    VAR PicWidth ="150"
    ------------------- SVG code
    VAR SvgC = 
    "
    <text x='0' y='25' font-size='35' fill='"&KPIColor&"'>"&MainValue&"</text>
    <text x='0' y='55' font-size='25' fill='Orange'>"&GoalTxt&" "&GoalValue&"</text>
    <rect x='0' y='70' rx='0,5' ry='20' width='100%' height='25'
      style='fill:white;stroke:black' />
    <rect x='0' y='70' rx='0,5' ry='20' width='"&ValuePos&"%' height='25'
      style='fill:"&KPIColor&";stroke:black' />
    <line x1='"&GoalPos&"%' y1='65' x2='"&GoalPos&"%' y2='200' style='stroke:"&GoalColor&";stroke-width:3' />
    "
    ------------SVG - start code & end code
    VAR Cd1=
    "data&colon;image/svg+xml;charset=utf-8," &
    "<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px'
        width='"&PicWidth&"' 
        height='"&PicHigh&"' 
         viewBox = '0 0 100 100'> "
    VAR Cd2 = " </svg>"
    RETURN
    Cd1&SvgC&Cd2
     

     

     

    Preview file
    5 KB
    KPI SVG.pbix
    Labels:
    • Labels:
    • Other
    Message 1 of 2
    6,441 Views
    9
    Reply
    • All forum topics
    • Previous Topic
    • Next Topic
    stevedep
    Super User I stevedep
    Super User I
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎02-19-2021 09:34 PM

    That's really cool! I was not aware we can (prototype) Custom Visual Development like this. Great to quickly create a custom visual! 


    Did I answer your question? Mark my post as a solution!

    Proud to be a Super User!

    My Blog - Power M code to automatically detect column types -
    How to create test data using DAX!



    Message 2 of 2
    176 Views
    0
    Reply
    Preview Exit Preview

    never-displayed

    You must be signed in to add attachments

    never-displayed

    Additional options
    You do not have permission to remove this product association.
     

    Power Platform

    • Overview
    • Power BI
    • Power Apps
    • Power Automate
    • Power Virtual Agents

    • Sign in
    • Sign up

    Browse

    • Solutions
    • Partners
    • Consulting Services

    Downloads

    • Power BI Desktop
    • Power BI Mobile
    • Power BI Report Server
    • See all downloads

    Learn

    • Guided learning
    • Documentation
    • Support
    • Community
    • Give feedback
    • Webinars
    • Developers
    • Blog
    • Newsletter

    • © 2021 Microsoft
    • Follow Power BI
    • Privacy & cookies
    • Manage cookies
    • Terms of use
    • Trademarks