Power BI Visual Custom is not updating frequently enough

[Anonymous]

Hi Folks

I am new to the whole developing part. My problem is, that my visual is not updating frequently. This means that if I add new values to it, I must refresh the whole visual to be able to see it. 

I am working with Typescript and D3.

Is this a normal behavior or does a function exist where I can change the refresh rate of the update, so that it will constantly check the values etc.

Thanks in advance for your help

Hekuran

[dm-p]

Hi @Anonymous,

Providing that you have added data to your visual, the update method will run any time you add or remove data, change a property or interact with other visuals in your page (unless you have explicitly disabled interactions with it).

This diagram explains the possible events that can occur during a customs visual's lifecycle.

If the method is not firing as expected for these circumstances then it is possible that your code is not processing your visual's dataView correctly. For us to be able to assist further, please provide further details of what you are trying to do and any supporting code and this should help us try and explore the root cause of your current challenge.

Regards,

Daniel

[Anonymous]

@dm-p Thank you for your answer!

In total I have 4 values.

1) the x-Axis would be years (which in the capabilities.json is registred as Grouping)

2) The actual Values of each year (which is registred as Measure)

3) An upper limit ( Is also registred as Measure)

4) A lower limit (Same as the upper limit)

With the function below, i take the data and assigne it to an Interface. Which then I call it in the update-function.

private getViewModelValuePoints(options: VisualUpdateOptions): ViewModelValuePoints {
        let dv = options.dataViews;

        let viewModelPoints: ViewModelValuePoints = {
            dataPoints: [],
            maxValue: 0,
            minValue: 0,
        };

        let view = dv[0].categorical;
        let categories = view.categories[0];
        let values = view.values[0];
        let upperValues = view.values[1];
        let lowerValues = view.values[2];

        for (let i = 0, len = Math.max(categories.values.length, values.values.length); i < len; i++) {
            viewModelPoints.dataPoints.push({
                category: <string>categories.values[i],
                value: <number>values.values[i]
            })
        }

        viewModelPoints.maxValue = d3.max(viewModelPoints.dataPoints, d => d.value);

        viewModelPoints.minValue = d3.min(viewModelPoints.dataPoints, d => d.value);


        return viewModelPoints;
    }

Afterwards in the update-function I pass the returned viewModel to the SVG.

But the problem starts here already. The x-Axis is rendering instantly, but not the barchart (first I have to resize the window of the report, to be able to see the Barcharts).

This is how I create the x-Axis:

let xAxis = d3.axisBottom(xScale)
            .tickSize(1);

        this.xAxisGroup.call(xAxis) 
            .attr("transform", "translate(0, " + (yScale(0)) + ")")
            .selectAll("text").attr("transform", "rotate(0)")
            .style("text-anchor", "end")
            .attr("fill", xAxisColor)
            .attr("font-family", xAxisFontFamily)
            .style("font-size", xAxisFontSize);

And this is how I create the barchart:

 let lines = this.lineGroup
            .selectAll(".line")
            .data(viewModelPoints.dataPoints);

        lines
            .enter()
            .append("line")
            .classed("line", true);

        lines.attr("x1", d => xScale(d.category) + (this.settin.axis.x.padding / 2))
            .attr("y1", d => yScale(0))
            .attr("x2", d => xScale(d.category) + (this.settin.axis.x.padding / 2))
            .attr("y2", d => yScale(d.value))
            .attr("stroke-width", dataLineThickness)
            .attr("stroke", dataLineColor);

Let me know if you need some more information about the code.

Thanks in advance for your help!

[dm-p]

Hi @Anonymous ,

The issue will likely be this part of your code (but without seeing it in context, it's tricky to be 100% correct):

 let lines = this.lineGroup
            .selectAll(".line")
            .data(viewModelPoints.dataPoints);

        lines
            .enter()
            .append("line")
            .classed("line", true);

        lines.attr("x1", d => xScale(d.category) + (this.settin.axis.x.padding / 2))
            .attr("y1", d => yScale(0))
            .attr("x2", d => xScale(d.category) + (this.settin.axis.x.padding / 2))
            .attr("y2", d => yScale(d.value))
            .attr("stroke-width", dataLineThickness)
            .attr("stroke", dataLineColor);

---

Have a look at this answer, specifically under Fixing the Pattern. With Power BI visuals and D3, if you're using enter() and don't merge() in the changes correctly, they usually don't get picked up until the next update.

If you're using the latest visuals SDK and D3 v5, the selection.join pattern is actually a bit more resilient for you to use rather than enter(). The linked answer re-writes the orginal issue to use join() rather than enter() and merge(), so might be something you can use as a starting point.

If you're still stuck after this, it would be ideal if I can reproduce your issue locally, so if you can provide a link to your project files in a repo, or all key files (visual.ts, settings.ts, capabilities.json, package.json) then that will be a great help to be able to target the issue and provide you with a better answer.

Regards,

Daniel

[lbendlin]

This is the default behavior of a report page visual unless you have set up Automatic page refresh against a Direct Query data source.

Note that dashboard tiles behave differently.

[Anonymous]

@lbendlin Thanks for your reply!

Which function would set up this Automatic page against Direct Query data source?

Best regards