Power BI: Custom Visualizations, Getting Started…

With the coming of Microsoft Power BI, and its great visuals (thanks to D3 Js) and functionality (Mobile and web) has been attracting loads of people in the industry.

And as it goes I wasn’t left out, on the ride.

I have been following the development of the Microsoft Power BI stack from the days of its origin in the form of Power View, Power Pivot, Power Query, Power Maps and so on…

And as the time went by I didn’t realized the Power Stack whose origins were based on Excel, would eventually turn out as a standalone product Power BI (minus the excel).

But any ways there’s enough content about Power BI, its origins and features to read about on the internet and you tube, so i will try not to repeat the same in this post.

This post of mine is geared towards some thing which Power BI has offered for their users, to be more creative with visualizations and build their own to plugins for the Power BI space (termed as Custom Visualizations).

The power BI team has open sourced their visualizations gallery which comes packaged for you to reference and build your own *.pbiviz files!!

And in this post I am going to provide the starting steps for the same, to build your own Power BI custom visualizations. As initially while exploring the same, it wasn’t all joyride for me and took me a while to set it up and follow their guide.

So lets gets started !!!!

1. Navigate to Power BI custom visualization code base:

   PowerBI-visuals Github

   You can either download load it beforehand as zip file, or later use Git commands to download it into your work space mentioned in the read me section of the above, of your favorite code editor.



2. I will illustrate the method to get started using the Visual Studio Code code editor for windows which is great !!!



3. Setup a folder on your computer where you place and build the code, in my case I unzipped the downloaded githb code base at

   C:\dev\pbi\

   providing me with the folowing:

   C:\dev\pbi\PowerBI-visuals-master

   and eventually I would end up with the same:

   

4. Now open the code editor with the work space pointed to the above folder path, and you will get the following:

   

   Just ensure you also have the terminal window open with the following shortcut (Ctrl+`), this will be helpful soon.

   

5. Prepare the environment to run the code base with the following command:

   npm install # This command will install all necessary modules
   

   The above command will import all the neccesary modules mentioned in your package.json file and enable to solution to run as desired.

6. Time for slight modification to save you the troubles of life time, the instruction (in the github) says, in order to run the playground you have to set the standalone.html page as the startup page.
   

   In the Visual Studio (not the code, which I am using) you can ensure this by right clicking the file and clicking on option “Set as Startup Page”. But what would you do in the current editor of our choice.

   Its time to edit the gulp.js file which the power behind some of the commands which we are going to run shortly and the instructions on github say.

   And the edit is:

   Change the following code:

   var url = "http://localhost:3333/src/Clients/PowerBIVisualsPlayground/";
   

   to

   var url = "http://localhost:3333/src/Clients/PowerBIVisualsPlayground/standalone.html";
   

   

7. Now we are in calm seas and to run the PowerBI playground just fire the folloowing command on the terminal window of the editor.

   gulp playground
   

   and voila, your playground would be up and running as desired.

   

   But again I would reiterate, if you do not make change to the above gulp.js file, you would end with the following:

   

   (Notice the URL in the above screen shot)

8. Now as instructed, you can build you visualization to your heart content (as mentioned in the wiki section of Github) but what !!!!
   
   Each time you have to go through the build process to see the code updated on the playground, and the steps are.

   gulp build
   

   gulp playground
   

   where each command has a processing time of 1~2 mins. oooh its a pain…

   Until I found that the smart guys @ Microsoft have provided a gulp command which will takeaway your pain,

   In your terminal window of VS code, run the following:

   gulp watch
   

   and open another command prompt, and run the following command:

   gulp playground
   

   and voila !!!!

   As you change you code, the watch mode keeps and eye and rebuild the section of edits rendered by the command prompt playground

   and now you can interactively build out your visualizations to you hear content.

9. And last but not the lease to build out your visualizations, *.pbiviz files, the command is

   gulp package
   

Hope the above helps, and your creativity adds to the power BI space.

Trick

Just a small trick, if each time you edit your visualization, and the playground page re-loads, you can append the URL parameter with the following (in your gulp.js) to present your visualization:

http://localhost:3333/src/Clients/PowerBIVisualsPlayground/standalone.html?visual=helloIVisual

Note:

If you are interested in the solution structure of the PowerBI custom visualization, below are the tools and mechanisms I had to go through to understand the solution structure and composition.

• Node JS
• NPM
• Gulp JS
• Web Pack

Please navigate the above links for their relevant descriptions and the role it plays in the solution.