xViz
ProductPricingCommunity
  • Welcome to xViz Docs!
  • Project Management
    • Project Management - xViz Gantt Chart | Introduction
    • Hierarchy and Additional Columns
    • 🔸Milestones
      • Milestone Formatting
    • Planned Bars
      • Planned Bars Formatting
    • Connectors
      • Primary & Secondary Connectors
      • Multiple Connectors
      • Connectors Formatting
    • Progress
      • Tracking the progress
      • Progress Bar Display
      • Progress Base
      • Bar Formatting
    • Timeline Configurations
      • Timeline Start/End
      • Timeline Range
      • Header Levels
      • Zoom Levels
      • Zoom Options
      • Fiscal Year Support
      • Timeline Format
      • Language Support for Timeline
    • ✨Alerting Techniques
      • Steps to enable Conditional Formatting
      • Conditional Formatting
    • Reference Lines and Reference Range
      • Introduction
      • Static Approach
      • Data Driven Approach
    • Resource Gantt
    • ➡️Other Features
      • Data Colors
        • Row Background Color
        • Bar Border Color
        • Bar Selection Color
        • Bar Fill Color
        • Connectors
      • Duration Data field
      • Display Duration
      • Display Totals
      • Hide Blanks
      • Date Formats
      • DaysOff
        • Weekday
        • Custom Date
      • Setting Up Drill-through
      • Configure External URLs
      • Splitter Position
      • Text Customization
      • Row Numbering
      • Indentation
      • Sorting
    • Parent Level Calculations
      • Aggregation Types
    • Tooltip
    • Release Notes
    • ❓FAQs
  • Performance Management
    • Performance Flow - Introduction
      • Installing from AppSource
      • Get Started
    • Use Cases
      • Organization Performance
      • Microsoft Tenant Data Analytics
        • Organization Chart using Microsoft Graph API
      • Process Flow
      • Sales Performance Analysis
      • Cost Center Analysis
      • KPI Tree
      • Warehouse Management
      • Supply Chain Network
    • Configuring the chart structure
      • Hierarchy structure
      • Grouping / Swim Lanes
        • Data Structure for Columnar Group View
        • Data Structure for Wide Group Views
      • Invisible Group
    • 🪪Display Data in the Cards
      • Title, Subtitle
      • 👨‍💼Images
        • Converting HTTPs link images/icons to Base 64 in Power BI
        • Handling long Base 64 URLs in Power BI
      • 🔢Displaying KPIs
        • Number Formatting
      • 🔻Displaying Variance
      • Sparkline Trends
      • 🔗Hyperlinks
    • Card Formatting
      • Data-Driven Color
      • Templates
      • Customize Template
        • Insert additional data
        • Alignment
        • Wrap Text
        • Styling
        • Margin & Split
        • Modify (Delete / Cope-Paste)
        • Import/Export
    • Links
    • 🗒️Notes & Annotation
    • 🚦Conditional Formatting
    • Layout & Orientation
    • ✨Search
    • ✨Viewing Subtrees
      • Cross Filtering with Subtrees
    • 🔐✨User Context - RLS Experience
    • ✨Filter Context
    • 🎨Formatting Features
      • Formatting Font & Colors
      • Connectors
      • Expand Collapse Button
      • Dimensions
    • Toolbar Ribbon Configuration
    • Simulation
    • ❓FAQs
      • Circular Dependency message
    • Tips & Tricks
      • Bookmark
      • Report Page Tooltip
      • Field Parameters
      • Drill Through
    • Release Notes
Powered by GitBook
On this page

Was this helpful?

  1. Performance Management
  2. Display Data in the Cards
  3. Images

Converting HTTPs link images/icons to Base 64 in Power BI

PreviousImagesNextHandling long Base 64 URLs in Power BI

Last updated 12 months ago

Was this helpful?

If you have a column of images/icons in https links format like below:

Then you can convert it to base 64 URL format, which is the acceptable format by the xViz Performance Flow visual (as it is certified):

Steps to be followed in Transform Editor/Power Query:

Step 1: Create a Custom Function in your Power BI report -> Transform Data:

  1. Home → New Source → Blank Query

  1. Change the name of the query to Query1 to ImgtoBase64Url and Click on Advanced Editor

  1. Paste the below code and Click on Done:

let
    Source = (ImageUrl as text) as text =>
let
    BinaryContent = Web.Contents(ImageUrl),
    Base64 = "data:image/jpeg;base64, " & Binary.ToText(BinaryContent, BinaryEncoding.Base64)
in
    Base64
in
    Source

Note: The prefix of "data:image/jpeg;base64, " must be adjusted as per the image extension, i.e. replace the "jpeg" with the extension of the image that you are using (eg: png, etc.)

Step 2: Invoke the custom function in the data:

  1. Add Column → Invoke Custom Function

  1. Add the following details in the popup:

    1. Provide a name for the new column

    2. Select the function query name “ImgtoBase64Url”

    3. Select the column with Images URL

Result: This will result in a new column named "Image" which will contain the Base 64 URLs. Use this column in the xViz Performance Flow visual.

Here is an example report file:

If the images you are referring are of high resolution which results in over 33,000 characters in base 64 format, then you might see only partial image rendering because of the character limit in Power BI. Check out this page for the solution - Handling long Base 64 URLs in Power BI

🪪
👨‍💼
3MB
xViz Performance Flow - Https to Base 64 Image-Icons.pbix
Image 1: Column of https links for images/icons
Image 2: Columns of Base 64 URLs for images/icons
Image 3: Create a New Blank Query
Image 4: Advanced Editor option
Image 5: Invoke Custom Function option
Figure 2: Invoke Custom Function dialog box