Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Earn the coveted Fabric Analytics Engineer certification. 100% off your exam for a limited time only!

Reply
mpo
Helper II
Helper II

developing Custom Visual with Table Data Binding

I am slightly struggling with custom visual development. Any help is very appreciated.

Also asked this on stackoverflow.

 

 

I am trying to change the sampleBarChart visual to use the "table" data binding instead of "categorical". My first aim is to have a simple table visual, with inputs "X", "Y" and "Value".

 

This wiki page describes the table data binding, though I cannot find any example visuals which use it and are based on the new API. 1) Are there any examples of such visuals?

 

---

 

The wiki link above shows that a table object has properties "rows", "columns", "totals" and "identities". So it looks like rows and columns are my indexes and totals are my values?

 

My data roles:

 

        {   "displayName": "Category1 Data",
            "name": "category1",
            "kind": 0},
	{   "displayName": "Category2 Data",
            "name": "category2",
            "kind": 0},
        {   "displayName": "Measure Data",
            "name": "measure",
            "kind": 1}

 

Current data view mapping:

"table": {
	"rows": {"for": {"in": "category1"}},
	"columns": {"for": {"in": "category2"}},
	"totals": {"select": [{"bind": {"to": "measure"}}]}
	}

 

Relevant parts of my visualTransform():

    ...
let category1 = categorical.rows;
let category2 = categorical.columns;
let dataValue = categorical.totals;
    ...
for (let i = 0, len = category1.length; i < len; i++) {
for (let j = 0, jlen = category2.length; j < jlen; j++) {
	{
		barChartDataPoints.push({
			category1: i,
			category2: j,
			value: dataValue[i,j],
			color: "#555555"//for now
		});
	}
    ...

Test data looks like this:

  1 2 3
1 4 4 3
2 4 5 5
3 3 6 7 (total = 41)

 

The code above fills barChartDataPoints with just six data points:

(1; 1; 41),

(1; 2; undefined),

(2; 1; 41),

(2; 2; undefined),

(3; 1; 41),

(3; 2; undefined).

Accessing zero indeces results in nulls.

2) What am I doing wrong?

 

---

 

I don't have a PowerBI account, so have to compile visuals with 

pbiviz package

and import in PowerBI desktop to test. As a result, it's very difficult to debug non-compiler errors - in that case PowerBI displays empty space no matter what data I assign to the visual. As a workaround, I display "window.alert()" and pass it text data I want to view, but this takes a long time and is very limited.

3) What are some good practices of debugging visuals based on the new API? (Without having access to powerbi developer tools)

The PowerBI visual playground project seems to be using the old API.

 

Thanks in advance.

1 ACCEPTED SOLUTION
Mcburn
Helper II
Helper II

Hey MPO,

 

my answer for the first question:

There are not so many Examples, from the scratch. The API GitHub Page has one.

Some Blogs get Examples too: 

https://sharepointforum.org/threads/build-your-custom-visuals-in-power-bi-step-by-step.61069/

 

And in the End maybe some Older Custom Visuals from this site:

https://app.powerbi.com/visuals/

Do you need WinRar or something similiar.

 

All this possibilites are not satisfying, the best way is try and error.

 

That direct me to the second question:

 

Here you can see, i do not use the columns. Power BI select my three categorys to one and set the two measure values behind them. I need some experiance too and iam not sure that will works for you. But you can try it out and maybe that will help.

 

"table":{
                "rows": {
                    "select": [
                        {
                            "for": { "in": "Date"}
                        },
                        {
                            "for": { "in": "ProjectColor"}
                        },
                        {
                            "for": { "in": "ProjectID"}
                        },
                        {
                            "for": { "in": "X"}
                        },
                        {
                            "for": { "in": "Size"}
                        }
                    ]
                }
            }

 

When i get a better solution i will post it under your stackoverflow post.

 

To your last question: 

I think without the browser, debugging is very hard. My workaround is the Chrome Javascript Console to debug my Visual.

That would work with the package too. 

View solution in original post

2 REPLIES 2
Mcburn
Helper II
Helper II

Hey MPO,

 

my answer for the first question:

There are not so many Examples, from the scratch. The API GitHub Page has one.

Some Blogs get Examples too: 

https://sharepointforum.org/threads/build-your-custom-visuals-in-power-bi-step-by-step.61069/

 

And in the End maybe some Older Custom Visuals from this site:

https://app.powerbi.com/visuals/

Do you need WinRar or something similiar.

 

All this possibilites are not satisfying, the best way is try and error.

 

That direct me to the second question:

 

Here you can see, i do not use the columns. Power BI select my three categorys to one and set the two measure values behind them. I need some experiance too and iam not sure that will works for you. But you can try it out and maybe that will help.

 

"table":{
                "rows": {
                    "select": [
                        {
                            "for": { "in": "Date"}
                        },
                        {
                            "for": { "in": "ProjectColor"}
                        },
                        {
                            "for": { "in": "ProjectID"}
                        },
                        {
                            "for": { "in": "X"}
                        },
                        {
                            "for": { "in": "Size"}
                        }
                    ]
                }
            }

 

When i get a better solution i will post it under your stackoverflow post.

 

To your last question: 

I think without the browser, debugging is very hard. My workaround is the Chrome Javascript Console to debug my Visual.

That would work with the package too. 

That helps a lot - thank you!

Helpful resources

Announcements
April AMA free

Microsoft Fabric AMA Livestream

Join us Tuesday, April 09, 9:00 – 10:00 AM PST for a live, expert-led Q&A session on all things Microsoft Fabric!

March Fabric Community Update

Fabric Community Update - March 2024

Find out what's new and trending in the Fabric Community.