QNH gebruikt cookies op haar website om het gebruik van de website te analyseren, gebruiksgemak te verbeteren, voor social media en om ervoor te zorgen dat u relevante informatie te zien krijgt wanneer u gebruik maakt van de QNH website. Meer informatie over de cookies kunt u vinden in ons privacy- en cookiestatement. Door akkoord te gaan met onze cookies gaat u akkoord met de bovenstaande cookies. Gaat u niet akkoord dan worden alleen de functionele cookies ingeladen, sommige functionaliteiten zullen dan ook uitgeschakeld zijn. U geeft door gebruik te blijven maken van deze website toestemming voor het gebruik van cookies en het verwerken van op deze wijze verkregen persoonsgegevens, zoals in ons privacystatement vermeld.

Microsoft Power BI staat vooral bekend om de eenvoud waarmee inzichten uit data gehaald kunnen worden door middel van visualisaties.

[Deze blog is geschreven door Tim van der Loop – Business Intelligence consultant QNH Consulting] 

Zelf visualisaties ontwikkelen

Vaak heb je meer dan voldoende aan de standaard visualisaties die Power BI biedt. Zo niet, dan biedt de Office store een uitkomst. Hier kunnen op maat gemaakte Power BI-visualisaties gedownload worden. Maar wat doe je als zelfs dit niet voldoende is? Of wanneer je een visualisatie hebt gevonden die net niet aansluit op jouw bedrijfsdoeleinden maar dit wel zou kunnen met enkele aanpassingen? In deze gevallen biedt Power BI de mogelijkheid om zelf visualisaties te ontwikkelen. Op o.a. GitHub, vind je een uitgebreid aanbod aan documentatie en broncode om zelf hiermee aan de slag te gaan. Echter, voordat je zo ver bent, dienen eerst een aantal stappen doorlopen te worden.

Ervaring in de praktijk

Voor onze klant de Provincie Limburg zijn wij de uitdaging aangegaan om binnen de broncode van een bestaande visualisatie de gewenste wijzigingen aan te brengen. In deze eerste oriënterende blog worden de stappen die wij zijn tegengekomen bij naam genoemd en beschreven.

Node.js & NPM-style development

Het ontwikkelen van custom Power BI-visualisaties begin bij Node.js. Voordat je kan starten met het ontwikkelen van Power BI-visualisaties moet je ervoor zorgen dat Node.js op je ontwikkelstation is geïnstalleerd. Node.js is een open source server raamwerk en zorgt ervoor dat JavaScript applicaties op de server, en tijdens het ontwikkelproces, gedraaid kunnen worden. In tegenstelling tot andere JavaScript toepassingen worden de applicaties niet uitgevoerd in een webbrowser, maar in de JavaScript-Engine van Node.js zelf. NPM is de package manager die meekomt met Node.js. Het is de meest populaire package manager voor web front-end en Node.js van dit moment. Een package manager helpt door het installeren, upgraden en door het configureren van softwaremodules te automatiseren. Modules zijn bijvoorbeeld JavaScript bibliotheken die je gebruikt binnen je project. Om Power BI-visualisaties te kunnen ontwikkelen heb je het PBIVIZ-package nodig.

PBIVIZ (PowerBI Custom Visual Tool)

Het PBIVIZ-package is dé manier om visualisaties te ontwikkelen en deze in real time te testen in Power BI Services. Voorheen werden Power BI-visualisaties ontwikkeld in een preview ontwikkelomgeving. Vanaf Augustus 2016 is door Microsoft de nieuwe ontwikkelomgeving vrijgegeven. Deze nieuwe ontwikkelomgeving van Power BI is volledig command-line based en wordt aangestuurd vanuit de Windows command prompt. Ook zijn nieuwe functionaliteiten mogelijk zoals isoleren van visualisaties in IFrames, backward compatibility, command-line tools, de mogelijkheid om ad hoc visualisatie te testen in een bestaande rapportage met bestaande data (mede mogelijk doordat de visualisatie in ontwikkeling geïsoleerd is van de rest d.m.v. een IFrame) en worden externe bibliotheken (D3) ondersteund die het ontwikkelen van visualisaties een stuk efficiënter maken.

External (D3) libraries

