By: Phillip Sharpless
Introduction
Microsoft’s Power BI provides a robust set of built-in visuals for displaying data in your reports and dashboards. However, no matter how many visuals are built in (or how flexible they may be) there may come a time when you wish to do something completely custom.
Luckily, Power BI provides the ability to write custom visualizations (here’s an example).
Custom visuals allow the creator full control over how the data should be visualized and also have the ability to display whatever formatting options are available for the user to customize. Just as an example, perhaps the default radial gauge provided is too vanilla. Maybe you want it to be more visually appealing or to provide some additional features. With Power BI’s custom visuals, one could hypothetically design their own custom gauge control, such as this one provided by CloudFronts Technologies:
This is just one example, but it demonstrates the potential that writing one’s own visual has – both in terms of communicating relevant info and for general aesthetics.
Microsoft has created a fairly barebones tutorial that walks through the process of writing custom visualizations with Power BI, and in this article I will provide some comments and insights to supplement it.
So, Let’s Get Started
Notice that the Microsoft tutorial makes use of NodeJS and npm (Node Package Manager). As Microsoft continues to embrace the open source world, many of their new tools are being hosted and distributed via popular channels for open source libraries.
Microsoft’s Power BI Visual Tools is one such project. This toolset, utilized via a command line utility such as PowerShell or a simple Command Prompt, provides users the ability to stand up the basic scaffolding of a Power BI custom visual project to begin development on. With the scaffolding in place, users can begin creating new custom visuals and running them for debugging.
This project can be managed with whatever IDE or source code editor you prefer, but in keeping with the open source theme, you may want to consider Visual Studio Code.
As for the project itself, it’s fairly lightweight – with only a small handful of source files. Power BI visuals are developed in TypeScript, which is actually a superset of JavaScript. That is to say it IS JavaScript, plus additional features. One of those additional features gives users the ability to statically type variables and support for many other object-oriented concepts. However, TypeScript is based on a more recent version of JavaScript than most people are familiar with.
JavaScript – A Brief History
Before you go diving into a language like TypeScript, it’s helpful to understand the murky history of JavaScript.
JavaScript was originally developed to be a client-side scripting language for the Netscape browser in the mid-1990’s. Originally called LiveScript, it was renamed JavaScript (likely for marketing reasons). JavaScript has no connection to Sun Microsystems – or their popular Java programming language – other than some syntax similarities. The name JavaScript was likely chosen to make it more attractive to learn and use, as Java was considered the hot development language of the web at the time.
As other browser developers saw the usefulness of JavaScript, they began implementing their own custom versions of it or something like it. This led to a headache for web site developers, as their scripts might work in certain browsers but would not work in others . The need to have a uniform standard for this client-side scripting language in browsers was obvious, and thus ECMAScript was born. ECMAScript (also sometimes referred to as simply ES) is the official standard of the language. JavaScript is an implementation of the ECMAScript specification.
When people these days refer to “JavaScript” they are usually referring to a specific version of it, the version which implements ES5. This is likely what everyone thinks of when they hear the term JavaScript, and it is still the most widely used.
However, the specification behind the JavaScript language continues to evolve. ES6 saw a particularly large number of changes and features added. (Note: ES6 is now known as ES2015, as ECMA moved away from simple numerical versions and instead versions are now numbered by the year of their release.)
Many developers wished to utilize the new features of the language, however most browsers still only understood ES5. Thus, several new languages were born that implement newer and more advanced versions of ECMAScript. Development is done in the more advanced languages and are then converted into ES5 based JavaScript, a process known as “transcompilation.”
TypeScript is based on ES2015+, which is where many of its new features over traditional ES5 based JavaScript come from. The final product after transcompilation, however, is still traditional JavaScript, so as to maintain wide browser compatibility.
Final Notes (Sharing is Caring)
Now that history class is over, we can look at a few noteworthy aspects as it pertains to custom visuals within PowerBI.
- As you make changes to your custom visual project, you can build and run it locally.
- Within Power BI’s online service, you can host your custom visual and test/debug it.
- When the visual is fully developed, you can package it up so that it can be shared with others and imported into their Power BI projects. You can also publish your custom visual to Microsoft AppSource so that it may be shared widely. Currently only free sharing of custom visuals is allowed (things could get interesting if that changes).
- Given the aforementioned sharing, the AppSource can be a great resource for grabbing visuals others have created that may be of use.
Questions?
Thanks for reading! We hope you found this blog post to be useful. Do let us know if you have any questions or topic ideas related to BI, analytics, the cloud, machine learning, SQL Server, (Star Wars), or anything else of the like that you’d like us to write about. Simply leave us a comment below, and we’ll see what we can do!
Keep your data analytics sharp by subscribing to our mailing list!
Thanks for reading! Keep your knowledge sharp by subscribing to our mailing list to receive fresh Key2 content around data analytics, business intelligence, data warehousing, and more!
Key2 Consulting is a data warehousing and business intelligence company located in Atlanta, Georgia. We create and deliver custom data warehouse solutions, business intelligence solutions, and custom applications.