Adding Average text to Trendline

Hi Shaun,
I would like to add “Average - value” for the linear trendline. But unable to position the text with a dynamic y-value. Can you please help?

return function () {
var f = function() {};

f.version=“1”;

f.afterDraw= function () {

// Arcadia API to get query results
var d = arcapi.dataResult();

// Obtain query results
var rows = d.rows();

// If there’s no results , return
if (rows.length === 0) {
return;
}

//console.log(rows);

var avgValue = 0;

for(var i= 0; i < rows.length; i++){
avgValue += rows[i][2]/rows.length;
}

var di = d3.select("#" + arcapi.chartId())
.append(“div”)
.style(“position”, “absolute”)
.style(“top”, ‘50%’)
.text(“Average”);

return;

};

return f;

}();

@Deepika can you explain a bit more what you are trying to do? not sure what you mean by “dynamic y-value”?

In your cord you right now have static top margin (50%). You can change that to modify the vertical location:

.append(“div”)
.style(“position”, “absolute”)
.style(“top”, ‘50%’) <----- change that to be 30 or 20%
....

Hi ,
Sorry , for not explaining my requirement clearly.

For the above image , the Average text is placed on the trendline.
Below is the code which has been used to achieve this.

return function () {
var f = function() {};

f.version=“1”;

f.afterDraw= function () {

// Arcadia API to get query results
var d = arcapi.dataResult();

// Obtain query results
var rows = d.rows();

// If there’s no results , return
if (rows.length === 0) {
return;
}

var avgValue = 0;

for(var i= 0; i < rows.length; i++){
avgValue += rows[i][2]/rows.length;
}

var di = d3.select("#" + arcapi.chartId())
.append(“div”)
.style(“position”, “absolute”)
.style(“top”, ‘50%’)
.text(“Average”);

return;

};

return f;

}();

Based on the data , the linear trend-line can vary, and accordingly the "top " value has to updated.

Is there a way to overcome.

Method 2

Based on the position(x1, y1 ) of the trendline , tried to achieve the same.

return function () {
var f = function() {};

f.version=“1”;

f.afterDraw= function () {

// Arcadia API to get query results
var d = arcapi.dataResult();

// Obtain query results
var rows = d.rows();

// If there’s no results , return
if (rows.length === 0) {
return;
}

var avgValue = 0;

for(var i= 0; i < rows.length; i++){
avgValue += rows[i][2]/rows.length;
}

var ti = d3.select("#" + arcapi.chartId())
.append(“text”)
.attr(“x”,("#" + arcapi.chartId() +".viz-trendline").last().attr('x1')) .attr("y",("#" + arcapi.chartId() +".viz-trendline").last().attr(‘y1’))
.attr(“class”,“avgT”)
.text(“Average”);

return;

};

return f;

}();

Using the above code though the “Average” has, “x” (x1 value of trend-line) and
“y”(y1 value of trend-line) it appears at the end.

Please suggest how can this be achieved.

Thanks.

@Deepika One thought, why don’t you try to use the chart height and calculate a percentage relative to that?

var height_ratio = $(’#’ + arcapi.chartId()).height() / ("#" + arcapi.chartId() +".viz-trendline").last().attr(‘y1’)

1 Like

@shaun , Thanks for the suggestion.
I did try calculating the relative height. Instead of percentage am taking the difference value.

var height_ratio = $(’#’ + arcapi.chartId()).height() - ("#" + arcapi.chartId() +".viz-trendline").last().attr(‘y1’);

It works!!.

Thanks!

1 Like