Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Earn the coveted Fabric Analytics Engineer certification. 100% off your exam for a limited time only!

Reply
Anonymous
Not applicable

D3.js visual does not render the chart.

I tried to render D3.js visual code into Power BI, but it does not render any chart. 

Can anybody help this issue ?

 

This is my code. 

 

 

var margin = {top: 20, right: 20, bottom: 20, left: 20},
width = pbi.width - margin.left - margin.right, // ALTER: Changed fixed width with the 'pbi.width' variable
height = pbi.height - margin.top - margin.bottom; // ALTER: Changed fixed height with the 'pbi.height' variable

var parseDate = d3.time.format("%d%b%y").parse;

var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);

 

var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5);

var yAxisLeft = d3.svg.axis().scale(y)
.orient("left").ticks(5);


var valueline = d3.svg.line()
.x(function (d) {return x(d.forecast_rfs);})
.y(function (d) {return x(d.weight);})
.interpolate("linear");

var svg = d3.select("#chart")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");


// ALTER: Replaced the d3.tsv function with the pbi variant: pbi.dsv
pbi.dsv(function(data) {
data.forEach(function(d) {
d.forecast_rfs = parseDate(d.forecast_rfs);
d.mod_sap = +d.mod_sap;

});


x.domain(d3.extent(data, function (d) { return d.forecast_rfs; }));
y.domain([0, d3.max(data, function(d) { return Math.max(d.weight); })]);

svg.append("path")
.attr("class", "line")
.stlye("stroke", "red")
.attr("d", valueline(data));

svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(" + height + ")")
.call(xAxis);

svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + width + " ,0)")
.style("fill", "steelblue")
.call(yAxisLeft);

});

3 REPLIES 3
jppp
MVP

Hi @Anonymous ,

 

Did you add colums to the data fields? And do they have the same name as you use in your code (forecast_rfs, mod_sap)?

You can take a look at the 'PBI object' (icon with two cubes in the edit mode) on how the data is pushed to the visual.

 

Alternative you can use 'console.log' to write debug info to the console of the developer tools to see what is happening.

 

-JP

Anonymous
Not applicable

Thank you for your reply. Yes, all the columns have the same name as in my code. But still it does not render. 

 

Hi @Anonymous ,

 

Is it possible to share the report with me? You can send it to mail@datascenarios.nl.

 

Thanks, Jan Pieter

Helpful resources

Announcements
April AMA free

Microsoft Fabric AMA Livestream

Join us Tuesday, April 09, 9:00 – 10:00 AM PST for a live, expert-led Q&A session on all things Microsoft Fabric!

March Fabric Community Update

Fabric Community Update - March 2024

Find out what's new and trending in the Fabric Community.