Forum Discussion

Anonymous's avatar
Anonymous
Not applicable
7 years ago

Add tooltip page in ChicletSlicer?

Hi! I'm new in the community and I would like to know if it's possible add the tooltip page functionality. I know it's possible in bar and column charts but I don't know if it is in slicers. I'm n...
Need Help
Anonymous's avatar
Anonymous
Not applicable
7 years ago

Thanks for your answer v-viig.

 

I added the "tooltips" into capabilities.json and in the PBI chicletSlicer "Format" options is beign shown but it's not working yet.

I want to use the tooltip page functionality but I'm not sure which one of these two (tooltipService or tooltipServiceWrapper) I do have to use.

 

Could you tell me with which one can I achieve my purpose? Also how can I pass the SelectionId correctly? The examples are for bar graphs but I don't have the same properties and neither their values. I tried to emulate it by copying/pasting but nothing was achieved.

 

I highlighted the missing properties in the existing code:

 

 

this.tooltipServiceWrapper.addTooltip(this.barContainer.selectAll('.bar'),
    (tooltipEvent: TooltipEventArgs<BarChartDataPoint>) => this.getTooltipData(tooltipEvent.data),
    (tooltipEvent: TooltipEventArgs<BarChartDataPoint>) => tooltipEvent.data.selectionId
);

 

I created a barContainer property like as this custom visual example, but it's a graph and I face many problems to replicate it.

I added the BarChartDataPoint interface also.

 

Which should be my next step?

 

Thank you

v-viig's avatar
v-viig
Community Champion
7 years ago

I think you can use slicerBody.selectAll(ChicletSlicer.ItemContainerSelector.selector) instead of this.barContainer.selectAll('.bar').

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

[email protected]

  • Anonymous's avatar
    Anonymous
    Not applicable
    7 years ago

    Thanks v-viig 

     

    I applied it but nothing appears, I guess that I have to change something in these 3 lines of code.

    I'm sorry but even though I try to understand it and fix it I can't.

     
    this.tooltipServiceWrapper.addTooltip(this.slicerBody.selectAll(ChicletSlicer.ItemContainerSelector.selector),
                (tooltipEvent: TooltipEventArgs) => this.getTooltipData(tooltipEvent.data),
                (tooltipEvent: TooltipEventArgs) => tooltipEvent.data.selectionId
            );
    interface BarChartDataPoint {
        value: PrimitiveValue;
        category: string;
        color: string;
        strokeColor: string;
        strokeWidth: number;
        selectionId: ISelectionId;
    };
    private getTooltipData(value: any): VisualTooltipDataItem[] {
            let language = getLocalizedString(this.locale, "LanguageKey");
            return [{
                displayName: value.category,
                value: value.value.toString(),
                color: value.color,
                header: language && "displayed language " + language
            }];
        }
     
    What do I have to fix?
     
    Thanks in advance.
    • Anonymous's avatar
      Anonymous
      Not applicable
      2 years ago

      I am facing the same challenge. Did you manage to do it?