Forum Discussion

aar0n's avatar
aar0n
Advocate II
8 years ago

d3 Line graph dual y-axis

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-axi...
Need Help
Tips and Tricks
Tutorial Requests
aar0n's avatar
aar0n
Advocate II
8 years ago

can you please elaborate "try-catch"?

 

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

v-viig's avatar
v-viig
Community Champion
8 years ago

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

[email protected]

  • aar0n's avatar
    aar0n
    Advocate II
    8 years ago

    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.. 

    • v-viig's avatar
      v-viig
      Community Champion
      8 years ago

      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

      [email protected]

      • sriksrin's avatar
        sriksrin
        Frequent Visitor
        8 years ago

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