Trying to filter data in custom visual

Anonymous — Mon, 05 Mar 2018 17:53:23 GMT

Good evening,

I'm relatively new to Power BI and want to create a filter for my data in my custom visual so my data will be updated in every other visual/slicer on the same page. Right now I have this d3 graph with a click event on an edge which gives me an array of slection ids. These ids I am passing to the selectionManager and select them. The result is highlighted data in every other visual, but how can i create a filter out of this selection (like a filter I get from a slicer).

Code (summarized)

capabilities.json:

"dataRoles": [
        {
            "displayName": "Aktivität",
            "name": "activity",
            "kind": "Grouping"
        },
        {
            "displayName": "Aktivitäts-ID",
            "name": "activityid",
            "kind": "Grouping"
        },
        {
            "displayName": "Fall-ID",
            "name": "caseid",
            "kind": "Grouping"
        },
        {
            "displayName": "Variante",
            "name": "path",
            "kind": "Grouping"
        },
        {
            "displayName": "Zeitstempel",
            "name": "timestamp",
            "kind": "Grouping"
        }
    ],
    "dataViewMappings": [
        {
            "table":{
                "rows": {
                    "select": [
                        {
                            "for": { "in": "caseid"}
                        },
                        {
                            "for": { "in": "activity"}
                        },
                        {
                            "for": { "in": "activityid"}
                        },
                        {
                            "for": { "in": "path"}
                        },
                        {
                            "for": { "in": "timestamp"}
                        }
                    ],
                    "dataReductionAlgorithm": {
                      "top": {
                          "count": 500000
                      }
                    }
                }
            }
        }
    ],

visual.ts:

interface EventLogdata {
        activityid: any,
        activity: string,
        caseid: any,
        path: string,
        timestamp: any,
        selectionID: ISelectionId;
    }

------------------------------------------

function getSelectionIds(dataView: DataView, host: IVisualHost): ISelectionId[] {
        return dataView.table.identity.map((identity: DataViewScopeIdentity) => {
            const categoryColumn: DataViewCategoryColumn = {
                source: dataView.table.columns[1],
                values: null,
                identity: [identity]
            };

            return host.createSelectionIdBuilder()
                .withCategory(categoryColumn, 0)
                .createSelectionId();
        });
    }
-------------------------------------------

function visualTransform(options: VisualUpdateOptions, host: IVisualHost): FlowchartViewModel {
...
...
        let tableSelectionId: ISelectionId[] = getSelectionIds(dataViews[0],host);

...
...
for (let i = 0; i < rows.length; i++) {
            eventlogData.push({
                activityid: rows[i][index_activityid],
                activity: <string>rows[i][index_activity],
                caseid: rows[i][index_caseid],
                path: <string>rows[i][index_path],
                timestamp: valueFormatterUK.format(rows[i][index_timestamp]),
                selectionID: tableSelectionId[i],
            });
        }

------------------------------

public update(options: VisualUpdateOptions, edge) {

d3.selectAll("g.edgePath, .edgeLabel").on("click", function(e) { 
      
                   let selectionIdArray = PSEUDO: this is my array with the selected selection ids

                    selectionManager.select(selectionIdArray, true);
                }
            });

}

Re: Trying to filter data in custom visual

v-viig — Wed, 07 Mar 2018 08:10:15 GMT

Hello @Anonymous,

At first you should add the filter option into capabilities.json:

"objects": {
    "general": {
        "displayName": "General",
        "properties": {
            "filter": {
                "type": {
                    "filter": true
                }
            }
        }
    }
}

As a final step you should call selectionManager.applySelectionFilter() after calling selectionManager.select.

Could you please apply the necessary changes to your code base and let us know if that works well?

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Re: Trying to filter data in custom visual

Anonymous — Tue, 06 Mar 2018 15:41:20 GMT

Hey @v-viig,

this works perfectly! Thank you

topic Re: Trying to filter data in custom visual in Developer

Trying to filter data in custom visual

Re: Trying to filter data in custom visual

Re: Trying to filter data in custom visual