Getting started with Power BI Custom Visuals
I have worked on custom visuals using Microsoft Power BI and this tutorial will guide you through the creation of a simple car chart with D3.js.
It is highly recommended that you must have some hands-on experience with Power BI to understand the concepts better. I am attaching a tutorial which will guide you through the core concepts for FREE (at the time of writing this).
Microsoft does maintain a GitHub tutorial for this, it is quite in-depth but little confusing for me. It was a little difficult to follow the tutorial. With this tutorial you will be able to follow along and see some results quickly.
Prerequisites for this tutorial
- Node with NPM path set up(For installation steps Windows/Mac/Linux)
- Basics of JavaScript/TypeScript
- Microsoft Power BI free account
Let’s get into it.
Set-up of the Development Environment
Microsoft has developed a CLI (Command Line Interface) for developing and running (Live Reload) in Power BI. To install it, open command window and type:
npm install -g powerbi-visuals-toolsCreate new project
To create new project, write the following commands into command window
pbiviz new myVisual
cd myVisual
npm installThe “npm install” command completes the installation of necessary packages declared in “package.json” file.
You will get this folder structure and these are the files you will be working with. The most important file is in “src/visual.ts”. It is a typescript file. You will be working in that file for the most of the time of your development. It has most of the code inside it. It implements 3 functions which are in “IVisual” interface. It comes with few functions implemented.
In the above code we run the constructor and at every update of the visual in Power BI, update function is called.
How to see the custom visual on Power BI
Open Power BI at https://app.powerbi.com, log in with your credentials.
Click on Settings cog, and select settings. On the next page click on the check mark (Enable developer visual for testing). Amazing! You are now a developer. Open a report with some data and you will see a new visualization. You can see an new icon, which will help you see you Power BI visuals in action. It has few toggles which are explained in the photo. You can also download the JSON data of the dataView for better understanding of the data and its properties.
We have this error because we have not yet serving our Power BI visuals. To serve it type the following command
pbiviz startOn successful serving, you will be able to serve it on Power BI. It has a built in file watcher, as soon as you save the file it starts the building process and servers it.
But if you have an error, its because of Server certificate of https is not installed on your machine, you can refer to this guide to set it up.
Once set up, you will be able to serve your visualization.
As you resize the visualization, the counter increases. HOW?
Let me explain, As the visualization is loaded, a constructor is called once and at every interaction with the visualization the “update()” is called to re-render the view.I have attached a visual clue.
“destroy()” is for clean up.
Understanding DATA!
It is very important that you understand how data is binded to the functions. All the drawing is made inside the “update()”. The “update()” method passes “options” as an argument, and options.dataViews includes all the data for visualization which is passed by dragging and dropping columns into the Power BI client. (You can take multiple dataViews, options.dataViews[0], as it is an array).
You can download the data from this url.
The dataView has the following properties “metadata”, “categorical”, “matrix”, “table”, and “tree”. The “metadata” is including the metadata information like “types”, “roles”, “displayName” and etc.
Printing metadata on “update()”
I could be explaining you all the details but the most important will be “categorical” and “tables” are most used. This the value of categorical.
//options.dataViews[0].categorical
"categories": {
...
"values": [
"Germany",
"France",
"United States",
"Japan",
"Italy",
"Spain",
"Britain",
"Portugal",
"Ireland"
]
}
},
"values": {
...
}And these are the value of tables.rows
//options.dataViews[0].table.rows
"rows": [
[
"Germany",
"19.3"
],
[
"France",
"118"
],
[
"United States",
"11.1"
],
[
"Japan",
"1.37"
],
[
"Italy",
"0.87"
],
[
"Spain",
"0.78"
],
[
"Britain",
"0.55"
],
[
"Portugal",
"0.52"
],
[
"Ireland",
"0.34"
]
]What is dataRoles?
All these details are dependent on capabilities.json file, it has the details of all the values which you can add in the visualization. Here is a snippit
{
"dataRoles": [
{
"displayName": "Category Data",
"name": "category",
"kind": "Grouping"
},
{
"displayName": "Measure Data",
"name": "measure",
"kind": "Measure"
}
],
...
Kind defines the value to be a measure or a grouped value. Suppose you rename the “Category Data” to “XCategory Data” and “Measure Data” to “XMeasure Data”. You can add new/multiple category and measure, you can even use a new slot to put in group by detail(Not explained). You can study more about it on github. It has explained the various points in detail. We will not go in details about everything, since it is getting started tutorial.
Creating Visualization
We will only be needing “ options.dataViews[0].table.rows” to visualize our data.
Adding External Libraries
I found it the most difficult part in trying to work with Power BI, I am making it easier for you. You can add these(bold) D3.js entries in “package.json” and run “npm install”.
{
"name": "visual",
"dependencies": {
"@types/d3": "^3.5.38",
"d3": "^3.5.17",
"powerbi-visuals-utils-dataviewutils": "1.2.0"
}
}And add the bold line in “pbiviz.json” file.
...
"externalJS": [
"node_modules/d3/d3.js",
"node_modules/powerbi-visuals-utils-dataviewutils/lib/index.js"
],
...Note : Do not install new version of D3, pbiviz only supports version upto 3.5 of D3.
