Power BI in Windows application using Graph UI

We have all done embedded power bi on a web page which is the most widely used mode of exposing the dashboards or reports to the end users. With windows 10 improving there has been increase in the usage of apps as well. So there has been an increase in the requests coming from end users to have it as an app instead of typing an URL. So the way some teams have done this was have a webpage in which the power bi is embedded, then they call this inside UWP because Microsoft did not have a native control on the app which allowed you to add the power bi reports. Well that is an uncessary overhead in the case where the clients are looking only for an app especially in the case of remote site operations. To overcome this Microsoft have released a control in Graph UI . 

How to do this?
Well it is a very simple process and requires hardly 30 minutes to get this up and running on a dev environment by following the below steps -
1) Have a Power BI pro account else you need an Azure Active Directory and a master user
2) Fill the onboarding document.
    This requires your step 1 details.
    Then enter a name for your application and click on select all. This step is basically to provide the app access to the api which it needs and click on Register.

    Please copy the application ID which you will obtain after this step.
    Create a workspace.

    

Import a power bi report which you want to embed in the UWP app, if do not have a power bi dashboard then import a Sample Power BI report.

    Last step will be to grant permisson which can be done by clicking on 'Grant Permission' button.

    Once you do this copy the details as shown in the image below.
   

3) Creating UWP App -
    Now to create your application, download the visual studio community edition 2019 if you do not have a visual studio 2015 and above.
    Once you have it installed, create a new uwp project

   
    Enter the project name and click on Create.

   
    Then VS will ask you to choose target version and minimum version for the app, you can leave it as default and click on OK.
   
    Once it is done you should be able to see the project structure as shown in the image below. 

   
   
    you will not have the graph ui controls by default, to add this go to 'References' and do a right click and click on 'Manage NuGet Packages' as shown in the image below.

   
   
    Search for 'Microsoft.Toolkit.Uwp.UI.Controls' in the browse window and click on install.

   
   
    Now if you browse the toolbox you should be able to see the Graph UI control and also see Power BI embedded. 

   
    Click on MainPage.xaml and you should be able to see a sample screen. You should be able to see the xaml code, 

   
    Add the reference of graph UI into this by adding the below code -
   

   
    Add the below code with the App ID and GroupID (WorkspaceID) which was obtained in the above step.
   
   
   
   
    Your final code should like below -
  
   
    Once it is done, you can click on Run button and the app will load in debug mode and you should be able to see the app as below.

   
    You will be shown a login page, enter your credentials and then it should load the sample app / report which would have been added based on the selection done while registering.
   
   
   
    There can possible blocking points which can be -
   
    1) If you have not enabled developer settings on your system -
   
    In this case, search for Developer settings in the start and click on Developer Mode. Once it is done it should install and enable the mode, if it requires admin privileges the request the concerned team to enable it for you.

   
   
    2) If you have an exception stating debugger is not attached, then change the debug environment to 64 bit and it should start working for you as shown in the image below.
   
    before -  

   
    after - 

   
    Else right click on the project and go to the debug option and change Debugger type to Mixed mode.
   

   
    As you can see it is pretty easy and can be used in lot of cases along with your UWP app. Hope it was informative, do let me know if you have any questions on the same.

To add Highcharts in Power BI as a Custom Visualization

One week back....

I have been working on Power BI for a long time now, although power bi is easy to use and have monthly releases, what frustrates me is the lack of charts which other reporting tool have, for example highcharts, D3 have so many visualization. So I was looking for an option to add custom charts into dashboard as we are working on reports for streaming data. I came across documents which provided the way to integrate third party charts in power bi. This was a very nice feature considering the wide variety of charts coming up in the market till the time Power BI catches up with the competition.


In this blog I will be adding highcharts into powerbi report. Why highcharts? Well of all the charting libraries I have come across, highcharts have the best repository of charts, further you can easily incorporate the charts into your web page. Further you can see that they are actively evolving the library to provide rich visualization to the end users.

Now, let's see how to add highcharts into power bi, It will involve three main sections:
1) Environment setup
2) Coding to add highcharts
3) Testing the visualization on the powerbi report.

