https://community.fabric.microsoft.com/t5/Custom-Visuals-Community-Blog/What-I-learnt-building-Power-BI-Custom-Visuals/ba-p/150233 <P><SPAN><FONT color="#000000">D</FONT></SPAN><FONT color="#000000" face="Calibri" size="3">ata visualization plays a pivotal role today more than ever before in providing actionable insights. With large volumes of data at our disposal and more continuously generated, it is becoming ever more challenging to make sense of data without visualizations. At times, I wonder whether it’s time to debunk the idiom “a picture is worth a thousand words” as “thousand” is no longer representative in today’s context.</FONT></P><P><FONT color="#000000" face="Calibri" size="3">Microsoft Power BI has taken some innovative steps to truly democratize data visualization. One of which is to provide a platform for 3</FONT><FONT color="#000000" face="Calibri" size="2">rd</FONT><FONT color="#000000" face="Calibri" size="3"> parties to contribute custom visuals.</FONT><SPAN><FONT color="#000000" face="Calibri" size="3">&nbsp; </FONT></SPAN><FONT color="#000000" face="Calibri" size="3">Custom visuals play an important role today across the BI Ecosystem, Community and for Business Intelligence advancement in the following ways:</FONT></P><UL><LI><FONT color="#000000" face="Calibri" size="3">Eye-catching - enticing, recognizable, informative &amp;, contextual</FONT></LI><LI><FONT color="#000000" face="Calibri" size="3">Engaging - to view and spend time exploring data, soaking up information and discovering insights</FONT></LI><LI><FONT color="#000000" face="Calibri" size="3">Building sense and intelligence loyalty - senses include visual, analytical and other vectors</FONT></LI><LI><FONT color="#000000" face="Calibri" size="3">Enriching the visualization palette – empower mere mortals to become artists that light-up data-driven scenarios; tools to create visual incarnations of beauty</FONT></LI><LI><FONT color="#000000" face="Calibri" size="3">Self-Actualizing data – compared with other art forms, information visualization is still at a comparatively nascent phase; take learnings from nature and inspire knowledge and wisdom with creations of beauty</FONT></LI></UL><P><FONT color="#000000" face="Calibri" size="3">&nbsp;</FONT></P><P><FONT color="#000000" face="Calibri" size="3">I started building a custom visual few months back to fill up a gap observed during a data visualization project. </FONT><SPAN><FONT color="#000000" face="Calibri" size="3">&nbsp;</FONT></SPAN><FONT color="#000000" face="Calibri" size="3">You can find this visual named </FONT><A href="https://app.powerbi.com/visuals/show/Tachometer1474636471549" target="_blank"><FONT color="#0563c1" face="Calibri" size="3">Tachometer</FONT></A><FONT color="#000000" face="Calibri" size="3"> in Power BI Visuals Gallery.</FONT></P><P>&nbsp;</P><P><FONT color="#000000" face="Calibri" size="3"><img /></FONT></P><P><FONT color="#000000" face="Calibri" size="3">Figure 1. Different configurations of Tachometer custom visual.</FONT></P><P>&nbsp;</P><P><FONT color="#000000" face="Calibri" size="3">I also joined hands with a great team at Annik (now LiquidHub) with blessings from the Microsoft Power BI team to drive a Hackathon like program internally named </FONT><A href="https://powerbi.microsoft.com/en-us/blog/images-2/" target="_blank"><FONT color="#0563c1" face="Calibri" size="3">Annik Power BI Challenge</FONT></A><FONT color="#000000" face="Calibri" size="3"> to inspire and create new custom visuals that would be published to the visuals gallery in the future. </FONT><SPAN><FONT color="#000000" face="Calibri" size="3">&nbsp;</FONT></SPAN></P><P>&nbsp;</P><P><FONT color="#000000" face="Calibri" size="3">Here I would like to reflect on some of the best practices and experiences along the way for the benefit of anyone building a Power BI custom visual.</FONT></P><P><SPAN><FONT color="#000000" face="Calibri" size="3">&nbsp;</FONT></SPAN></P><H2><FONT color="#2e74b5" face="Calibri Light" size="4">1.</FONT><SPAN><FONT color="#2e74b5" face="Calibri Light" size="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </FONT></SPAN><FONT color="#2e74b5" face="Calibri Light" size="4">Share your learnings</FONT></H2><P><FONT color="#000000" face="Calibri" size="3">&nbsp;</FONT></P><P><FONT color="#000000" face="Calibri" size="3">The Power BI Community is all about sharing and building on that shared knowledge. Building custom visuals would have been extremely difficult for new entrants if not for the open source code provided by the Power BI Team and other custom visual developers. Give back to the community by sharing your learnings and your source code.</FONT></P><P><FONT color="#000000" face="Calibri" size="3">&nbsp;</FONT></P><H2><FONT color="#2e74b5" face="Calibri Light" size="4">2.</FONT><SPAN><FONT color="#2e74b5" face="Calibri Light" size="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </FONT></SPAN><FONT color="#2e74b5" face="Calibri Light" size="4">Start with something that is already available</FONT></H2><P><FONT color="#000000" face="Calibri" size="3">&nbsp;</FONT></P><P><FONT color="#000000" face="Calibri" size="3">With many visuals available in the Power BI Visuals Gallery, it is likely that someone has already built similar functionality you want to have in your visual. Existing visuals help provide a starting point and a basic structure to build your custom code upon. For example, I started building Tachometer using Microsoft gauge visual code as a sample. When completed, the Tachometer code hardly had anything common with gauge visual code. However, the gauge visual helped to get things moving faster.</FONT></P><P><FONT color="#000000" face="Calibri" size="3">&nbsp;</FONT></P><H2><FONT color="#2e74b5" face="Calibri Light" size="4">3.</FONT><SPAN><FONT color="#2e74b5" face="Calibri Light" size="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </FONT></SPAN><FONT color="#2e74b5" face="Calibri Light" size="4">Default settings</FONT></H2><P><FONT color="#000000" face="Calibri" size="3">&nbsp;</FONT></P><P><FONT color="#000000" face="Calibri" size="3">Custom visuals come with default settings. Some of these are customizable through capability settings. Make the default settings applicable for the most common application of your visual, so that the user who is adding your visual to a report can readily apply it with minimal modifications. </FONT></P><P><FONT color="#000000" face="Calibri" size="3">For example, Tachometer visual spans from -120 degrees from vertical to +120 degrees and has green, yellow, red regions in that order by default all of which can be customized for each of your instances. </FONT></P><P><SPAN><FONT color="#000000" face="Calibri" size="3">&nbsp;</FONT></SPAN></P><H2><FONT color="#2e74b5" face="Calibri Light" size="4">4.</FONT><SPAN><FONT color="#2e74b5" face="Calibri Light" size="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </FONT></SPAN><FONT color="#2e74b5" face="Calibri Light" size="4">Enable customization</FONT></H2><P><FONT color="#000000" face="Calibri" size="3">&nbsp;</FONT></P><P><FONT color="#000000" face="Calibri" size="3">Users of your visual want the freedom to be creative with many aspects of their reports. This includes the capability to customize the look and feel of your visual in their reports such as changing colors and font sizes. When creating your visual try to expose as many features as you can through configurable capability settings.</FONT></P><P><FONT color="#000000" face="Calibri" size="3">&nbsp;</FONT></P><P><FONT color="#000000" face="Calibri" size="3">Some capabilities may be tough to implement, but when done right, will add value to your visual and appeal to a wider audience. For example, when I saw different gauge visuals such as the "gauge" which span 180 degrees and "circular gauge" which spans 360 degrees, I thought why not combine the two by making the angle configurable. This simple idea led to configurable angles for the Tachometer. Although enabling customizations doubled the code base, this feature replaces the need to have an infinite number of visuals each with a slightly different start and end angle combination for an example.</FONT><SPAN><FONT color="#000000" face="Calibri" size="3">&nbsp; </FONT></SPAN></P><P><FONT color="#000000" face="Calibri" size="3">&nbsp;</FONT></P><H2><FONT color="#2e74b5" face="Calibri Light" size="4">5.</FONT><SPAN><FONT color="#2e74b5" face="Calibri Light" size="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </FONT></SPAN><FONT color="#2e74b5" face="Calibri Light" size="4">Socialize your idea</FONT></H2><P><FONT color="#000000" face="Calibri" size="3">&nbsp;</FONT></P><P><FONT color="#000000" face="Calibri" size="3">If you are a developer (as many of you probably are having read this far), there may be some non-technical aspects you may miss such as business uses, aesthetic appeal, etc. Socialize your visual among a wider and diverse audience early, get their inputs and feedback, incorporate them.</FONT></P><P><FONT color="#000000" face="Calibri" size="3">&nbsp;</FONT></P><H2><FONT color="#2e74b5" face="Calibri Light" size="4">6.</FONT><SPAN><FONT color="#2e74b5" face="Calibri Light" size="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </FONT></SPAN><FONT color="#2e74b5" face="Calibri Light" size="4">Create a Video</FONT></H2><P><FONT color="#000000" face="Calibri" size="3">&nbsp;</FONT></P><P><FONT color="#000000" face="Calibri" size="3">If your visual is not trivial and easily understood, a video description of the visual will be helpful for end users. Demonstrate the most common features and usage of your visual. A real-life scenario that can be easily understood by many without specific subject matter expertise is ideal if used to describe the usage of your visual (ex., </FONT><A href="https://www.youtube.com/watch?v=C3OXdETbS9o&amp;t=194s" target="_blank"><FONT color="#0563c1" face="Calibri" size="3">Tachometer Video</FONT></A><FONT color="#000000" face="Calibri" size="3">). </FONT><SPAN><FONT color="#000000" face="Calibri" size="3">&nbsp;</FONT></SPAN></P><P><FONT color="#000000" face="Calibri" size="3">The video should ideally be 3 minutes to keep the audience engaged, and try not to make it longer than 5 minutes. If required, make two videos: one with the basic/common functionality and a second with additional details that can supplement documentation of your visual.</FONT></P><P><FONT color="#000000" face="Calibri" size="3">&nbsp;</FONT></P><H2><FONT color="#2e74b5" face="Calibri Light" size="4">7.</FONT><SPAN><FONT color="#2e74b5" face="Calibri Light" size="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </FONT></SPAN><FONT color="#2e74b5" face="Calibri Light" size="4">Create good user documentation</FONT></H2><P><FONT color="#000000" face="Calibri" size="3">&nbsp;</FONT></P><P><FONT color="#000000" face="Calibri" size="3">Document your visual. Add plenty of screenshots and diagrams to help users understand the context and applications. Have the documentation reviewed by someone not familiar with your visual to make sure it is understood by a first-time user. “Markdown” is a quick, easy, and common format used for documentation. See an example here: </FONT><A href="https://github.com/ChamaraIC/Tachometer/blob/master/README.md" target="_blank"><FONT color="#0563c1" face="Calibri" size="3">Tachometer Documentation</FONT></A></P><P><FONT color="#000000" face="Calibri" size="3">&nbsp;</FONT></P><H2><FONT color="#2e74b5" face="Calibri Light" size="4">8.</FONT><SPAN><FONT color="#2e74b5" face="Calibri Light" size="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </FONT></SPAN><FONT color="#2e74b5" face="Calibri Light" size="4">Strive for quality code</FONT></H2><P><FONT color="#000000" face="Calibri" size="3">&nbsp;</FONT></P><P><FONT color="#000000" face="Calibri" size="3">With the popularity of open source solutions, people put in a greater effort to write quality code.</FONT><SPAN><FONT color="#000000" face="Calibri" size="3">&nbsp; </FONT></SPAN><FONT color="#000000" face="Calibri" size="3">This is no exception when it comes to Power BI. If you have a close look at the iterations that Power BI visuals have gone through, especially those published by Microsoft, you will notice improvements in code quality. Be it simple things like having meaningful names for your variables (eg. "min" renamed as "minDate" in </FONT><A href="https://github.com/Microsoft/powerbi-visuals-linedotchart" target="_blank"><FONT color="#0563c1" face="Calibri" size="3">lineDotChart code</FONT></A><FONT color="#000000" face="Calibri" size="3">), structure of the code (eg. breaking draw() into drawline() and drawDots() in </FONT><A href="https://github.com/Microsoft/powerbi-visuals-linedotchart" target="_blank"><FONT color="#0563c1" face="Calibri" size="3">lineDotChart</FONT></A><FONT color="#000000" face="Calibri" size="3">), or introducing support to patterns like "DataViewObjectsParser".</FONT></P><P><FONT color="#000000" face="Calibri" size="3">&nbsp;</FONT></P><P><FONT color="#000000" face="Calibri" size="3">With transition from web based Power BI Dev Tools to CLI tools, we can see code being structured into modules and helper classes. </FONT></P><P><FONT color="#000000" face="Calibri" size="3">We still have some way to go with our Tachometer visual and we are working towards them.</FONT></P><P><FONT color="#000000" face="Calibri" size="3">&nbsp;</FONT></P><H2><FONT color="#2e74b5" face="Calibri Light" size="4">9.</FONT><SPAN><FONT color="#2e74b5" face="Calibri Light" size="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </FONT></SPAN><FONT color="#2e74b5" face="Calibri Light" size="4">Prioritize Performance</FONT></H2><P><FONT color="#000000" face="Calibri" size="3">&nbsp;</FONT></P><P><FONT color="#000000" face="Calibri" size="3">Keep performance a top priority. It may not have a significant impact if your visual works with a very small data set and even less for visuals that work with aggregated data sets such as gauges. Alternatively, some visuals may involve processing larger sets of records that necessitate more focus on performance.</FONT></P><P><FONT color="#000000" face="Calibri" size="3">If your visual performs repetitive calculations with the same data values, then explore the possibility of making these calculations up front and storing the results in your data model to be reused. We have a relatively bloated data model in Tachometer and with good cause.</FONT></P><P><FONT color="#000000" face="Calibri" size="3">&nbsp;</FONT></P><H2><FONT color="#2e74b5" face="Calibri Light" size="4">10.</FONT><SPAN><FONT color="#2e74b5" face="Calibri Light" size="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </FONT></SPAN><FONT color="#2e74b5" face="Calibri Light" size="4">Get your code reviewed</FONT></H2><P><FONT color="#000000" face="Calibri" size="3">&nbsp;</FONT></P><P><FONT color="#000000" face="Calibri" size="3">"Looks good" has become the most common code review feedback we get these days surpassing "I am not familiar with this technology".</FONT><SPAN><FONT color="#000000" face="Calibri" size="3">&nbsp; </FONT></SPAN><FONT color="#000000" face="Calibri" size="3">I prefer seeing a genuine code review with issues noted down including references, something that we took pride in at some of my past engagements. Code reviews not only help improve code, they also help learning and adopting coding best practices. Seek review from someone who would spend the time and provide as much feedback as possible. It does not take much time really, to go over a couple thousand lines of code in a custom visual and write a helpful review.</FONT></P><P><FONT color="#000000" face="Calibri" size="3">&nbsp;</FONT></P><H2><FONT color="#2e74b5" face="Calibri Light" size="4">11.</FONT><SPAN><FONT color="#2e74b5" face="Calibri Light" size="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </FONT></SPAN><FONT color="#2e74b5" face="Calibri Light" size="4">Test your code</FONT></H2><P><FONT color="#000000" face="Calibri" size="3">&nbsp;</FONT></P><P><FONT color="#000000" face="Calibri" size="3">Make sure you test your visual on all common browsers and Power BI desktop. Depending on how complex your visual is, there can be discrepancies. You can automate some unit testing using Karma and Jasmin or other similar technologies. Make use of them.</FONT></P><P><FONT color="#000000" face="Calibri" size="3">&nbsp;</FONT></P><H2><FONT color="#2e74b5" face="Calibri Light" size="4">12.</FONT><SPAN><FONT color="#2e74b5" face="Calibri Light" size="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </FONT></SPAN><FONT color="#2e74b5" face="Calibri Light" size="4">Report issues</FONT></H2><P><FONT color="#000000" face="Calibri" size="3">&nbsp;</FONT></P><P><FONT color="#000000" face="Calibri" size="3">While developing our custom visuals, we encountered gaps in Power BI documentation. These were fixed within days of us reporting them. Some of the more demanding gaps took longer like visual utilities. </FONT></P><P><FONT color="#000000" face="Calibri" size="3">Depending on where the issue is, you can report them through "</FONT><A href="https://github.com/Microsoft/PowerBI-Visuals/issues" target="_blank"><FONT color="#0563c1" face="Calibri" size="3">issues</FONT></A><FONT color="#000000" face="Calibri" size="3">" or the appropriate forum. Consider doing this as returning a favor to the Power BI community.</FONT></P><P><FONT color="#000000" face="Calibri" size="3">&nbsp;</FONT></P><H2><FONT color="#2e74b5" face="Calibri Light" size="4">13.</FONT><SPAN><FONT color="#2e74b5" face="Calibri Light" size="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </FONT></SPAN><FONT color="#2e74b5" face="Calibri Light" size="4">Do not underestimate the Power BI Visual publication process</FONT></H2><P><FONT color="#000000" face="Calibri" size="3">&nbsp;</FONT></P><P><FONT color="#000000" face="Calibri" size="3">The power BI Visual publication process is not automated. Surprised? Once you submit your visual, it gets tested manually. Publishers of Custom Visuals know very well how involved this process can be.</FONT></P><P><FONT color="#000000" face="Calibri" size="3">When we made our initial submission of Tachometer custom visual, we knew of some limitations it had but we were eager in getting it published on the Visuals Gallery (a pretty common scenario in product development) and planned to release updates later. That did not work to our favor. These limitations were caught and sent back our way to fix. Microsoft Power BI Team tests your visual thoroughly. Kudos to them.</FONT></P><P><SPAN><FONT color="#000000" face="Calibri" size="3">&nbsp;</FONT></SPAN></P><P><FONT color="#000000" face="Calibri" size="3">Well, to summarize, think about the end user, get all the help you can, strive for quality and test thoroughly.</FONT></P><P><FONT color="#000000" face="Calibri" size="3">Good luck creating compelling custom visuals!</FONT></P> Tue, 28 Mar 2017 18:09:14 GMT Chamara 2017-03-28T18:09:14Z https://community.fabric.microsoft.com/t5/Custom-Visuals-Community-Blog/What-I-learnt-building-Power-BI-Custom-Visuals/ba-p/150233 <P><SPAN><FONT color="#000000">Creating a power BI custom visual is much more than a programming endeavor, it is an immersion in a new form of art that enables self-actualization of data. It calls for a broader set of skills and your work is not over once the visual is built. The good news however is, you are not alone. There is a community out there that you can learn from and be a part of…</FONT></SPAN></P> Tue, 28 Mar 2017 18:09:14 GMT https://community.fabric.microsoft.com/t5/Custom-Visuals-Community-Blog/What-I-learnt-building-Power-BI-Custom-Visuals/ba-p/150233 Chamara 2017-03-28T18:09:14Z https://community.fabric.microsoft.com/t5/Custom-Visuals-Community-Blog/What-I-learnt-building-Power-BI-Custom-Visuals/bc-p/153762#M16 <P>very nice, i also started working on custom visuals</P> Wed, 05 Apr 2017 05:58:12 GMT https://community.fabric.microsoft.com/t5/Custom-Visuals-Community-Blog/What-I-learnt-building-Power-BI-Custom-Visuals/bc-p/153762#M16 kammaru 2017-04-05T05:58:12Z https://community.fabric.microsoft.com/t5/Custom-Visuals-Community-Blog/What-I-learnt-building-Power-BI-Custom-Visuals/bc-p/159340#M17 <P>&nbsp;Proves you have done the leg work...Well documented Chamara...</P> Sat, 15 Apr 2017 18:01:41 GMT https://community.fabric.microsoft.com/t5/Custom-Visuals-Community-Blog/What-I-learnt-building-Power-BI-Custom-Visuals/bc-p/159340#M17 DavidMoss 2017-04-15T18:01:41Z https://community.fabric.microsoft.com/t5/Custom-Visuals-Community-Blog/What-I-learnt-building-Power-BI-Custom-Visuals/bc-p/253589#M29 <P>&nbsp;</P><P>Pretty nice job, Chamara, all the info is relevant and give us a whole lot better overview than the "official" documentarion</P> Mon, 18 Sep 2017 04:52:24 GMT https://community.fabric.microsoft.com/t5/Custom-Visuals-Community-Blog/What-I-learnt-building-Power-BI-Custom-Visuals/bc-p/253589#M29 leoespejo 2017-09-18T04:52:24Z https://community.fabric.microsoft.com/t5/Custom-Visuals-Community-Blog/What-I-learnt-building-Power-BI-Custom-Visuals/bc-p/593001#M57 <P>&nbsp;Thanks Chamara sharing this useful info, new users on custom visuals like me will apreciate it for sure!! Awesome work!</P> Mon, 31 Dec 2018 07:55:27 GMT https://community.fabric.microsoft.com/t5/Custom-Visuals-Community-Blog/What-I-learnt-building-Power-BI-Custom-Visuals/bc-p/593001#M57 Anonymous 2018-12-31T07:55:27Z