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
aar0n
Advocate II
Advocate II

D3 Multi-line graph with automatic legend and toggling show / hide lines.

Hi Everyone.. i am new to power bi and D3, and i was hoping to make a graph similar to the following link, within power bi.

The only difference i was hoping for, was to have it as a dual y-axis chart... i have been trying to make this work for the past few days and just can't render the graphs with my data..

http://www.d3noob.org/2014/07/d3js-multi-line-graph-with-automatic.html

 

i was hoping someone could post an example, using:

Date for the x-axis, 

Value1 for  the left y-axis

Value2 for the left y-axis

Value3 for the right y-axis

value4 for the right y-axis

 

 

thanks

2 REPLIES 2
v-xjiin-msft
Solution Sage
Solution Sage

Hi @aar0n,

 

First there's no such toggle feature in line chart in Power BI. If you want to hide some lines, we can use Slicer to achieve this.

 

Reference: https://community.powerbi.com/t5/Desktop/Line-chart-slicer/td-p/123353

 

And there are many difference between Power BI line chart and this D3 Multi-line graph. Since you have been trying to do the work, please share us some specific requirements with some screenshots and some sample data and the expected result. Otherwise we don't know where to start.

 

Thanks,
Xi Jin.

Here is an example based on my data table..

DateValue1Value2Value3Value4
1/1/201784962.7723.9
1/2/2017100983.34.6
1/3/201793893.0694.3
1/4/201794903.1024.3
1/5/201789842.9374.1
1/6/201798933.2344.5
1/7/201782822.7063.8
1/8/201798983.2344.5
1/9/201792973.0364.2
1/10/201793863.0694.3
1/11/201791853.0034.2
1/12/2017100953.34.6

 

here is the expected output graphimage.PNG

 

 

 

The sample code i had tried to use was very similar to what is in the link above, with minor exceptions. it is pasted below. 

 

*note that in the below code,

i only tried to use "Value1, and Value2" with date - because i was struggling to make it work, and ultimately couldnt.

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

// Parse the date / time
var parseDate = d3.time.format("%b %Y").parse; 

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

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

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

// Define the line
var valueline = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.value1); });
    
// 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 + ")");

// Get the data
pbi.dsv(type, function(data) {
    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; }));
    y.domain([0, d3.max(data, function(d) { return d.value1; })]); 

    // Nest the entries by symbol
    var dataNest = d3.nest()
        .key(function(d) {return d.symbol;})
        .entries(data);

    // Loop through each symbol / key
    dataNest.forEach(function(d) {

        svg.append("path")
            .attr("class", "line")
            .attr("d", valueline(d.values)); 

    });

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

    // Add the Y Axis
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);

});

 

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.