How to set labels on custom chart?

OL Connect Professional General
1

Anyone able to solve this issue? I can draw the circle based on the functions we are using but I can’t seem to figure out how to dynamically set the labels in the center of the arc.

///Functions:

function polarToCartesian(centerX, centerY, radius, angleInDegrees){
var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;
return {x: centerX + (radius * Math.cos(angleInRadians)),
y: centerY + (radius * Math.sin(angleInRadians)) };}

function describeArc(x, y, radius, startAngle, endAngle){
var endAngleOriginal = endAngle;
if(endAngleOriginal - startAngle === 360){endAngle = 359; }

var start = polarToCartesian(x, y, radius, endAngle);
var end = polarToCartesian(x, y, radius, startAngle);

var arcSweep = endAngle - startAngle <= 180 ? “0” : “1”;

if(endAngleOriginal - startAngle === 360){
var d = [
“M”, start.x, start.y,
“A”, radius, radius, 0, arcSweep, 0, end.x, end.y, “z”
].join(" “);
}
else{
var d = [
“M”, start.x, start.y,
“A”, radius, radius, 0, arcSweep, 0, end.x, end.y
].join(” ");
}

return d ;

}

function between(x,a, b) {
return (x >= a && x <=b);
}

function setLabel(label, top, left){

query('#'+ label).attr('anchor','');
query('#'+ label).css('position','absolute');
query('#'+ label).css('left',Number(left) + "px");
query('#'+ label).css('top',Number(top) +"px");

}

var Total =Number(r.SXPRIN01) + Number(r.SXINTR01) + Number(r.SXESCP) + Number(r.SXOTHP) ;
var Prin =Number((Number(r.SXPRIN01)/Total) * 360);
var Int =Number((Number(r.SXINTR01)/Total) * 360);
var Esc =Number((Number(r.SXESCP)/Total) * 360);
var Oth=Number((Number(r.SXOTHP)/Total) * 360);

/* Examples on setting the values…
Total =360;
Prin =90;
Int =90;
Esc =90;
Oth =90;

*/

query(“#donutChart #arc1”).attr(“d”, describeArc(180, 120, 80, 0, Prin));
query(“#donutChart #arc2”).attr(“d”, describeArc(180, 120, 80, Prin, (Prin + Int)));
query(“#donutChart #arc3”).attr(“d”, describeArc(180, 120, 80, (Prin + Int), (Prin + Int + Esc)));
query(“#donutChart #arc4”).attr(“d”, describeArc(180, 120, 80, (Prin + Int + Esc), Prin + Int + Esc + Oth));

How to go about setting the labels dynamically ?

Example of hard coded label setting

setLabel(‘label1’,50,275);

2

Hello mhaliti,

I don’t fully understand your question but have you tried the new chart functionality in Connect 2018.1? It utilizes the amcharts library which should give you wide variety of grah options. One could use the Business Graphics wizard to create a chart via the UI. When more options are needed one could tune the appearence and data via scripting.

Could you share an image of your current result?

Erik

3

Using the amChart takes a very long time for our files to run. About 2 hours. The data file in the data mapper is an xml and has a lot of fields. Our files are normally 200-500MB. The amCharts would error out on the big files. We got in a fix that would release the resources allocated by AmCharts Library.

An issue still stands with the speed. I am attempting to make my own charts with the functions above. I can draw the circle just fine, but I can’t get the labels placed properly and I am not sure how to best do that.

Here is the image of my current results. I have set each field to be 90 degrees. The issue is that these will change and I need the labels to move with the arcs. Is that possible?

I can load the Planet Press template but I can’t seem to figure that out here. Is that possible to send it to you?

4

The issue with the amchart resources not being released should now be part of the official release product (guess you are on a CR release). Unfortunately I lack the skills to help you on this one.

5

Thanks for your help. I can do it the ugly way by taking the midpoint of the arch and setting the position of the label but there would be a lot of if statements.

I thought I somehow would be able to create an outer arc and put the text in there…