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.
Hello, guys. Help me, please. I have this default code in file visual.ts:
module powerbi.extensibility.visual { export class Visual implements IVisual { private target: HTMLElement; private updateCount: number; constructor(options: VisualConstructorOptions) { console.log('Visual constructor', options); this.target = options.element; this.updateCount = 0; } public update(options: VisualUpdateOptions) { console.log('Visual update', options); this.target.innerHTML = `<p>Update count: <em>${(this.updateCount++)}</em></p><br>`; } } }
And this default code in file capabilities.json:
{ "dataRoles": [ { "displayName": "Category Data", "name": "category", "kind": "Grouping" }, { "displayName": "Measure Data", "name": "measure", "kind": "Measure" } ], "dataViewMappings": [ { "categorical": { "categories": { "for": { "in": "category" }, "dataReductionAlgorithm": { "top": {} } }, "values": { "select": [ { "bind": { "to": "measure" } } ] } } } ] }
What I have to do to get any data in visualization? I need just get the data.
Based on my research, you will need to fill the update method by defining your own visualTransform function that will allow you to convert DataView into a view model your visual will use.
You mean something like this?
function visualTransform(options: VisualUpdateOptions, host: IVisualHost): BarChartViewModel { let dataViews = options.dataViews; let defaultSettings: BarChartSettings = { enableAxis: { show: false, } }; let viewModel: BarChartViewModel = { dataPoints: [], dataMax: 0, settings: <BarChartSettings>{} }; if (!dataViews || !dataViews[0] || !dataViews[0].categorical || !dataViews[0].categorical.categories || !dataViews[0].categorical.categories[0].source || !dataViews[0].categorical.values) return viewModel; let categorical = dataViews[0].categorical; let category = categorical.categories[0]; let dataValue = categorical.values[0]; let barChartDataPoints: BarChartDataPoint[] = []; let dataMax: number; let colorPalette: IColorPalette = host.colorPalette; let objects = dataViews[0].metadata.objects; let barChartSettings: BarChartSettings = { enableAxis: { show: getValue<boolean>(objects, 'enableAxis', 'show', defaultSettings.enableAxis.show), } } for (let i = 0, len = Math.max(category.values.length, dataValue.values.length); i < len; i++) { let defaultColor: Fill = { solid: { color: colorPalette.getColor(category.values[i] + '').value } } barChartDataPoints.push({ category: category.values[i] + '', value: dataValue.values[i], color: getCategoricalObjectValue<Fill>(category, i, 'colorSelector', 'fill', defaultColor).solid.color, selectionId: host.createSelectionIdBuilder() .withCategory(category, i) .createSelectionId() }); } dataMax = <number>dataValue.maxLocal; return { dataPoints: barChartDataPoints, dataMax: dataMax, settings: barChartSettings, }; }
Well that's it! You can see the function is invoked.
public update(options: VisualUpdateOptions) { let viewModel: BarChartViewModel = visualTransform(options, this.host);
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 |
---|---|
12 | |
2 | |
2 | |
1 | |
1 |
User | Count |
---|---|
20 | |
3 | |
2 | |
2 | |
2 |