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
Anonymous
Not applicable

Trying to filter data in custom visual

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);
                }
            });

}

 

 

 

1 ACCEPTED SOLUTION
v-viig
Community Champion
Community Champion

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

View solution in original post

2 REPLIES 2
v-viig
Community Champion
Community Champion

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

Anonymous
Not applicable

Hey @v-viig,

 

this works perfectly! 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.