Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.
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
Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City
Check out the April 2024 Power BI update to learn about new features.
User | Count |
---|---|
12 | |
2 | |
2 | |
1 | |
1 |