Bar Chart Show Axis

miguelsalles — Tue, 04 Sep 2018 20:18:17 GMT

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
        }
    }
}

Re: Bar Chart Show Axis

v-chuncz-msft — Wed, 05 Sep 2018 09:20:59 GMT

@miguelsalles,

See Sample Bar Chart Repo as an example.

Re: Bar Chart Show Axis

miguelsalles — Wed, 05 Sep 2018 11:43:09 GMT

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.

topic Bar Chart Show Axis in Developer

Bar Chart Show Axis

Re: Bar Chart Show Axis

Re: Bar Chart Show Axis