Creating custom visuals in Power BI is a process that requires knowledge of web technologies, especially JavaScript and its libraries like D3.js. Here’s a steps to help create a basic custom visual:
1. Prerequisites:
Install Node.js. This will come with npm (node package manager) which you’ll use to install development tools.
Familiarity with TypeScript and JavaScript, especially if you plan on creating complex visuals.
2. Install Power BI Visuals Tools:
In a command prompt or terminal, run the following command:
npm install -g powerbi-visuals-tools
3. Create a New Visual Project:
Choose a directory for your project and navigate there in your terminal. Then, run:
pbiviz new <visualName>
Replace <visualName> with a name for your visual.
4. Start the Developer Visual:
Navigate to the new directory that has been created (with the name you provided) and run:
pbiviz start
This command will start a local server and open Power BI service in a browser for testing your visual.
5. Code Your Visual:
The main files you’ll be working with are:
src\visual.ts – This is where you’ll write the code for your visual.
src\settings.ts – This file defines the format and properties that appear in the format pane in Power BI.
capabilities.json – Describes the objects, data fields, and formats available to the visual.
Use JavaScript, TypeScript, and libraries like D3.js to manipulate and display data according to your needs.
For example, a simple D3 visual might look like this:
module powerbi.extensibility.visual {
“use strict”;
export class Visual implements IVisual {
private target: HTMLElement;
private updateCount: number;
constructor(options: VisualConstructorOptions) {
this.target = options.element;
this.updateCount = 0;
}
public update(options: VisualUpdateOptions) {
this.target.innerHTML = `<p>Update count: <em>${this.updateCount++}</em></p>`;
}
}
}
6. Package the Visual:
Once you satisfy with your visual, package it into a .pbiviz file by running:
pbiviz package
This command creates a package suitable for importing into Power BI.
7. Import and Test in Power BI:
Go to Power BI Desktop.
Click on the ellipsis in the ‘Visualizations’ pane and choose ‘Import from file’.
Select your .pbiviz file.
Now, your custom visual should be available in the ‘Visualizations’ pane. Test it with data to ensure it behaves as expected.
8. Refinement:
Iterate on your visual’s code, refine its appearance, handle different data scenarios, and ensure optimal performance.
9. Consider Certification:
If you plan to publish your visual to the Power BI Marketplace or distribute it to a broader audience, consider getting it certified by Microsoft. This adds a layer of trust, as certified visuals adhere to specific Microsoft guidelines.
10. Publish to the Marketplace (Optional):
If you want to share your visual with the Power BI community, you can publish it to the Power BI Marketplace.