topic Re: d3 Line graph dual y-axis in Developer

d3 Line graph dual y-axis

aar0n — Mon, 16 Apr 2018 16:33:33 GMT

The following code compiles, but doesn't render a graph. Not sure why exactly it isnt working in power bi....

i am using an input of "Date", "Value1", "Value2".
i am trying to plot date on x-axis, value1 on left y-axis, and value2 on right y-axis.

// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 40, bottom: 30, left: 50},
    width = pbi.width - margin.left - margin.right,
    height = pbi.height - margin.top - margin.bottom;

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

// Set the ranges
var x = d3.time.scale().range([0, width]);
var y0 = d3.scale.linear().range([height, 0]);
var y1 = d3.scale.linear().range([height, 0]);

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

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

var yAxisRight = d3.svg.axis().scale(y1)
    .orient("right").ticks(5); 

//////////////////////////////////////////////////////

var valueline = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y0(d.Value1); });
    
var valueline2 = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y1(d.Value2); });

///////////////////////////////////////////////////////////////////

// Adds the svg canvas
var svg = d3.select("#chart")
.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(type, function(values) {
    data.forEach(function(d) {
        d.date = parseDate(d.date);
        d.Value1 = +d.Value1;
        d.Value2 = +d.Value2;
    });

  // Scale the range of the data
    x.domain(d3.extent(data, function(d) { return d.date; }));
    y0.domain([0, d3.max(data, function(d) {
		return Math.max(d.Value1); })]); 
    y1.domain([0, d3.max(data, function(d) { 
		return Math.max(d.Value2); })]);

    svg.append("path")        // Add the valueline path.
        .attr("d", valueline(data));

    svg.append("path")        // Add the valueline2 path.
        .style("stroke", "red")
        .attr("d", valueline2(data));

    svg.append("g")            // Add the X Axis
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    svg.append("g")
        .attr("class", "y axis")
        .style("fill", "steelblue")
        .call(yAxisLeft);	

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

});

it is similar to:

http://bl.ocks.org/d3noob/e34791a32a54e015f57d

Re: d3 Line graph dual y-axis

v-viig — Thu, 19 Apr 2018 07:26:57 GMT

We'd recommend to add a try-catch to catch an exception.

Otherwise, please share source code.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Re: d3 Line graph dual y-axis

aar0n — Fri, 20 Apr 2018 15:38:29 GMT

can you please elaborate "try-catch"?

also, i thought i did above.. is there anything else that might be needed?

Re: d3 Line graph dual y-axis

v-viig — Mon, 23 Apr 2018 10:10:47 GMT

We'd recommend to take a look at try-catch syntax here.

To debug this issue we should have a full source code along with pbiviz.json, tsconfig.json, etc.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Re: d3 Line graph dual y-axis

aar0n — Mon, 23 Apr 2018 17:33:32 GMT

since the data is confidential, i am unable to post the powerbi file, etc. if there is any other example of a dual y-axis line graph, using d3, i would be happy to use it instead of the code above..

Re: d3 Line graph dual y-axis

v-viig — Tue, 24 Apr 2018 08:27:19 GMT

What verison of d3 do you use? Can you share pbiviz.json, package.json and tsconfig.json?

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Re: d3 Line graph dual y-axis

sriksrin — Tue, 10 Jul 2018 10:51:32 GMT

Hi,

I am trying to create the dual y axis line chart from the d3 code : http://bl.ocks.org/d3noob/e34791a32a54e015f57d

Changed the D3 code as per the D3JSVisuals instruction. I notice that the path is not getting constructed. The lines always start from one point and not join from the previous point.

I have put in the modified code as per custom visual instruction and the screenshot. Require help in resolving the same.

Code:

var margin = {top: 30, right: 40, bottom: 30, left: 50},
width = pbi.width - margin.left - margin.right,
height = pbi.height - margin.top - margin.bottom;

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

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

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

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

var yAxisRight = d3.svg.axis().scale(y1)
.orient("right").ticks(5);

/*var valueline = d3.svg.line()
.x(function(d) { return d.date; })
.y(function(d) { return d.close; })
.interpolate("linear");
*/
var valueline = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y0(d.close); })
.interpolate("cardinal");

var valueline2 = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y1(d.open); });

var svgCont = 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 + ")");

// Get the data
pbi.dsv(function(data) {

data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
d.open = +d.open;
});

// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
y0.domain([0, d3.max(data, function(d) {
return Math.max(d.close); })]); 
y1.domain([0, d3.max(data, function(d) { 
return Math.max(d.open); })]);

svgCont.append("path") // Add the valueline path.
.attr("class","line")
.attr("d", valueline(data));

/*svg.append("path") // Add the valueline2 path.
.style("stroke", "red")
.attr("d", valueline2(data));*/

