As data analysts, we spend a lot of time cleaning, analyzing, and shaping our data to respond to basic business questions. However, with our heads down on the data, we sometimes fail to focus on our objective: to transform this pile of data into actionable insights that everyone can understand.

 

Sometimes dashboard and reporting projects call for customizable data visualizations that are not part of the bundle. Power BI over Tableau offers a few visualizations out of the box and in AppSource, but how to respond when they aren’t sufficient? That is where Power BI Custom Visuals come in.

 

Power BI Custom Visuals provide a method for broadening OOB functionality with other open-source visualization tools like D3, jQuery, and R. This provides you with a lot of adaptability concerning formatting, visual elements, and capacities. Microsoft even gives the source code to a portion of their OOB visualizations. This permits you to make changes and learn yourself if you decide to do as such.

 

The disadvantage is that custom visuals bear a heavy load. You should know Java, D3, CSS, HTML, and possibly different languages to complete a custom viz bundle (PBIVIZ). To be compelling, you should be familiar with all the other parts of a custom visual project. For instance, field well combinations, formatting choices, drill-through and tooltips have different regions of the custom visual project that require a client to know where they are, how to code, and how to integrate them.

 

Here Are Some Performance Tips to Create Quality Power BI Custom Visuals

 

Customize the elements of your charts

If the chart’s title isn’t clear, you can give a title for the x-axis and y-axis separately. It is likewise conceivable to pick how the data names should be shown. One of the rules recommended by IBCS is not to show long numbers as data labels. Depicting them as thousands or millions is better. Data labels for small values can be avoided. It is likewise great to incorporate an axis break where essential. xViz visuals can auto-scale the Y-axis if specific parameters, like the change, are little.

 

Choose the right visual

It is essential to convey the right message across. Bar and line charts are simpler to peruse and survey. For example, in a financial review scenario, there could be a bar chart showing the Actual vs Budget plan over a period. This can be most successfully delivered utilizing a column chart. To lay out actual vs budget vs variance, a line and bunched section graph will pass on the message most precisely. It will be direct to figure out which period had the most deviation. Use cards to draw focus to the ultimate objective, e.g., income. It is additionally prudent to try not to utilize pie or donut charts if the number of classes is more than 2 – 3. Pie and donut charts can portray part of the absolute commitment, but not for comparison.

 

Review Animation Loops

Does the animation loop redraw unchanged elements?

If so, it sits around idly drawing elements that don’t change from one frame to another.

Solution: Update the frames specifically.

While animating static visualization, it’s enticing to lump all the draw code into one update capability and repeatedly call it with new information for every iteration of the animation loop.

Instead, consider utilizing a visual constructor strategy to draw everything static. Then the update function has to draw visualization elements that change.

 

Cache DOM nodes

When a node or rundown of nodes is recovered from the DOM, contemplate whether you can reuse them in later calculations. As long as you don’t have to add or erase more nodes in the critical region, caching them can improve your application’s overall proficiency.

Keep DOM access to guarantee that your code is fast and doesn’t slow down the browser.

 

Reconsider JQuery

Limit your JS structures and utilize native JS whenever possible to build the accessible bandwidth and lower your processing overhead. Doing this could also diminish compatibility issues with older browsers.

 

Use Canvas or WebGL

For repeated animations, think about utilizing Canvas or WebGL rather than SVG. Dissimilar to SVG, these choices’ performance is determined by size rather than content.

 

Use request Animation Frame instead of set Timeout

If you use request Animation Frame to refresh your on-screen animation, your animation capabilities are called before the browser calls another repaint.

 

Need Help with Power BI Custom Visuals?

Infometry offers robust Power BI solutions custom fitted to clients’ particular necessities to expand the efficiency level of Power BI Custom Visuals and your entire organization.