Create Custom Visual with R and JSON- Part 4


In the last Post, I have explained some parts of creating Custom visual such as how to create an icon, name of visual, and the how-to allocates fields to a custom visual.

There are some other settings that need to be set up beforehand as well.

the number of data fields you able to pass to each field is matter.

what is mean? in Power BI, sometimes we able to pass as many as data fields to a visual field. But in the most of the cases, we just need to pass one column. Look at the below image:

so how could I manage my visual to accept only one or many values?

back to the folder that we have from creating custom visual, we need to change the “capabilities.json” and add other elements. name data view mapping object to specify the maximum number of variable that each field able to accept. As you can see in the below image, each variable just able to accept one variable no more.


Now, imagine, we want to add some more settings., For me, I want to provide a possibility, that the user able to change the chart type such as”Bar chart”, “Scatter chart” or “Boxplot”.

I need to change some setting. for now, I do not have any setting in my visual.

to add a more Visual setting, we need to change capabilities.json file, script.r, and settings.ts file in “src” folder.

First, we need to change the code in capabilities.  under the object node, we need to create another node “settings_ChartType_params”. as you can see in the blow image, I create an enumeration for chart types.

"settings_ChartType_params": {
      "displayName": "Chart",
      "description": "Draw different charts such as scatter chart, Bar chart and Box Plot",
      "properties": {
        "Chart_Type": {
          "displayName": "Chart Type",
          "description": "Select the Chart Type",
          "type": {
            "enumeration": [{
                "displayName": "Scatter Chart",
                "value": "Scatter"
                "displayName": "Bar Chart",
                "value": "BarChart"
                "displayName": "Box Plot",
                "value": "BoxPlot"



Next, we need to add some code to the script.r file

I add some codes to read data from setting in my script.r file as below

  ChartType = as.character(settings_ChartType_params_Chart_Type)

Then, I need to change the code in the setting.ts file.

module powerbi.extensibility.visual {
  "use strict";

  import DataViewObjectsParser = powerbi.extensibility.utils.dataview.DataViewObjectsParser;

  export class VisualSettings extends DataViewObjectsParser {
    public settings_ChartType_params: settings_ChartType_params = new settings_ChartType_params();
    /*public rcv_script: rcv_scriptSettings = new rcv_scriptSettings();*/

  /*export class rcv_scriptSettings {
    // undefined
     public provider     // undefined
     public source     }*/

  export class settings_ChartType_params {
    public Chart_Type: string = "Scatter";



Now you need to customize your R codes regarding the chart type. In R code also we need to change the code to provide some if then else setting as below.

 if( ncol(Values)==6 && ChartType=="Scatter")
    g<-ggplot(Values,aes_string(names(Values[1]),names(Values[2]),color=names( Values[3])))+geom_jitter()+facet_grid( M ~  W)
  if(ncol(Values)==6 && ChartType=="BarChart")
    g=ggplot(Values,aes_string(names(Values[1]),names(Values[2]),fill=names(Values[3])))+geom_bar(stat="identity")+facet_grid( M ~  W,scales = "free")#+labs(fill = "Cylinders")
  if(ncol(Values)==6 && ChartType=="BoxPlot")
    g=ggplot(Values,aes_string(names(Values[1]),names(Values[2]),fill=factor(Values$color)))+geom_boxplot()+facet_grid( M ~  W,scales = "free")


Finally, we need to compile the package again as always to see the result. in command prompt just write “pbiviz package”.

As you see in the above image, in Visual, I have a setting called chart, and under it, I have a field that let me change the chart type.

Still many things that can be covered in this subject, Creating custom visual can be so easy or can be so complicated by adding different settings, like how to pass the error message, and some other information, hope so in other posts I am able to cover them all. Also, check the by Microsoft team data scientist.

also, check the one I created from below link




Leila Etaati on LinkedinLeila Etaati on TwitterLeila Etaati on Youtube
Leila Etaati
Trainer, Consultant, Mentor
Leila is the first Microsoft AI MVP in New Zealand and Australia, She has Ph.D. in Information System from the University Of Auckland. She is the Co-director and data scientist in RADACAD Company with more than 100 clients in around the world. She is the co-organizer of Microsoft Business Intelligence and Power BI Use group (meetup) in Auckland with more than 1200 members, She is the co-organizer of three main conferences in Auckland: SQL Saturday Auckland (2015 till now) with more than 400 registrations, Difinity (2017 till now) with more than 200 registrations and Global AI Bootcamp 2018. She is a Data Scientist, BI Consultant, Trainer, and Speaker. She is a well-known International Speakers to many conferences such as Microsoft ignite, SQL pass, Data Platform Summit, SQL Saturday, Power BI world Tour and so forth in Europe, USA, Asia, Australia, and New Zealand. She has over ten years’ experience working with databases and software systems. She was involved in many large-scale projects for big-sized companies. She also AI and Data Platform Microsoft MVP. Leila is an active Technical Microsoft AI blogger for RADACAD.

Leave a Reply