Power Bi Pie chart syntax and coding

[chtsang]

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

[v-lionel-msft · Accepted solution]

Hi @chtsang ,

Learn how to develop your own Power BI visual using the circle card visual as an example in Power BI...

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.

[v-lionel-msft · Accepted solution]

Hi @chtsang ,

Learn how to develop your own Power BI visual using the circle card visual as an example in Power BI...

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.

[chtsang · Accepted solution]

are there other sites? it doesnt really help much