D3 staat voor Data-Driven Documents en is een JavaScript bibliotheek voor het visualiseren van data. D3 maakt gebruik van verschillende technieken zoals Scalable Vector Graphics (SVG), Canvas en HTML en combineert deze krachtige visualisatie en interactie technieken met een data-driven benadering naar Document Object Model (DOM) manipulatie. Deze technieken zorgen voor een optimale combinatie tussen de mogelijkheden van moderne webbrowsers en de vrijheid om de visualisatie te ontwikkelen die het beste bij jouw data past. D3 is eenvoudig via NPM te installeren. Op GitHub is een uitgebreide D3 galerij beschikbaar met voorbeelden van visualisaties inclusief broncode. De mogelijkheid om gebruik te maken van externe bibliotheken zoals D3 zorgt ervoor dat het coderen van visualisaties met behulp van TypeScript een stuk efficiënter verloopt.

 

TypeScript language

Typescript is een universal web language en is tevens de programmeertaal onder Power BI visualisaties. Universal web language wil zeggen dat de compiler van TypeScript gewone JavaScript-code maakt, die in elke browser of javascript omgeving zonder aanpassing gedraaid kan worden. TypeScript is geen nieuwe taal, maar een uitbreiding op JavaScript. TypeScript is ook geen vervanging van JavaScript en voegt geen nieuwe functionaliteiten toe. Hiermee lijkt het op CoffeeScript en Google Dart. TypeScript biedt ontwikkelaars toepassingen zoals type safety, compile time type checking en object oriented constructs bovenop JavaScript. Vrij vertaalt: het biedt ontwikkelaars de mogelijkheid om in object georiënteerde termen te denken tijdens het schrijven van het JavaScript. In het geval van Power BI moet je rekening houden met de structuur die de Custom Visuals API in je TypeScript code verwacht.

The Custom Visuals API

Voor het ontwikkelen van Power BI-visualisaties is het belangrijk om de basisstructuur van een visualisatie te begrijpen. De basisstructuur van een visualisatie is een class dat de IVisual implementeert in een name spaced module om toegang te krijgen tot de interface van de API. Alle visualisaties moeten starten met het implementeren van deze IVisual interface die bestaat uit verschillende visualisatie classes. Onder deze classes vallen o.a. de constructor class die de visualisatie initieel vormgeeft, en de update class die veranderingen in het data model detecteert en de visualisatie hierop aanpast.

General Design Issues

Naast het leren begrijpen van de custom visuals API is het minstens zo belangrijk om rekening te houden met generieke design issues waarover veel literatuur beschikbaar is. Een voorbeeld hiervan is het online boek “Data Visualization with JavaScript” van Stephen A. Thomas. Er zit een hele wetenschap achter het optimaal ontwikkelen van visualisaties. Het schiet het doel van deze blog voorbij om deze wetenschap uitgebreid te beschrijven, maar wellicht dat in de toekomst nog een aparte blog hierover geschreven wordt.

Take it easy

Mocht je geïnteresseerd zijn in het leren ontwikkelen van custom Power BI-visualisaties dan is het belangrijk om te beseffen dat niet alle stappen in één keer genomen hoeven te worden. Een stapsgewijze aanpak is vele male verstandiger en haalbaarder. Begin bijvoorbeeld met het volgen van NPM of TypeScript trainingen of volg een D3 tutorial in JavaScript (gezien deze nog niet in TypeScript bestaan). De “Developing Your First PowerBI Visual” tutorial op GitHub is een goed startpunt om te beginnen met leren ontwikkelen. Het belangrijkste advies is om gewoon aan de slag te gaan met de Power BI Custom Visual Tool en hiermee bezig te blijven. Doordat de foutmeldingen die je genereert bijna alle stappen raakt, leer je stapsgewijs met trial and error hoe je een visualisatie moet ontwikkelen.

Mooi resultaat

Zodra alle stappen genomen zijn ben je in staat om de meest gave visualisaties te ontwikkelen óf om bestaande visualisaties aan te passen om deze beter te laten aansluiten op de behoefte van je bedrijfsvoering.

Het resultaat van de wijzigingen in het project bij onze klant de Provincie Limburg is goed zichtbaar als je de oude en de nieuwe situatie met elkaar vergelijkt.

Zie jij ook meerwaarde in het op maat maken van Power BI-visualisaties voor jouw business? Heb jij een idee over het ontwikkelen van een nieuwe visualisatie, of het aanpassen van een bestaande visualisatie? Of ben jij je nog aan het oriënteren over wat Power BI voor jouw business kan betekenen? Neem dan gerust contact met ons op!

Ook zijn wij op 24 maart te vinden op de Power BI gebruikersdag in Utrecht!


Delen op social media


Contact

Amsterdam

+31 20 460 9609

Rotterdam

+31 10 333 0813

Groningen

+31 50 520 1888

Eindhoven

+31 40 230 5624

Maastricht

+31 43 207 3050

Hasselt (België)

+32 11 771 277

Twitter