1) Environment setup:
To set up the environment for custom visualization you can refer to the microsoft site <https://docs.microsoft.com/en-us/power-bi/developer/custom-visual-develop-tutorial#setting-up-the-developer-environment> or you can follow me here.
This requires the below tools -
a) Installation of nodejs
b) pbiviz library installation
c) Installing certificate
d) creating project and opening it via visual studio code

    a) Installation of nodejs -
    To install nodejs go to the link - nodejs  and download either the latest build or the LTS as shown in the image below. In my case I am going for the LTS for windows 64 bit environment.

    Once you install this, open command prompt on your windows machine and execute the command "node -V". I have installed the version 10.16.1, you might have different version if you are installing this at a later point in time.

    ensure npm is added in the PATH variable in your system environment variable.

    Once this is done open a new command prompt and enter the command 'npm' and you should be able to see the below output on usage. If you do not get this, please ensure the PATH variable is correct, in some cases restart of windows resolves this issue. 

b) Installation pbiviz library  - 
    open command prompt and execute the below command -

    npm i -g powerbi-visuals-tools
 

In this command: i stands for install and -g stands for global which ensures it is available throughout the system and not restricted to the folder in which you have downloaded it.
 

once this is done execute 'pbiviz' in command prompt and you should be able to see the image below. 

c) Installation of certificate - 

We need to install the certificate. To do this follow the steps below -
 

Step 1 - open command prompt and execute the command - 'pbiviz --install-cert' and copy the passphrase and you should see a window open for importing certificate.

Step 2 - Import the certificate for current users and click on next

Step 3 - The certificate path would automatically be taken care of in the latest version of pbiviz.

        

Step 4 - Paste the passphrase which we had noted down in step 1 and click on next.

        

 Step 5 - Leave the default selection and click on next.

       
        

 Step 6 - You will be shown the summary, click on Finish and you should get a message stating import was successful.

 

d) creating project and opening it via visual studio code
    

Step 1 - We will use Visual studio code to do our coding. You can download visual studio in this link  for visual studio code.

        

Step 2 - Create a folder and open command prompt in this path and execute the command, this will create a nodejs project with required project structure.
       
        pbiviz new myHighChart

       
       

Step 3 - Now let us open the proejct in Visual Studio Code using the command 'code .'
       
        First execute - cd myHighChart
       
        Then execute - code . to open visual studio code.
        

        

Step 4 - You should be able to see the folder structure as shown in the image below. Click on View -> Terminal.

Step 5 - Install the highcharts component in the terminal which we opened in the previous step.
       
        npm install highcharts --save
        

Step 6 - To verify the installation open the package.json file and ensure the below highlighted ones are present.

This completes the setup of environment. Now let's see how to enable the highcharts visualization in your tool.

2) Coding to add highcharts -
   
    Step 1 - Open src > visual.ts and you should be able to see that microsoft already has provided you a default code which renders a sample visualization as shown in the image below. You can go ahead and check it out, but I will leave that to your interst.
   
   
    Step 2 - Code:   
    Add the below import statements:   
   

    In the constructor you only need the below code:
       
   
   
    The update function needs to like this -
   
   
    
You can leave the rest as it is. 

The complete code is provided below.

   
    Once this is done, on the terminal type 'pbiviz start' and you should see a message stating 'Compiled successfully'

3) Testing the visualization on the powerbi report -

To test the visualization you have to:
a) Go to powerbi <https://app.powerbi.com> and enable the developer option in settings as shown in image below

step 1- 

Step 2- 

b) Go to any report and edit it or click on any report and click on edit. Once it is done on the visualization page you should see a custom chart icon with the name as Custom Visual on hover as shown in the image below.

c) Once you are able to see the widget in this screen, click on it and add a column from your dataset into Category Data to trigger the update function which will draw the chart as shown in the image below. 

d) If you want to package the visualization to be available then you need to execute: 'pbiviz package'. You will see a file and you can import this file into your powerbi desktop / portal using import from file option.


This blog shows how to add the visualization into power bi. We need to configure the properties like xaxis, measure, series, legend etc. Do let me know if you want me explain that, I can write subsequent blogs on the same.