Power Bi Pie chart syntax and coding

chtsang — Tue, 09 Mar 2021 08:09:55 GMT

Hello, I am trying to develop a visual for power bi in the form of a pie chart. Problem is i couldnt find a toutorial that teaches so and the ones I could find are using syntax and outdated d3 versions. I saw one made by user "@dm-p" and tried to copy his code. It works but now i couldn't figure out how to expand it, add data from my power bi dataset or how can i manipulate it. Any help would be greatly appreciated.

Source code is as follows

'use strict';

import 'core-js/stable';

import './../style/visual.less';

import powerbi from 'powerbi-visuals-api';

import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;

import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;

import IVisual = powerbi.extensibility.visual.IVisual;

import EnumerateVisualObjectInstancesOptions = powerbi.EnumerateVisualObjectInstancesOptions;

import VisualObjectInstance = powerbi.VisualObjectInstance;

import DataView = powerbi.DataView;

import VisualObjectInstanceEnumerationObject = powerbi.VisualObjectInstanceEnumerationObject;

import { VisualSettings } from './settings';

import * as d3 from 'd3';

export class Visual implements IVisual {

[x: string]: any;

private svg: d3.Selection<any, any, any, any>;

private visualSettings: VisualSettings;

constructor(options: VisualConstructorOptions) {

console.log('Visual constructor', options);

this.svg = d3

.select(options.element)

.append('svg')

.classed('pieChart', true);

}

public update(options: VisualUpdateOptions) {

let dataView: DataView = options.dataViews[0];

this.visualSettings = VisualSettings.parse<VisualSettings>(dataView);

console.log('Visual update', options);

console.log('Removing elements...');

this.svg.selectAll('*').remove();

console.log('Resolving dimensions...');

let width = options.viewport.width,

height = options.viewport.height,

radius = Math.min(width, height) / 2;

console.log('Setting and appending SVG elements...');

this.svg

.attr('width', width)

.attr('height', height);

let container = this.svg

.append('g')

.attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');

interface IData {

category: string;

value: number;

color: string;

}

console.log('Assigning data...');

let data: IData[] = [

{ category: 'a', value: 9, color: 'red' },

{ category: 'b', value: 20, color: 'blue' },

{ category: 'c', value: 30, color: 'green'},

{ category: 'd', value: 8, color: 'yellow' },

{ category: 'e', value: 12, color: 'orange' }

];

console.log('Creating pie function...');

let pie = d3.pie<IData>()

.value((d) => d.value);

console.log('Drawing chart...');

container

.selectAll('*')

.data(pie(data))

.enter()

.append('path')

.attr('d', d3.arc<d3.PieArcDatum<IData>>()

.innerRadius(0)

.outerRadius(radius)

)

.attr('fill', (d) => d.data.color)

.attr('stroke', 'black')

.style('stroke-width', '2px')

.style('opacity', 0.7);

console.log('Rendered!');

}

private static parseSettings(dataView: DataView😞 VisualSettings {

return VisualSettings.parse(dataView) as VisualSettings;

}

public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions😞 VisualObjectInstance[] | VisualObjectInstanceEnumerationObject {

return VisualSettings.enumerateObjectInstances(this.settings || VisualSettings.getDefault(), options);

}

And this is what it looks like:

Any help is greatly appreciated

Re: Power Bi Pie chart syntax and coding

v-lionel-msft — Thu, 11 Mar 2021 05:28:56 GMT

Hi @chtsang ,

Learn how to develop your own Power BI visual using the circle card visual as an example in Power BI embedded analytics for better embedded BI insights - Power BI | Microsoft Docs

Please refer to the custom visual development steps.

Best regards,
Lionel Chen

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

Re: Power Bi Pie chart syntax and coding

chtsang — Thu, 11 Mar 2021 13:39:16 GMT

are there other sites? it doesnt really help much

topic Re: Power Bi Pie chart syntax and coding in Developer

Power Bi Pie chart syntax and coding

Re: Power Bi Pie chart syntax and coding

Re: Power Bi Pie chart syntax and coding