Smart Analytics
Deel je visualisatie met PowerBI Laatst bijgewerkt: 3 februari 2016

In een vorige blog schreef ik over de mogelijkheden om geavanceerde visualisaties te maken met behulp van SQL Server 2016 en d3.js. Inmiddels kun je binnen Microsoft PowerBI je eigen visualisaties ontwikkelen en zo de voordelen van een eigen maatwerk visualisatie combineren met de voordelen van de PowerBI-omgeving.

In deze blog benoem ik de voordelen van het integreren van je eigen visualisatie in PowerBI en laat ik zien hoe dit in zijn werk gaat. Ik neem als uitgangspunt onderstaande visualisatie die ik ook in mijn vorige blog gebruikt heb.

BI

 

Je eigen visualisatie & power BI

Met de ondersteuning voor maatwerk visualisaties biedt Microsoft de mogelijkheid om je eigen visualisatie te integreren in PowerBI en deze te delen met de PowerBI Community. Microsoft stimuleert het delen van visualisaties en heeft vorig jaar zelfs een wedstrijd georganiseerd voor de beste visualisatie. Het kunnen integreren en delen van maatwerk visualisaties in PowerBI is een enorm krachtige feature waardoor niet alleen Microsoft, maar iedereen de mogelijkheden van PowerBI kan uitbreiden.

Een maatwerk visualisatie kun je eenvoudig toepassen op alle gegevenssets in PowerBI. Je hoeft niet zelf meer een verbinding met je gegevenssets tot stand te brengen. De visualisatie kun je gecombineerd met andere visualisaties gebruiken in rapportages en dashboards, zoals hieronder getoond:

Power BIIntegratie in PowerBI betekent daarnaast dat je functionaliteit cadeau krijgt, zoals het gebruik van de filtermogelijkheden van PowerBI. Zelf mee aan de slag? Download de programmacode en de plugin voor deze voorbeeldvisualisatie hier.

 

 

 

Hoe het werkt: de power BI IVisual interface, TypeScript en D3.JS

Voor een maatwerk visualisatie moet je de PowerBI IVisual interface implementeren. De belangrijkste onderdelen van deze interface zijn:

  • Capabilities: object waarin de eigenschappen van de visualisatie worden gedefinieerd, onder andere welke ‘assen’ de visualisatie biedt om gegevens te gebruiken (meetwaarden en groeperingen).
  • Init(): wordt eenmalig aangeroepen om de visualisatie te initialiseren.
  • Update(): wordt elke keer aangeroepen als de visualisatie moet worden bijgewerkt. Bij de aanroep wordt als parameter een DataView-object meegegeven waarin onder andere de data zitten die gevisualiseerd moeten worden.
  • Destroy(): wordt aangeroepen bij het opruimen van de visualisatie.

Doordat de visualisatie via de update-methode de data aangeleverd krijgt vanuit de PowerBI-host, hoef je in de visualisatie geen rekening te houden met database-connecties, actieve filters et cetera. Je vertaalt de data uit het DataView-object naar een structuur die voor de visualisatie begrijpelijk is en je rendert de visualisatie.

Definiëren van capabilities

In dit voorbeeld wil ik dat de visual op basis van twee groepen en een meetwaarde de relatie tussen de twee groepen laat zien. Als input verwacht ik dus twee groeperingen en een meetwaarde. Dit definieer ik als volgt in het capabilities-object:

 

definiëren van capabilities

Verwerken van data bij update

Onderstaand codefragment toont hoe ik in de update-methode de gegevens uit de DataView vanuit de Categorical DataView structuur omzet naar de door de visual gebruikte datastructuur:

codefragment

Het resterende deel van de update methode bestaat uit het renderen van de visual op basis van de data array. Die bestaat vrijwel volledig uit de code van de oorspronkelijke visualisatie.

Geen JavaScript maar TypeScript

PowerBI-visualisaties schrijf je in TypeScript. TypeScript is een getypeerd, object-georiënteerd ‘laagje’ over JavaScript dat, ten opzichte van JavaScript, leidt tot beter gestructureerde programmacode. Een punt van aandacht is dat, wanneer je een bestaande, in JavaScript geschreven visualisatie wil integreren in PowerBI, je deze moeten omzetten naar TypeScript, inclusief de (gebruikte delen van) JavaScript-libraries waar de visualisatie gebruik van maakt. In mijn voorbeeld bestaat deze omzetting uit het definiëren van de door de visualisatie gebruikte JavaScript-functies als static functies van de visualisatie-class en het typeren van bepaalde variabelen. Geen enorme exercitie dus.

D3.JS geïntegreerd

Standaard gebruikt PowerBI de D3.js-library voor de visualisaties, deze is dus al beschikbaar als TypeScript-library om te gebruiken. Dit maakt het omzetten van bestaande D3.js-visualisaties betrekkelijk eenvoudig.

Meer weten of zelf proberen?

De plugin en sourcecode van deze PowerBI visualisatie vind je hier

Informatie voor het ontwikkelen van je eigen PowerBI visualisatie vind je hier

Op dezelfde wiki staat ook een goede eerste voorbeeldimplementatie

Een uitleg van de PowerBI developer tools

Lees meer over TypeScript


Whitepaper
DOWNLOAD