Custom Visuals in Power BI

Question

Can anyone explain what are custom Visuals in powerful BI and how they can be created

Jaish Mathews · Answer

The following information has been gathered but has not been verified. You may proceed with these steps at your discretion. Custom visuals in Power BI are specialized data visualizations created to meet specific requirements not covered by the built-in or marketplace visuals. These visuals are designed to integrate seamlessly with Power BI reports and dashboards providing custom functionality or tailored representations of data. What are Custom Visuals in Power BI? Custom visuals in Power BI allow you to: Extend functionality: When standard visuals do not meet your unique business needs. Enhance appearance: Create visually appealing and branded charts or diagrams. Provide unique interactivity: Offer tailored user interactions for specific use cases. They are implemented using JavaScript and TypeScript with Power BI's custom visuals SDK typically leveraging the D3.js library. However you can use C# to generate visuals in scenarios where backend processing or pre-rendered data visualizations are required. How to Create Custom Visuals Using C# While Power BI custom visuals are primarily written in JavaScript/TypeScript you can integrate C# in two main ways: 1. Pre-rendered Visuals with Server-Side Rendering Use C# to generate SVG PNG or other image-based outputs of the visual on the server-side. Embed these images or HTML outputs into Power BI as custom visuals. Steps: Set up an API: Create a C# API using ASP.NET Core or similar frameworks. Use libraries like System.Drawing  SkiaSharp  or SVG.NET to generate visuals (e.g. charts graphs) programmatically. Deploy the API: Host the API on a cloud platform like Azure or locally. Integrate in Power BI: In Power BI use a custom visual (like Image Viewer) or a custom HTML viewer visual to embed the rendered outputs. 2. C# Backend for Custom Data Processing Use C# for advanced data processing or algorithmic calculations and feed processed data to a Power BI custom visual written in JavaScript/TypeScript. Steps: Process the data using C# via an API or a DLL library. Pass processed data to the Power BI visual (e.g. through parameters or data bindings). Building a Custom Visual: A General Overview Creating a fully functional custom visual primarily involves the Power BI Custom Visual SDK which is JavaScript/TypeScript-based. However you can complement this with C# for preprocessing or rendering tasks. Steps to Create a Custom Visual Set up the Environment: Install Node.js npm and the Power BI Visuals Tools ( pbiviz CLI). Create a Visual Project: pbiviz new MyCustomVisual cd MyCustomVisual pbiviz start Design the Visual: Use TypeScript D3.js and CSS to define the appearance and behavior. Optionally fetch processed data or pre-rendered visuals from your C# backend. Test the Visual: Use Power BI Desktop to test your visual by importing the .pbiviz file. Package and Publish: Package the visual for deployment: pbiviz package Publish the .pbiviz file to the Power BI Marketplace or use it in your organization. Integrating C# with JavaScript Custom Visuals To integrate C# with Power BI custom visuals: Set up a communication layer: Use REST APIs to send data between Power BI and your C# service. Embed outputs: Display pre-rendered visuals as part of your custom visual. Use libraries: For complex visualization algorithms libraries like Highcharts  Plotly  or Microsoft Chart Controls can generate visuals in your backend. By combining the strengths of C# for robust data processing and Power BI's visualization capabilities you can create highly customizable and powerful solutions tailored to your organization's needs.