Click event handler on bar chart in PowerBI embed

Discussão em 'Angular' iniciado por Bopsi, Novembro 27, 2024.

  1. Bopsi

    Bopsi Guest

    I am able to embed Power BI report in Angular app using npm's power-bi-embed package.

    I have a bar chart where I have count in Y axis and region in X axis. How do I know user is clicking on bar of which region.

    I have tried using relevant event handlers mentioned in this document.

    export class AppComponent implements OnInit {
    title = 'powerbi-embed';

    reportConfig: IReportEmbedConfiguration = {
    type: 'report',
    embedUrl: '',
    tokenType: models.TokenType.Aad,
    accessToken: '',
    settings: {
    panes: {
    filters: {
    expanded: false,
    visible: false,
    },
    },
    background: models.BackgroundType.Transparent,
    },
    };
    @ViewChild(PowerBIReportEmbedComponent)
    reportObj!: PowerBIReportEmbedComponent;
    eventHandlersMap = new Map([
    [
    'loaded',
    () => {
    const report = this.reportObj.getReport();
    report.setComponentTitle('Embedded report');
    },
    ],
    ['rendered', (event: any) => console.log('Report has rendered:', event)],
    [
    'error',
    (event?: service.ICustomEvent<any>) => {
    if (event) {
    console.error(event.detail);
    }
    },
    ],
    ['visualClicked', (event) => console.log('Visual clicked:', event)],
    ['pageChanged', (event) => console.log('Page chnaged:', event)],
    ['buttonClicked', (event) => console.log('Button clicked:', event)],
    ['commandTriggered', (event) => console.log('Command triggered:', event)],
    ['dataHyperlinkClicked', (event) => console.log('Hyperlink clicked:', event)],
    ['dataSelected', (event) => console.log('Data selected:', event)],
    ['dataHyperlinkClicked', (event) => console.log('Hyperlink clicked:', event)],
    ['info', (event) => console.log('Tile clicked:', event)]
    ]) as Map<
    string,
    (event?: service.ICustomEvent<any>, embeddedEntity?: Embed) => void | null
    >;

    constructor() {}

    ngOnInit() {
    this.embedReport();
    }

    embedReport() {
    this.reportConfig = {
    ...this.reportConfig,
    ...vairables,
    };
    }
    }


    I am getting below details every time I click on the chart

    [​IMG]

    Only relevant information I ma getting from this are, which page, which report and what kind of chart. Not what data point I have clicked?

    Is is technically possible? Am I missing some event handlers?

    Continue reading...

Compartilhe esta Página