• Irene Librenti

How to create Power BI interactive custom visuals using R (html) - Part 2

Introduction


In the last post we looked at how to create an R custom visual and define basic input fields. We went through:

  • Installation requirements

  • Basic command prompt commands

  • How to create an R visual

  • How to modify the R script

  • How to define input fields

  • Change visual icon and name

In this post, we are going to dig deeper into further customization settings, more specifically, how to limit input fields, and create new properties under the format pane.

Input fields


When you look at a default Power BI visual, you will notice that input fields can:

  • Accept one or more columns

  • Require specific data types

You can modify the maximum number of columns a field can expect by opening the file capabilities.json.


In the previous post we learn how to add new fields using the root object dataRoles. It is in dataRoles that we are going to add two new property, requiredTypes and preferredTypes, as shown below:


"dataRoles": [
    {
      "displayName": "X",
      "kind": "GroupingOrMeasure",
      "name": "X",
      "requiredTypes": [
        {
          "numeric": true
        },
        {
          "integer": true
        }
      ],
      "preferredTypes": [
        {
          "numeric": true
        }
      ]
    },
    {
      "displayName": "Y",
      "kind": "GroupingOrMeasure",
      "name": "Y",
      "requiredTypes": [
        {
          "numeric": true
        },
        {
          "integer": true
        }
      ],
      "preferredTypes": [
        {
          "numeric": true
        }
      ]
    },
    {
      "displayName": "Legend",
      "kind": "GroupingOrMeasure",
      "name": "Legend",
      "requiredTypes": [
        {
          "text": true
        }
      ]
    }
  ]


Now that we know how many column we can pass to our fields, the next step is to specify the data types required by our fields. In our case, we want to use only numeric and integer columns for both the X-axis and Y-axis, and categorical columns for Legend.

To do so, we will use the root object dataViewMappings, where we are going to use the property conditions to restrict the amount of columns we can pass to each field. As we have a simple scatter plot, we will need to specify only maximum one column per field.


"dataViewMappings": [
    {
      "conditions": [
        {
          "X": {
            "max": 1
          },
          "Y": {
            "max": 1
          },
          "Legend": {
            "max": 1
          }
        }
      ]


Add a property to the Format pane


In Power BI, the Format Pane is used to modify the look and the settings of a visual. We want to exploit that very same Power BI GUI to interact with our R custom visual.

Since we are building a scatter plot, we will start by modifying the shape of our data points.


What we need to do is to define an object for each settings in capabilities.json. We will provide name, description, and properties. For each property we will then define a name and a value associated to that. Look at the following code to understand how this works.

 "DataPoints": {    
      "displayName": "Data Point Properties",
      "description": "Modify data point shape and color",
      "properties": {
        "DataPointShape": {
          "displayName": "Data Point Shape",
          "description": "data point shape selection",
          "type": {
            "enumeration": [
              {
                "displayName": "Circle",
                "value": "16"
              },
              {
                "displayName": "Triangle",
                "value": "17"
              },
              {
                "displayName": "Diamond",
                "value": "18"
              },
              {
                "displayName": "Square",
                "value": "15"
              }
            ]
          }
        }
      }
    }

As a result, we will obtain a drop-down list:

The image shows the result of the implementation of customization through R to Power BI.
Drop-down list under the Format Pane

We are going to open the src/settings.ts file. We will add a new setting called DataPointShape as follow.

import { dataViewObjectsParser } from "powerbi-visuals-utils-dataviewutils";
import DataViewObjectsParser = dataViewObjectsParser.DataViewObjectsParser;

export class VisualSettings extends DataViewObjectsParser {
      public DataPoints: DataPointsSettings = new DataPointsSettings();
      }

export class DataPointsSettings {
  public DataPointShape: string = "16";
}

Finally, we need to modify the R script. To call the property we created, we will use the following naming convention <objectname>_<propertyname>, in our case DataPoints_DataPointShape.

This is how the body of the R code changes:

if (!exists("DataPoints_DataPointShape"))
{
  DataPoints_DataPointShape = "16";
}

Values <- data.frame(X,Y,Legend)

names(Values)[1] <- "X"
names(Values)[2] <- "Y"
names(Values)[3] <- "Legend"

g = ggplot(Values, aes(x = X, y = Y, color=Legend)) +
  geom_jitter(pch = as.integer(DataPoints_DataPointShape));

Now you can save your changes and import your new custom visual!


In the next post, we will go through how to further customize the format pane and more. Sign up to our newsletter to learn more!

279 views