svgCont.append("g") // Add the X Axis
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);

svgCont.append("g")
.attr("class", "y axis")
.style("fill", "steelblue")
.call(yAxisLeft);

svgCont.append("g") 
.attr("class", "y axis") 
.attr("transform", "translate(" + width + " ,0)") 
.style("fill", "red") 
.call(yAxisRight);

});

Re: d3 Line graph dual y-axis

sriksrin — Tue, 10 Jul 2018 10:59:35 GMT

Hi, I am also facing the same problem. I am using the custom visual D3JSVisuals and embedding the D3 code into it.

I get to see that the lines always start from the same point and not from the previous point. Can't figure where mistake is going on.

Request your help in the same.

D3 Version : V3

Custom Visual: D3JSVisual

D3 Code: http://bl.ocks.org/d3noob/e34791a32a54e015f57d

PBI Code :

var margin = {top: 30, right: 40, bottom: 30, left: 50},
    width = pbi.width - margin.left - margin.right,
    height = pbi.height - margin.top - margin.bottom;

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

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

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

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

var yAxisRight = d3.svg.axis().scale(y1)
    .orient("right").ticks(5); 

/*var valueline = d3.svg.line()
    .x(function(d) { return d.date; })
    .y(function(d) { return d.close; })
	.interpolate("linear");
*/
var valueline = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y0(d.close); })
	.interpolate("cardinal");
    
var valueline2 = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y1(d.open); });
  
var svgCont = 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 + ")");

// Get the data
pbi.dsv(function(data) {
   
 data.forEach(function(d) {
        d.date = parseDate(d.date);
        d.close = +d.close;
        d.open = +d.open;
    });

    // Scale the range of the data
    x.domain(d3.extent(data, function(d) { return d.date; }));
    y0.domain([0, d3.max(data, function(d) {
		return Math.max(d.close); })]); 
    y1.domain([0, d3.max(data, function(d) { 
		return Math.max(d.open); })]);

    svgCont.append("path")        // Add the valueline path.
        .attr("class","line")
        .attr("d", valueline(data));

    /*svg.append("path")        // Add the valueline2 path.
        .style("stroke", "red")
        .attr("d", valueline2(data));*/

    svgCont.append("g")            // Add the X Axis
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    svgCont.append("g")
        .attr("class", "y axis")
        .style("fill", "steelblue")
        .call(yAxisLeft);	

    svgCont.append("g")				
        .attr("class", "y axis")	
        .attr("transform", "translate(" + width + " ,0)")	
        .style("fill", "red")		
        .call(yAxisRight);
  
});

Re: d3 Line graph dual y-axis

v-viig — Wed, 11 Jul 2018 07:26:52 GMT

@jppp Can you help with this issue? It seems devs use D3.JS visual.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Re: d3 Line graph dual y-axis

jppp — Wed, 11 Jul 2018 11:07:23 GMT

I managed to get the code working and basically the trick is in how the data is presented to and used by D3js.
In this case the date column: I have kept it as a string, e.g. '26-Mar-18' and add a derived column, convert as a date type and use that for the 'sort-by' column.

After that the line d3.time.format("%d-%b-%y").parse; will correctly parse the column to dates that can be used by the d3js axis.

If you need some more explanation; I got a PBIX file that I can share if needed.

-JP

Re: d3 Line graph dual y-axis

aar0n — Wed, 11 Jul 2018 14:19:45 GMT

i would really appreciate if you could share the file!

Thanks for the help!!

Re: d3 Line graph dual y-axis

jppp — Wed, 11 Jul 2018 16:09:36 GMT

You should be able to download it here.

If you have questions, feel free.

Re: d3 Line graph dual y-axis

sriksrin — Fri, 10 Aug 2018 07:50:11 GMT

Hi JP,

While i am trying what you have said, it would really be very helpful to share the pbix file.

Thanks

Srikanth

Re: d3 Line graph dual y-axis

v-viig — Fri, 10 Aug 2018 12:16:22 GMT

PBIX has been attached by Jan Pieter. See link above.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Re: d3 Line graph dual y-axis

tcd1nc — Mon, 13 Aug 2018 09:26:32 GMT

https://github.com/tcd1nc/DualYAxesChart for alternative

Re: d3 Line graph dual y-axis

sriksrin — Thu, 16 Aug 2018 07:18:37 GMT

Thanks jppp for sharing the pbix file. I am still puzzled as the new duplicate column didnot change any data after been applied to sort. Can u share some more details on the fix.

Re: d3 Line graph dual y-axis

Anonymous — Fri, 01 Nov 2019 06:04:56 GMT

Can you reshare PBIX file ? cause the link you posted is no longer available.