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
    • Microsoft 365 + Power BI
    • Dynamics 365 + Power BI
      • Energy
      • Healthcare
      • Manufacturing
      • Media
      • Retail
    • For analysts
    • For IT
      • Overview
      • Embedded analytics
      • Power BI visuals
      • Automation
      • Documentation
      • Community
    • Getting started
      • Overview
      • Self-guided learning
      • Webinars
      • Documentation
      • Roadmap
      • Overview
      • Issues
      • Give feedback
    • Blog
    • Business intelligence topics
    • Overview
    • Forums
    • Galleries
    • Submit ideas
    • Events
    • User groups
    • Community blog
    • Register
    • ·
    • Sign in
    • ·
    • Help
    Go To
    • Microsoft Power BI Community
    • Welcome to the Community!
    • News & Announcements
    • Get Help with Power BI
    • Desktop
    • Service
    • Report Server
    • Power Query
    • Mobile Apps
    • Developer
    • DAX Commands and Tips
    • Custom Visuals Development Discussion
    • Health and Life Sciences
    • Power BI Spanish Community
    • Translated Spanish Desktop
    • Power Platform Integration - Better Together!
    • Power Platform Integrations
    • Power Platform and Dynamics 365 Integrations
    • Training and Consulting
    • Instructor Led Training
    • Galleries
    • Community Connections & How-To Videos
    • COVID-19 Data Stories Gallery
    • Themes Gallery
    • Data Stories Gallery
    • R Script Showcase
    • Webinars and Video Gallery
    • Quick Measures Gallery
    • 2021 MSBizAppsSummit Gallery
    • 2020 MSBizAppsSummit Gallery
    • 2019 MSBizAppsSummit Gallery
    • Events
    • Ideas
    • Custom Visuals Ideas
    • Issues
    • Issues
    • Events
    • Upcoming Events
    • Community Engagement
    • T-Shirt Design Challenge 2023
    • Community Blog
    • Power BI Community Blog
    • Custom Visuals Community Blog
    • Community Support
    • Community Accounts & Registration
    • Using the Community
    • Community Feedback
    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
    • Simple SVG KPI (Power BI august 2018 update)

    Simple SVG KPI (Power BI august 2018 update)

    08-09-2018 09:14 AM

    matemusic
    Advocate III
    11674 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
    • 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 4
    11,674 Views
    9
    Reply
    • All forum topics
    • Previous Topic
    • Next Topic
    dsmitha
    Super User dsmitha
    Super User
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎03-22-2022 07:41 AM

    awesome, thank you 

    Message 4 of 4
    1,609 Views
    0
    Reply
    JNordentoft
    JNordentoft
    Frequent Visitor
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎09-16-2021 02:23 AM

    Hi, I just tried your code. 
    I get a broken image when I use it. 

     

    Do you know if this still works? or is there are a better way to get this visual? Tried some different custom visuals, but I think they are a bit slow. 

    Message 3 of 4
    3,702 Views
    0
    Reply
    stevedep
    stevedep Memorable Member
    Memorable Member
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • 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!


    Awesome Keyboard Shortcusts in Power BI, thumbs up if you like the article


    My Community Blog Articles (check them out!)

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



    Message 2 of 4
    5,410 Views
    0
    Reply

    Power Platform

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

    • Sign in
    • Sign up

    Browse

    • Solutions
    • 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

    © 2023 Microsoft

    Follow Power BI

    • Privacy & cookies
    • Manage cookies
    • Terms of use
    • Trademarks
    Consumer Privacy Act (CCPA) Opt-Out Icon Your Privacy Choices