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.
Hi,
I am new, i made a simple bar chart that the user can put a category and a measure. Now I would like to show the Axis information, can anyone help?
This is where I got by myself:
capabilities.json { "dataRoles": [ { "displayName": "Category Data", "name": "category", "kind": "Grouping" }, { "displayName": "Measure Data", "name": "measure", "kind": "Measure" } ], "objects": { "newbar": { "displayName": "New Bar", "properties": { "barColor": { "displayName": "Color", "description": "The fill color of the new bar.", "type": { "fill": { "solid": { "color": true } } } } } } }, "dataViewMappings": [ { "conditions": [ { "category": { "max": 1 }, "measure": { "max": 1 } } ], "categorical": { "categories": { "for": { "in": "category" }, "dataReductionAlgorithm": { "top": {} } }, "values": { "select": [ { "bind": { "to": "measure" } } ] } } } ] }
settings.ts module powerbi.extensibility.visual { "use strict"; import DataViewObjectsParser = powerbi.extensibility.utils.dataview.DataViewObjectsParser; export class barSettings { public barColor: string = "black"; } export class VisualSettings extends DataViewObjectsParser { public newbar: barSettings = new barSettings(); }
visual.ts module powerbi.extensibility.visual { interface BarChartViewModel { dataPoints: BarChartDataPoint[]; dataMax: number; }; interface BarChartDataPoint { value: number; category: string; }; function visualTransform(options: VisualUpdateOptions, host: IVisualHost): BarChartViewModel { let dataViews = options.dataViews; let viewModel: BarChartViewModel = { dataPoints: [], dataMax: 0 }; 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; for (let i = 0, len = Math.max(category.values.length, dataValue.values.length); i < len; i++) { barChartDataPoints.push({ category: <string>category.values[i], value: <number>dataValue.values[i] }); } dataMax = <number>dataValue.maxLocal; return { dataPoints: barChartDataPoints, dataMax: dataMax }; } export class Visual implements IVisual { private svg: d3.Selection<SVGElement>; private host: IVisualHost; private barChartContainer: d3.Selection<SVGElement>; private barContainer: d3.Selection<SVGElement>; private bars: d3.Selection<SVGElement>; private visualSettings: VisualSettings; static Config = { xScalePadding: 0.1, }; constructor(options: VisualConstructorOptions) { console.log('Visual constructor', options); this.host = options.host; let svg = this.svg = d3.select(options.element) .append('svg') .classed('barChart', true); this.barContainer = svg.append('g') .classed('barContainer', true); } public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstanceEnumeration { const settings: VisualSettings = this.visualSettings || VisualSettings.getDefault() as VisualSettings; return VisualSettings.enumerateObjectInstances(settings, options); } public update(options: VisualUpdateOptions) { let viewModel: BarChartViewModel = visualTransform(options, this.host); let dataView: DataView = options.dataViews[0] this.visualSettings = VisualSettings.parse<VisualSettings>(dataView); let width = options.viewport.width; let height = options.viewport.height; this.svg.attr({ width: width, height: height }); let yScale = d3.scale.linear() .domain([0, viewModel.dataMax]) .range([height, 0]); let xScale = d3.scale.ordinal() .domain(viewModel.dataPoints.map(d => d.category)) .rangeRoundBands([0, width], Visual.Config.xScalePadding); let bars = this.barContainer.selectAll('.bar').data(viewModel.dataPoints); bars.enter() .append('rect') .classed('bar', true); bars.attr({ width: xScale.rangeBand(), height: d => height - yScale(d.value), y: d => yScale(d.value), x: d => xScale(d.category), fill: d => this.visualSettings.newbar.barColor //d.color }); bars.exit() .remove(); } public destroy(): void { //TODO: Perform any cleanup tasks here //Perform any cleanup tasks here } } }
See Sample Bar Chart Repo as an example.
Hi,
It seems that this tutorial is deprecated and it is not needed to use the object enumeration anymore, I am trying to adequate the tutorial without it.
Will post solution here whenever I get it right.
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 |