Interactive Plotly Waterfall Chart in Power BI

[stevedep]

Interactive Plotly Waterfall Chart in Power BI

In this article, I will describe how to develop a Custom Power BI Visual. We will build a Plotly Waterfall Chart. This chart will interact with other Power BI Dashboard elements. This approach can also be applied to other JS Charts since we modify the Chart after it's created by the (Plotly) function. This is a re-post from Medium, I am the original author. 

📢 Please note, this visual is available in the AppSource Marketplace . 

Let Start!

We will use this Chart, as can be found here.

The source code for the below steps is available here.

All the steps described below can also be viewed in this video (apologies for the poor audio):

The primary steps that we will follow:

• Get the static Chart working in Power BI,
• Making the Chart dynamic (work with the Power BI data),
• Making the Chart interactive (interact with other Power BI Dashboard elements.

Get the static Chart working in Power BI

First, we set up our environment. We create our development project using Powershell and typing this command:

pbiviz new WFPlotly 

We go into the newly created directory:

cd WFPlotly

And install the Plotly module using NPM:

npm i plotly.js-dist

We also need to install JQuery:

npm i jquery

We start the dev environment (Visual Studio):

start devenv . 

And start the visual:

pbiviz start

We copy the Waterfall Chart code. We modify the gd element to below, so the first div element is used to house the Chart.

var gd = document.querySelector("div");

We generate a new chart by adding it to the gd element:

Plotly.newPlot(gd, data, layout);

We can now see the Chart:

Plotly Chart visible in Power BI

Making the Chart dynamic

We alter the definition of data to interface with our Power BI data:

y: options.dataViews[0].categorical.categories[0].values,x: options.dataViews[0].categorical.values[0].values,

Making the Chart interactive

This is part where things become interesting, and a bit more challenging. We need to create selectionId’s, add these selectionIds as an own property, and add a click event listener that passes the SelectionId to the select function of the selectionmanager. We also need to make sure the Rectangle is selectable by changing the style property.

First, we perform the required steps to get access to the selection manager. Add below to the;

Import

import ISelectionManager = powerbi.extensibility.ISelectionManager; import ISelectionId = powerbi.visuals.ISelectionId; import IVisualHost = powerbi.extensibility.visual.IVisualHost;

Class:

private host: IVisualHost;
private selectionManager: ISelectionManager;

Constructor:

this.host = options.host;
this.selectionManager = this.host.createSelectionManager();

Update:

let selectionManager = this.selectionManager;

From here we define an array that contains the selectionIds per Category:

let DV = options.dataViews
let category = DV[0].categorical.categories[0];
let vals = category.values;

const map2 = vals.map(function (element, index) {
    let selectionId: ISelectionId = this.host.createSelectionIdBuilder()
        .withCategory(category, index)
        .createSelectionId();
    return [index, element, selectionId]
}, this) //add index of value
let l = map2.length;

We now need to figure out what the element path is for the rectangle that should become clickable. I describe this in this part of the video.

Once we have identified the rectangles we can modify them to become clickable and allow them to interact with the other dashboard elements by calling the selectionmanager.

We add the below code (after creating the Plotly Chart):

var d = document.querySelectorAll("g.cartesianlayer > g > g.plot > g > g > g.points > g");

for (let i = 0; i < d.length; i++) {            
    d[i].setAttribute("style", "pointer-events: all;");            
    d[i].attributes[0].ownerElement["sid"] = map2[i][2];

    d[i].addEventListener('click', function emit(event) {     
        selectionManager.select(this.attributes[0].ownerElement["sid"]);

    });
};

The tricky part was also to make sure the rectangle became clickable by modifying the style property.

Conclusion

In a few simple steps, we created an interactive Plotly chart in Power BI. Should be noted that this was a quick and dirty method since we did not apply any neat typing. Still, this should hopefully get you started quickly. I hope you find this of value. This is a re-post from Medium, I am the original author.