topic Re: Custom visual - Grouped bar chart not working in Developer

Custom visual - Grouped bar chart not working

satishr — Sat, 17 Feb 2018 18:15:28 GMT

I'm trying to replicate a grouped bar chart from the below link but getting errors. I resolved few type errors but cannot resolve a data related error.

https://bl.ocks.org/bricedev/0d95074b6d83a77dc3ad

The example uses a JSON file. I have removed that part and stored the JSON data in a variable. My code works fine in an HTML file but gives an error in Visual.ts file. The error is in the line

.attr("x", function(d) { return x1(d.rate); })

The error is [ts] Property 'rate' does not exist on type '{}'. Looks like the below line is not detecting any data.

.data(function(d) { return d.values; })

Re: Custom visual - Grouped bar chart not working

v-viig — Mon, 19 Feb 2018 07:37:52 GMT

Looks like this issue is related to TypeScript types.

Can you share all of files that are in the your custom visual (pbiviz.json, /src, tsconfig.json, etc.)?

What version of pbiviz tools do you use?

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Re: Custom visual - Grouped bar chart not working

satishr — Wed, 21 Feb 2018 12:41:10 GMT

Thanks for the solution @v-viig. The solution was

1. To create an interface like this

export interface DataValue {
value: number;
rate: string;
}

2. Then edit the bar chart code to this

const slice: d3.Selection<Data> = svg.selectAll(".slice")
.data(data)
.enter().append("g")
.attr("class", "g")
.attr("transform", function (d) { return "translate(" + x0(d.categorie) + ",0)"; });

slice.selectAll("rect")
.data<DataValue>((d) => { return d.values; })
.enter().append("rect")
.attr("width", x1.rangeBand())
.attr("x", function (d) { return x1(d.rate).toString(); })
.style("fill", function (d) { return color(d.rate).toString() })
.attr("y", function (d) { return +y(d.value); })
.attr("height", function (d) { return height - (+y(d.value)); });

I'm not sure why simple D3 code cannot work here. why it has to be so hard?

Re: Custom visual - Grouped bar chart not working

v-viig — Thu, 22 Feb 2018 08:02:22 GMT

The issue actually was related to TypeScript types that must be specified.

We'd recommend you to take a look at TypeScript Handbook to find out more about type system.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com