Create new custom visuals from the scratch code

[Krunalbpatel]

Hi,

I want to create custom Power BI visuals for the report. I follow the different links to create custom visuals. But did't get the code for that. I need to know how to write a code in the visuals.ts file. Can you please provide me some basic Idea, How can I write the code? Or Is there any document fot it How to write a code?

I have some inbuilt code but I am getting the following error

Argument of type '{ value: string | number | boolean | Date; identity: string; }' is not assignable to parameter of type 'CategoryViewModel'.
  Types of property 'value' are incompatible.
    Type 'string | number | boolean | Date' is not assignable to type 'string'.
      Type 'number' is not assignable to type 'string'.

Thanks

[BhaveshPatel]

Hi Krunal, 

You can find more information on below github repository.

https://github.com/Microsoft/PowerBI-visuals

[Krunalbpatel]

Hi @BhaveshPatel,

I see this post, But how can I write a code? Is there any documentation for how to code? I am using the code but it gives me an error.

Argument of type '{ value: string | number | boolean | Date; identity: string; }' is not assignable to parameter of type 'CategoryViewModel'.
  Types of property 'value' are incompatible.
    Type 'string | number | boolean | Date' is not assignable to type 'string'.
      Type 'number' is not assignable to type 'string'

[BhaveshPatel]

You would find more information on the below VIDEO POST by Sachin Patney.

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

[Krunalbpatel]

Hi @BhaveshPatel,

I see this video but I am not able understand properly. Is there any documentation available for basic codes?

[v-chuncz-msft]

@Krunalbpatel,

Sample Bar Chart Repo could be the start point, and you'll need to learn TypeScript first. As for the error message, check Type assertions.

[Krunalbpatel]

Hi @v-chuncz-msft,

Thanks for your reply. I have follow the Sample Bar Chart Repo and write the same code as explain, but when look in the Power BI I am not able to see the report data.

Thanks

[v-chuncz-msft]

@Krunalbpatel,

Make sure that all necessary files are added to the files array in tsconfig.json. This allows the TypeScript compiler to load them and in what order. For tips about debugging your custom visual, see the debugging guide.

[Krunalbpatel]

Hi @v-chuncz-msft,

Thanks for your reply, and I got the solution for this. It was the D3 folder and node_module folder is not able to find the correct file. So it was giving an error.

[Krunalbpatel]

Hi,

Now I am stuck on color selection for the bar or text. I got the color selection option in theproperty window but I am not able to apply the color to the bars or color. For this I have to add any file which I have forgottotn to add? I am getting error on getSelection() for the color.

Thanks

Krunal Patel

[v-chuncz-msft]

@Krunalbpatel,

This is another error, better to raise a new thread. That way, community members could easily find the solution to a specific problem. By the way, you may post some screenshots and the related code snippet to better illustrate this issue.