cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Anonymous
Not applicable

Custom Visual not loading! Please Help!

Hey!

I have been trying to build a custom visual that looks something like this with help of the sampleBarChart visual on Microsoft Github.SnipImage.JPG

I have loaded my data using the following code.

"dataRoles": [{
            "displayName": "Category Data",
            "name": "category",
            "kind": "Grouping"
        },
		
        {
            "displayName": "x1",
            "name": "x1",
            "kind": "Measure"
        },
		{
            "displayName": "x2",
            "name": "x2",
            "kind": "Measure"
        },
		{
            "displayName": "y1",
            "name": "y1",
            "kind": "Measure"
        },
		{
            "displayName": "y2",
            "name": "y2",
            "kind": "Measure"
        },
        {
            "displayName": "Tooltips",
            "name": "Tooltips",
            "kind": "Measure"
        }
    ],



"dataViewMappings": [{
        "conditions": [{
            "category": {
                "max": 1
            },
            "x1": {
                "max": 1
            },
			"x2": {
                "max": 1
            },
			"y1": {
                "max": 1
            },
			"y2": {
                "max": 1
            }
        }],
	
		"categorical": {
            "categories": {
                "for": {
                    "in": "category"
                }
            },
            "values": {
                "select": [{
                    "bind": {
                        "to": "x1"
                    }
                },
					{
                    "bind": {
                        "to": "x2"
                    }
					},
					{
                    "bind": {
                        "to": "y1"
                    }
					},
					{
                    "bind": {
                        "to": "y2"
                    }}
                ]}
	
            }
        }
    ],

I can view the data on the debug terminal. I am trying to load the data into the code using the following code.

 const dataView = options.dataViews[0];
        let categorical = dataViews[0].categorical;
        let category = categorical.categories[0];
        let datax1 = this.valueForSource(dataView,"x1");
        let datax2 = this.valueForSource(dataView,"x2");
        let datay1 = this.valueForSource(dataView,"y1");
        let datay2 = this.valueForSource(dataView,"y2");
...
barChartDataPoints.push({
                color,
                strokeColor,
                strokeWidth,
                selectionId,
                x1: datax1.values[i],
                x2: datax2.values[i],
                y1: datay1.values[i],
                y2: datay2.values[i],
                category: `${category.values[i]}`

            });

And I edited the rectangle code to look like this.

this.barSelection
                .attr({
                    width: d=> xScale(<number>d.x2-<number>d.x1),
                    height: d => height - yScale(<number>d.y2-<number>d.y1),
                    y: d => <number>d.y2,
                    x: d => <number>d.x1,
                })
                .style({
                    'fill-opacity': opacity,
                    'stroke-opacity': opacity,
                    fill: (dataPoint: BarChartDataPoint) => dataPoint.color,
                    stroke: (dataPoint: BarChartDataPoint) => dataPoint.strokeColor,
                    "stroke-width": (dataPoint: BarChartDataPoint) => `${dataPoint.strokeWidth}px`,
                });

However, the visual is not processing. Please help! @v-viig @Riaon 

4 REPLIES 4
Highlighted
Regular Visitor

Re: Custom Visual not loading! Please Help!

As a rule, and this goes for working with any complex framework, take it step by step.  Console.log along the way.  Get some output, make it better, repeat.  

 

As an aside, your datapoints structure looks odd. If you have a fixed collection of heterogenous, named values, model as a class and populate the members.

 

Highlighted
Microsoft
Microsoft

Re: Custom Visual not loading! Please Help!

Hi,

 

Could you please share your code repository of send .pbix file to pbicvsupport@microsoft.com for analysis?

 

Kind Regards,

 

Evgenii Elkin,
Software Engineer
Microsoft Power BI Custom Visuals
pbicvsupport@microsoft.com

 

Highlighted
Anonymous
Not applicable

Re: Custom Visual not loading! Please Help!

Hey.

PFA the files at this link. The capabilities.json and the BarChart.ts are the two files are the ones that I edited. The rest is from the Microsoft Repository for Sample Bar Charts

https://github.com/shadowfax1312/TrialVisualBIChart

 

@v-evelk 

Highlighted
Microsoft
Microsoft

Re: Custom Visual not loading! Please Help!

Hi,

 

I investigated your code and found that inside module function visualTransform you try to use "this" object that is not exists in such functions because they are not related to visual object if you call them directly.

 

For instance, the following code inside the function throw an error because this is not exists there

this.valueForSource(dataView,"x1")

As a solution you need to avoid using of 'this' inside visualTransform function or you can make functions that are called inside as static and call them like demonstrated below.

BarChart.valueForSource(dataView,"x1")

 

Kind Regards,

 

Evgenii Elkin,
Software Engineer
Microsoft Power BI Custom Visuals
pbicvsupport@microsoft.com

Helpful resources

Announcements
Meet the 2020 Season 2 Power BI Super Users!

Meet the 2020 Season 2 Power BI Super Users!

Find out who's part of the program this season, and welcome the new Super Users.

August 2020 Community Challenge: Can You Solve These?

August 2020 Community Challenge: Can You Solve These?

We're excited to announce our first cross-community 'Can You Solve These?' challenge!

July 2020 Community Highlights

July 2020 Community Highlights

Learn about the exciting things that happened in July.

Featured Data Story of The Month

Featured Data Story of The Month

All Data Stories Gallery contributions are reviewed for each month. We select a contribution and feature the community member the following month.

Power BI Dev Camp - Developing with .NET Core

Power BI Dev Camp - Developing with .NET Core

Learn how to develop custom web applications for Power BI using .NET Core 3.1 and .NET 5.