Custom Visual Line graph

satishr — Wed, 21 Feb 2018 13:43:28 GMT

I'm trying to create a custom visual which has a line graph. I'm trying to create the below D3 line graph but getting type errors.

https://bl.ocks.org/emmasaunders/f55caf3a742aac10a5d44f58374bf343

Here is my code:

var data: LineData[] = this.dataForLineGraph(options); //A function which gets data for line chart
            var max = 0;
            var minDate = new Date();
            var maxDate = new Date();
            max = d3.max(data, function(d) { return d.m1; });
	        minDate = d3.min(data, function(d) {return d.date; });
		    maxDate = d3.max(data, function(d) { return d.date; });	

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

            d3.selectAll('svg').remove();

            var svg = d3.select('.linediv').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 + ")");

            var y = d3.scale.linear()
                .domain([0,max])
                .range([height,0]);
    
            var x = d3.time.scale()
                .domain([minDate,maxDate])
                .range([0,width]);
    
            var yAxis = d3.svg.axis()
                .orient("left")
                .scale(y);
                    
            var xAxis = d3.svg.axis()
                .orient("bottom")
                .scale(x);
    
            svg.append("g")
			    .attr("class","axis x")
			    .attr("transform","translate(0,"+height+")")
			    .call(xAxis);
			
		    svg.append("g")
			    .attr("class","axis y")
                .call(yAxis);
                
            var line = d3.svg.line()
                .x(function(d){ return x(d.date); })//error
                .y(function(d){ return y(d.m1); })//error
                .interpolate("cardinal"); 

            svg.append("path")
                .attr("class","line")
                .attr("d",function(d){ return line(data); }) //error

The error says:

Type LineData[] is not assignable to type [number.number].

Property 0 is missing in the type LineData[]

LineData is an interface and it looks like below.

export interface LineData{
        item: string;
        date: Date;
        m1: number;
        m2: number;
        m3: number;
        m4: number;
        m5: number;
        m6: number;
      }

Re: Custom Visual Line graph

v-viig — Wed, 21 Feb 2018 14:59:01 GMT

To fix the issue you faced you should cast d3.svg.line to LineData by using this code:

var line = d3.svg.line<LineData>()

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Re: Custom Visual Line graph

satishr — Wed, 21 Feb 2018 15:53:42 GMT

It works perfectly now. Thanks.

topic Custom Visual Line graph in Developer

Custom Visual Line graph

Re: Custom Visual Line graph

Re: Custom Visual Line graph