Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.
I've created a custom visual (combination scatter plot and dual-line graph) and am attempting to add tooltips. I used table databinding and followed an example I found here for assigning an Identity. For some reason, the tooltips are each only showing one line (employee ID) and the ID is the same for each tooltip.
import DataViewObjects = powerbi.extensibility.utils.dataview.DataViewObjects; module powerbi.extensibility.visual { "use strict"; interface DataPoint { grade: number; minimum: number; maximum: number; }; interface ViewModel { dataPoints: DataPoint[]; rangePenData: RangePoint[]; maxValue: number; minValue: number; maxGrade: number; minGrade: number; }; interface RangePoint { grade: number; rangePen: number; employeeID: string; tooltips: VisualTooltipDataItem[]; identity: ISelectionId[]; } export class Visual implements IVisual { private host: IVisualHost; private svg: d3.Selection<SVGElement>; private structureGroup: d3.Selection<SVGElement>; private yPadding: number = 0.1; private scatterGroup: d3.Selection<SVGElement>; private xAxisGroup: d3.Selection<SVGElement>; private yAxisGroup: d3.Selection<SVGElement>; private settings = { axis: { x: { padding: 25 }, y: { padding: 50 } }, border: { top: 10 } } constructor(options: VisualConstructorOptions) { this.host = options.host; this.svg = d3.select(options.element) .append("svg") .classed("vchart", true); this.structureGroup = this.svg.append("g") .classed("structure-group", true); this.scatterGroup = this.svg.append("g") .classed("scatter-group", true); this.xAxisGroup = this.svg.append("g") .classed("x-axis", true) this.yAxisGroup = this.svg.append("g") .classed("y-axis", true) } public update(options: VisualUpdateOptions) { let viewModel = this.getViewModel(options) let spread = Math.max(Math.abs(viewModel.minValue),Math.abs(viewModel.maxValue)) let width = options.viewport.width; let height = options.viewport.height; this.svg.attr({ width: width, height: height, }); let xScale = d3.scale.linear() .domain([spread*-1,spread]) .range([this.settings.axis.x.padding, width]); let xAxis = d3.svg.axis() .scale(xScale) .orient("bottom") .tickSize(1); this.xAxisGroup.call(xAxis) .attr({ transform: "translate(0, " + (height-this.settings.axis.x.padding) + ")" }); let yScale = d3.scale.linear() .domain([viewModel.maxGrade,viewModel.minGrade]) .range([0 + this.settings.border.top, height - this.settings.axis.x.padding]); let yAxis = d3.svg.axis() .scale(yScale) .orient("left") .tickSize(1); this.yAxisGroup .call(yAxis) .attr({ transform: "translate(" + (width + this.settings.axis.y.padding)/2 + ",0)" }) .selectAll("text") .style({ "text-anchor": "end", "font-size": "small" }); var valueline = d3.svg.line<DataPoint>() .x(function (d) { return xScale(d.minimum); }) .y(function (d) { return yScale(d.grade); }) var valueline2 = d3.svg.line<DataPoint>() .x(function (d) { return xScale(d.maximum); }) .y(function (d) { return yScale(d.grade); }) let minline = this.structureGroup .selectAll(".minline") .data([viewModel.dataPoints]); minline .enter() .append("path") .attr("class", "minline"); minline .attr("d", function (d) { return valueline(d); }) .style({ stroke: "green", fill: "none", "stroke-width": "3px", }); minline.exit() .remove(); let maxline = this.structureGroup .selectAll(".maxline") .data([viewModel.dataPoints]); maxline .enter() .append("path") .attr("class", "maxline"); maxline .attr("d", function (d) { return valueline2(d); }) .style({ stroke: "green", fill: "none", "stroke-width": "3px", }); maxline.exit() .remove(); let scatter = this.scatterGroup .selectAll(".rangePen") .data(viewModel.rangePenData) scatter .enter() .append("circle") .attr("class", "rangePen") scatter .attr("cx", d => xScale(d.rangePen)) .attr("cy", d => yScale(d.grade)) .attr("r", 5) .on("mouseover", (d) => { let mouse=d3.mouse(this.svg.node()); let x=mouse[0]; let y=mouse[1]; this.host.tooltipService.show({ dataItems: d.tooltips, identities: [d.identity], coordinates: [x, y], isTouchEvent: false }) }) scatter.exit() .remove(); } private getViewModel(options: VisualUpdateOptions): ViewModel { let dv = options.dataViews; let viewModel: ViewModel = { dataPoints: [], rangePenData: [], maxValue: 0, minValue: 0, maxGrade: 0, minGrade: 0, }; let view1 = dv[0].table; let view2 = dv[0]; for (let i = 0, len = view1.rows.length; i < len; i++) { viewModel.dataPoints.push({ grade: <number>view1.rows[i][1], minimum: <number>view1.rows[i][2]/-2, maximum: <number>view1.rows[i][2]/2, }); viewModel.rangePenData.push({ grade: <number>view1.rows[i][1], rangePen: <number>view1.rows[i][3], employeeID: <string>view1.rows[i][0], identity: this.getSelectionIds(view2, this.host), tooltips: [{ displayName: "Employee ID:", value: <string>view1.rows[i][0] }, { displayName: "Range Penetration:", value: <string>view1.rows[i][3] } ] }); } viewModel.maxValue = d3.max([d3.max(viewModel.dataPoints, d => d.maximum),d3.max(viewModel.rangePenData, d => d.rangePen)]); viewModel.minValue = d3.min([d3.min(viewModel.dataPoints, d => d.minimum),d3.min(viewModel.rangePenData, d => d.rangePen)]); viewModel.maxGrade = d3.max(viewModel.rangePenData, d => d.grade); viewModel.minGrade = d3.min(viewModel.rangePenData, d => d.grade); return viewModel; } public getSelectionIds(dataView: DataView, host: IVisualHost): ISelectionId[] { return dataView.table.identity.map((identity: DataViewScopeIdentity) => { const categoryColumn: DataViewCategoryColumn = { source: dataView.table.columns[0], values: null, identity: [identity] }; return host.createSelectionIdBuilder() .withCategory(categoryColumn, 0) .createSelectionId(); }) }; } }
Solved! Go to Solution.
It seems the issue is related to sending numbers as values to Tooltip API but numbers are not supported and numbers must be converted to string explicitly.
Please use this code snippet in the code:
viewModel.rangePenData.push({ grade: <number>view1.rows[i][1], rangePen: <number>view1.rows[i][3], employeeID: <string>view1.rows[i][0], identity: this.getSelectionIds(view2, this.host), tooltips: [{ displayName: "Employee ID:", value: `${view1.rows[i][0]}` }, { displayName: "Range Penetration:", value: `${view1.rows[i][3]}` } ] });
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
It seems the issue is related to sending numbers as values to Tooltip API but numbers are not supported and numbers must be converted to string explicitly.
Please use this code snippet in the code:
viewModel.rangePenData.push({ grade: <number>view1.rows[i][1], rangePen: <number>view1.rows[i][3], employeeID: <string>view1.rows[i][0], identity: this.getSelectionIds(view2, this.host), tooltips: [{ displayName: "Employee ID:", value: `${view1.rows[i][0]}` }, { displayName: "Range Penetration:", value: `${view1.rows[i][3]}` } ] });
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City
Check out the April 2024 Power BI update to learn about new features.
User | Count |
---|---|
17 | |
2 | |
2 | |
1 | |
1 |
User | Count |
---|---|
22 | |
2 | |
2 | |
2 | |
2 |