Unable to append an image to d3 svg element
I am working on a power bi custom visual using d3 and typescript. I have declared my constructor as below: constructor(options: VisualConstructorOptions) { this.host = options.host; // Declare the svg property this.svg = d3 .select(options.element) .append("svg") .classed(Visual.ClassName, true); // Append the image to the treeContainer const imageUrl = "http://www.google.com/intl/en_com/images/logo_plain.png"; d3.select(options.element) .append("image") .attr("xlink:href", imageUrl) .attr("x", 0) .attr("y", 0) .attr("widht", 50) .attr("height", 50); } Or tried another method: constructor(options: VisualConstructorOptions) { this.host = options.host; // Declare the svg property this.svg = d3 .select(options.element) .append("svg") .classed(Visual.ClassName, true); // Append the image to the treeContainer const imageUrl = "http://www.google.com/intl/en_com/images/logo_plain.png"; this.svg .append("svg:image") .attr("xlink:href", imageUrl) .attr("x", 0) .attr("y", 0) .attr("widht", 50) .attr("height", 50); } None of them works, here what I get: What might be the possible error. Is there a solution to it? Thanks in advance.
How to use Video Pro by Cloudscope custom visual?
Hi all, I am trying to make use of "Video Pro by Cloudscope" custom visual. As of my learnings, there are two visuals by cloudscope that lets us embed video 1.Video Pro by Cloudscope - Certified (can't access external links[http:\, https:\].Need to embed video within dataset) 2.Video by Cloudscope- Uncertified ( can access external links [http:\, https:\] I am clear on how "Video by cloudscope" custom visual works. Can anyone help me in understanding the functionality of "Video Pro by Cloudscope". what is the difference between video and video pro? Also, any guidance on how to embed video within dataset . Here I am trying to use excel file for exploring purpose. Not sure on how to embed a video inside excel. I tried to embed using insert-> object method in excel but while importing excel source to Power BI, it gets displayed as null. Any solution to this asap would be much helpfull. Thanks in advance.
Power BI Custom Visuals - Gradient Fill id not getting refreshed
Hello everyone, I have just started learning to create Power BI custom visuals and I have created my first custom visual i.e. Circle Card by referring the Microsoft tutorial. Now, I want to modify this little bit and want to show a percentage based on Actual Value and Target Value and fill the circle according to the percentage i.e. if the percentage is 85% then fill 85% circle with a different color. I have managed to do this using the below sort of code in the Update method of the visual lifecycle. var gradient = this.container.append("defs").append("linearGradient").attr("id", "gradient") .attr("x1", "0%").attr("x2", "0%").attr("y1", "100%").attr("y2", "0%"); gradient.append("stop").attr("offset", + fillPercent + "%").style("stop-color", "red"); gradient.append("stop").attr("offset", fillPercent + "%").style("stop-color", "white"); this.circle .style("fill", function () { return "url(#gradient)"; }) .style("fill-opacity", 1) .style("stroke", "black") .style("stroke-width", this.visualSettings.gauge.circleThickness) .attr("r", radius) .attr("cx", width / 2) .attr("cy", height / 2); The problem is that the gradient fill is not getting refreshed based on the percentage I need to press the reload visual button. (See below) I have attached my visual.ts file for the reference. Please let me know what's wrong here? Thank you in advance. Please click here to open visual.ts
Custom Visual isn't showing in report. Using R
Dear All, I have created a custom visual using R script in Power bi (online). Actually I was looking to create interactive visualization using R language. I have followed all the steps one by one given in these two articles. 1. https://www.blue-granite.com/tutorials/power-bi-interactive-r-visual 2. https://docs.microsoft.com/en-us/power-bi/developer/visuals/custom-visual-develop-tutorial#troubleshooting Right now there is no error but the blank screen. Some time it shows an error e.g (Script timeout error) Kindly help how to get rid of this problem. Thanks Regards, Nabeel Mukhtar
