topic Re: developing Custom Visual with Table Data Binding in Developer

developing Custom Visual with Table Data Binding

mpo — Mon, 03 Oct 2016 15:10:08 GMT

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.

Re: developing Custom Visual with Table Data Binding

Mcburn — Tue, 04 Oct 2016 08:23:54 GMT

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.

Re: developing Custom Visual with Table Data Binding

mpo — Wed, 05 Oct 2016 07:54:48 GMT

That helps a lot - thank you!