topic Re: How to create a custom visualization in visual studio? in Developer

How to create a custom visualization in visual studio?

NicolaeGP — Tue, 22 Dec 2015 23:42:44 GMT

Hey,

I've been struggling, for a couple of days now, to understand the architecture behind the custom visualization project available on github. I've looked for turorials on how to create custom visualizations but could only find the one Sachin Patney created in the Dev Tool.

I know I have to create a testVisualization.ts in visuals folder and a testVisualization.capabilities.ts in capabilties folder but what should I do next in order to play with my visualization in the playground?

Can someone create a tutorial on how to create fx. a table visualization in visual studio, add it to the playground and perhaps also export it in .pbiviz file??

Re: How to create a custom visualization in visual studio?

JasonDunbar — Wed, 25 Nov 2015 10:35:07 GMT

Hi Nicolae,

Sachin has created a nice tutorial on getting started and this is available on Youtube - https://www.youtube.com/watch?v=-gtxy5vJ6MI

The documentation is rapidly evolving at the moment and you can be forgiven for not immediately finding what you need in order to progress - I think there's also some assumed knowledge in certain areas, but stick with it, you'll get there.

Oh, just seen as I've been writing this that you posted around 3 weeks ago. How are you getting on now...?

Re: How to create a custom visualization in visual studio?

jovan — Wed, 30 Dec 2015 20:35:07 GMT

"This video has been removed by the user." 😞

But I found this one: https://www.youtube.com/watch?v=Aa2YLRW5CKo also by Sachin

Re: How to create a custom visualization in visual studio?

JasonDunbar — Sun, 28 Feb 2016 23:25:24 GMT

Aha, sorry, the link was active at the time of posting 🙂

Thanks for posting a more up to date link.

Re: How to create a custom visualization in visual studio?

NicolaeGP — Wed, 09 Mar 2016 11:19:01 GMT

I have managed to understand how to work with visuals by watching the video you posted. Many thanks.

Is it possible to create cutom visual with color selection for gauge chart dynamically after adding?

rohitchaudhary1 — Tue, 15 Mar 2016 09:57:29 GMT

I want to create a custom visual same like Gauge chart provided by power BI. I just need an provison to select color of Gaugle line to be set dynamically by user. Is that possible to create such visual just like bar chart in powerbi where user can change colors of each bar?

Re: How to create a custom visualization in visual studio?

michaelakelley — Thu, 21 Jul 2016 20:57:17 GMT

Is there another link? Both links in the replies are not active.

Re: How to create a custom visualization in visual studio?

michaelakelley — Thu, 21 Jul 2016 21:05:06 GMT

Both links appear to be down. Is there another link? My GoogleFu turned up nothing!

Re: How to create a custom visualization in visual studio?

JasonDunbar — Thu, 11 Aug 2016 12:52:28 GMT

I searched for three words on YouTube: Sachin; Power BI and Visual - https://www.youtube.com/watch?v=_thcxwFmH9A

Re: How to create a custom visualization in visual studio?

Asutosh — Fri, 12 Aug 2016 08:17:10 GMT

Hi,

The developer tools have been decrepated and they are using Power BI visuals CLI tool. Can anyone provide ant tutorial links on how to create custom visuals using this tool.

Re: How to create a custom visualization in visual studio?

deldersveld — Fri, 12 Aug 2016 19:45:55 GMT

They have a small tutorial on GitHub: https://github.com/Microsoft/PowerBI-visuals-docs

Re: How to create a custom visualization in visual studio?

rabbani — Fri, 24 Nov 2017 17:32:40 GMT

i have find the following link that show creating Visuals using powerbi app. not VS

PBI is light weight comparing with VS i believe

https://www.youtube.com/watch?v=uL9EkdagEPU

Re: How to create a custom visualization in visual studio?

MawashiKid — Fri, 24 Nov 2017 18:49:36 GMT

RE: i have find the following link that show creating Visuals using powerbi app. not VS

PBI is light weight comparing with VS i believe

Hi,

Content of the video is deprecated so I wouldn't waste too much time on this one.

To be honnest with you. there aren't too many released tutorials and videos on how to create Power BI Visuals at this stage. You also have to be careful as a lot still deal with deprecated content, as the one you mentioned.

Though you can stll have a look at Ted Pattison video:

Developing Custom Visuals for PowerBI

https://www.youtube.com/watch?v=nDXm14lSfso

That's over an hour though you'll find a segment explaining the basics of creating Power PB Visuals
with Visual Studio Code and Power BI Visuals CLI tool. Ted has also provided a Github link at the end of the video in credits giving you access to source code used in his presentation.

I'd say it's a good basic. If you're already comfortable with TypeScript and have worked
with visualisation libraries like d3.js, then you can still have a look at what's done
on Github [just enter PowerBI Visuals in search box .]

Re: How to create a custom visualization in visual studio?

v-viig — Mon, 27 Nov 2017 12:03:14 GMT

You can also follow the official tutorial on GitHub.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Re: How to create a custom visualization in visual studio?

AndersMadsen — Wed, 27 Jun 2018 10:32:36 GMT

The Official tutorial shows how to set up a project, not how to develop, it's missing some steps.

Re: How to create a custom visualization in visual studio?

v-viig — Thu, 28 Jun 2018 06:58:17 GMT

The official tutorial describes how to use Power BI Custom Visuals API. Documentaion does not desribe specific dev steps as developers can use lots of different frameworks such as d3, React, Three.js, etc.

It's impossible to cover all of aspects.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Re: How to create a custom visualization in visual studio?

AndersMadsen — Thu, 28 Jun 2018 07:54:16 GMT

It is however possible to explain the abstracts with the use of an example (d3).

https://www.youtube.com/watch?v=wzi-fCcir-c This video does a great job, and imo it has the steps that's missing from your documentation to explain the red line.

Re: How to create a custom visualization in visual studio?

amgupt — Sun, 17 May 2020 01:59:17 GMT

The video you have mentioned is no more available