D3.js visual does not render the chart.

[Anonymous]

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);

});

[jppp]

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]

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

[jppp]

Hi @Anonymous ,

Is it possible to share the report with me? You can send it to [email protected].

Thanks, Jan Pieter