D3.js visual does not render the chart.

Anonymous — Wed, 06 Nov 2019 01:19:24 GMT

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

});

Re: D3.js visual does not render the chart.

jppp — Wed, 06 Nov 2019 11:01:25 GMT

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

Re: D3.js visual does not render the chart.

Anonymous — Thu, 07 Nov 2019 02:25:28 GMT

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

Re: D3.js visual does not render the chart.

jppp — Fri, 08 Nov 2019 08:02:24 GMT

Hi @Anonymous ,

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

Thanks, Jan Pieter

topic Re: D3.js visual does not render the chart. in Developer

D3.js visual does not render the chart.

Re: D3.js visual does not render the chart.

Re: D3.js visual does not render the chart.

Re: D3.js visual does not render the chart.