Power BI for Developers

Please login or click SIGN UP FOR FREE to create your PowerBIUG account to join this user group.
Expand all | Collapse all

Custom Visuals

  • 1.  Custom Visuals

    Posted Oct 30, 2018 09:40 AM
    Good morning Jan!

    Thank you for starting the developer section. I look forward to sharing things I have learned as well as gain knowledge from those who have experience where I do not.

    I see that you have experience creating custom visuals. I am looking to advance my knowledge in the Power BI development world and start creating some custom visuals of my own. Specifically in my job, I was asked to look into adding visuals from external js frameworks (like chart.js for exmaple) to further enrich our company's visualization experience. I visited the Microsoft tutorials on setting up the environment and the practice tutorial for the circle card custom visual. I was able to setup my environment and create the visual. My question to you is, this process seemed pretty daunting to someone that isn't familiar with javascript, json, typescript and all the other tools needed to create custom visuals or even to add external libraries and embed visuals from other frameworks, so where do you recommend getting started? I've been using PBI for over 4yrs so I'm very familiar with it. I'm wanting to get off to the best start possible with regards to development.

    Thanks in advance! :)

    Aaron Rodriguez
    BI, Data Engineer
    Oakland TN

  • 2.  RE: Custom Visuals

    Bronze Contributor
    Posted Oct 31, 2018 04:30 AM
    Hi Aaron,

    Welcome to the community.

    As you already experienced developing Custom Visuals for Power BI is more related to (modern) web development then Power BI.
    If I look at my self: I original started more as a developer with affinity to data and switch pretty early in my career to be more data centric.

    So I 'just started' with understanding the way a Custom Visual works (see this thread Developing PowerBI Visuals on StackOverflow for more details). But other good starting point is to dig into the possibilities of the libraries you want to use, eg D3js or Chart.js. Ideal is to have a library that supports TypeScript for easier development (I do see that chart.js has TypeScript definitions, so that would work). And after that you can start combining the two techniques together: data retrieval with Power BI and how to store parameters persistent with the report(session) so it isn't lost when a new redraw is triggered.

    But regarding the external libraries: there are some tricky parts with certain modules, but the new API (2.x) supports a more friendly way by supporting 'webpack'. With the v1.x API you need to add the javascript file(s) to the pbiviz.json and add the TypeScript definitions to the tsconfig.json.

    Feel free to ask for more information or other options that would help you to get up to speed.


    Happy Power BI developing!
    Jan Pieter
    PUG SIG Leader Power BI for Developers: https://www.pbiusergroup.com/developers