Jump to content

Change Pie Legend


dmp

Recommended Posts

Hi there,

I have a pie chart and I need to make the legend display the % but rounded to tenths in stead of hundredths. (78.5% instead of 78.48%)

Is that possible?

 

Here's the code I'm using for the Pie Chart:

 

return  '<row><cell>Salary'+'<cell>'+Field("Salary")+
       '<row><cell>Commission'+'<cell>'+Field("Commissions and or Bonus")+
       '<row><cell>Incentives'+'<cell>'+Field("September Incentive")+
       '<row><cell>STI'+'<cell>'+Field("Short Term Incentive STI")+
       '<row><cell>401(k) Match'+'<cell>'+Field("401(k) Match")+
       '<row><cell>401(k) Proft Share'+'<cell>'+Field("Profit Share")+
       '<row><cell>Company Paid Healthcare'+'<cell>'+Field("Company Paid Healthcare")+
       '<row><cell>Life And Disability'+'<cell>'+Field("Life and Disability");

 

Thanks for the help if anyone has a way to do it :)

Link to comment
Share on other sites

Hi there,

I have a pie chart and I need to make the legend display the % but rounded to tenths in stead of hundredths. (78.5% instead of 78.48%)

Is that possible?

 

Yes.

 

Math.round(X);           // round X to an integer
Math.round(10*X)/10;     // round X to tenths
Math.round(100*X)/100;   // round X to hundredths
Math.round(1000*X)/1000; // round X to thousandths

 

So you might try changing your code to something like this:

 

return  '<row><cell>Salary'+'<cell>'+Math.round(10*Field("Salary"))/10+
       '<row><cell>Commission'+'<cell>'+Math.round(10*Field("Commissions and or Bonus"))/10+
       '<row><cell>Incentives'+'<cell>'+Math.round(10*FieldField("September Incentive"))/10+
       '<row><cell>STI'+'<cell>'+Math.round(10*FieldField("Short Term Incentive STI"))/10+
       '<row><cell>401(k) Match'+'<cell>'+Math.round(10*FieldField("401(k) Match"))/10+
       '<row><cell>401(k) Proft Share'+'<cell>'+Math.round(10*FieldField("Profit Share"))/10+
       '<row><cell>Company Paid Healthcare'+'<cell>'+Math.round(10*FieldField("Company Paid Healthcare"))/10+
       '<row><cell>Life And Disability'+'<cell>'+Math.round(10*FieldField("Life and Disability"))/10;

Link to comment
Share on other sites

Yes.

 

Math.round(X);           // round X to an integer
Math.round(10*X)/10;     // round X to tenths
Math.round(100*X)/100;   // round X to hundredths
Math.round(1000*X)/1000; // round X to thousandths

You can also use FusionPro's built-in global function Round, where the first parameter is the number and the second parameter is the number of decimal places you want to round to, which in this case is 1:

Round(X,0); // round X to an integer
Round(X,1); // round X to tenths
Round(X,2); // round X to hundredths
Round(X,3); // round X to thousandths

So you might try changing your code to something like this:

 

return  '<row><cell>Salary'+'<cell>'+Math.round(10*Field("Salary"))/10+
       '<row><cell>Commission'+'<cell>'+Math.round(10*Field("Commissions and or Bonus"))/10+
       '<row><cell>Incentives'+'<cell>'+Math.round(10*FieldField("September Incentive"))/10+
       '<row><cell>STI'+'<cell>'+Math.round(10*FieldField("Short Term Incentive STI"))/10+
       '<row><cell>401(k) Match'+'<cell>'+Math.round(10*FieldField("401(k) Match"))/10+
       '<row><cell>401(k) Proft Share'+'<cell>'+Math.round(10*FieldField("Profit Share"))/10+
       '<row><cell>Company Paid Healthcare'+'<cell>'+Math.round(10*FieldField("Company Paid Healthcare"))/10+
       '<row><cell>Life And Disability'+'<cell>'+Math.round(10*FieldField("Life and Disability"))/10;

That much repetitive code makes my head hurt. This can be reduced many ways; here's my minimal version:

var slices = 
{
   Salary: "",
   Commission: "Commissions and or Bonus",
   Incentives: "September Incentive",
   STI: "Short Term Incentive STI",
   "401(k) Match": "",
   "401(k) Profit Share": "Profit Share",
   "Company Paid Healthcare": "",
   "Life And Disability" : "",
}

var result = [""];
for (var title in slices)
{
   var val = slices[title] || title;
   result.push(["", title, Round(Field(val), 1)].join('<cell>'));
}
return result.join('\n<row>');

Link to comment
Share on other sites

You can also use FusionPro's built-in global function Round, where the first parameter is the number and the second parameter is the number of decimal places you want to round to, which in this case is 1:

Round(X,0); // round X to an integer
Round(X,1); // round X to tenths
Round(X,2); // round X to hundredths
Round(X,3); // round X to thousandths

Rounding functions aside, it seems to me that FP takes it upon itself to round every number to two places – regardless of input value. I'm assuming what's happening behind the scenes is that FP is totaling the values of each cell and calculating percentages on its own so that you always have an even 100%. Makes sense – but doesn't give you any control (from what I can tell) over the extent to which the numbers are rounded.

 

I think what you'd end up having to do is fake it by creating the legend yourself using the logic outlined above. Then you'd set the color of the legend's text in the chart to white (or the background color) and lay another frame over the top of it that returns your custom legend rule. If you set the text size of the legend frame to match the text defined in the chart properties, the colors should match up with each row.

 

var slices = 
{
   Salary: "",
   Commission: "Commissions and or Bonus",
   Incentives: "September Incentive",
   STI: "Short Term Incentive STI",
   "401(k) Match": "",
   "401(k) Profit Share": "Profit Share",
   "Company Paid Healthcare": "",
   "Life And Disability" : "",
}

[color="Red"]var sum = 0;
for (var i in slices)
 sum += Field((slices[i] || i));
[/color]
var result = [color="red"][][/color];
for (var title in slices)
{
   var val = slices[title] || title;
   [color="red"]result.push(title + ' ' + Round((Field(val)/sum) * 100, 1) + '%');[/color]
}
return result.join('\n[color="red"]<br>[/color]');

Link to comment
Share on other sites

Rounding functions aside, it seems to me that FP takes it upon itself to round every number to two places – regardless of input value. I'm assuming what's happening behind the scenes is that FP is totaling the values of each cell and calculating percentages on its own so that you always have an even 100%. Makes sense – but doesn't give you any control (from what I can tell) over the extent to which the numbers are rounded

Yes, this is correct. It's not the absolute numbers in the data that get put into the legend; it's the percentages of the total. And yes, they're always rounded to two decimal points.

I think what you'd end up having to do is fake it by creating the legend yourself using the logic outlined above. Then you'd set the color of the legend's text in the chart to white (or the background color) and lay another frame over the top of it that returns your custom legend rule.

Just set the Legend placement to None in the Chart Properties.

If you set the text size of the legend frame to match the text defined in the chart properties, the colors should match up with each row.

You can also put down a letter 'g' in the Webdings font before each line of your legend, in the color of the corresponding pie slice.

Link to comment
Share on other sites

Just set the Legend placement to None in the Chart Properties.

 

You can also put down a letter 'g' in the Webdings font before each line of your legend, in the color of the corresponding pie slice.

 

Okay, yeah it's probably a cleaner solution to assign the colors to the bullets in the legend rule rather than trying to ensure that the results of the legend rule line up correctly with the colored bullets on the chart. You could do that by modifying the code to look like this:

[color="red"]var colors = [
 'Red',
 'Green',
 'Blue',
 'Cyan',
 // etc
];[/color]

var slices = 
{
   Salary: "",
   Commission: "Commissions and or Bonus",
   Incentives: "September Incentive",
   STI: "Short Term Incentive STI",
   "401(k) Match": "",
   "401(k) Profit Share": "Profit Share",
   "Company Paid Healthcare": "",
   "Life And Disability" : "",
}

var sum = 0;
[color="red"]var color = 0;[/color]
for (var i in slices)
 sum += Field((slices[i] || i));

var result = [];
for (var title in slices)
{
   var val = slices[title] || title;
   [color="Red"]var bullet = '<span font="Webdings" color="' + colors[(color++ % colors.length)] + '">g</span>';[/color]
   result.push([color="red"]bullet + ' ' + [/color]title + ' ' + Round((Field(val)/sum) * 100, 1) + '%');
}
return result.join('\n<br>');

 

Or you could use the same rule for both if you set the rule to "Re-evaluate for every text flow" and name your legend frame "chartLegend":

var sum = 0;
var legendFrame = 'chartLegend';
var isLegend = FusionPro.inValidation ? true : FusionPro.Composition.CurrentFlow.name == legendFrame;

function Slice(title, color, field) {
 this.color = color || 'Black';
 var bullet = '<span font="Webdings" color="' + this.color + '">g</span>';
 this.title = bullet + ' ' + title;
 this.field = Field((field || title));
 sum += this.field;
}

var glue = isLegend ? '<br>' : '<row>';
var slices = [
 //        Key                         Color       Field name (defaults to key)
 new Slice('Salary',                   'Red'),
 new Slice('Commission',               'Green',    'Commissions and or Bonus'),
 new Slice('Incentives',               'Blue',     'September Incentive'),
 new Slice('SIT',                      'Cyan',     'Short Term Incentive STI'),
 new Slice('401(k) Match',             'Magenta'),
 new Slice('401(k) Profit Share',      'Yellow',   'Profit Share'),
 new Slice('Company Paid Healthcare',  'Black'),
 new Slice('Life And Disability',      'Purple')
]
return '<row>' + slices.map(function(slice) {
 var val = Round((slice.field/sum)*100, 1);
 return isLegend ? slice.title + ' ' + val + '%' : '<cell>' + val;
}).join(glue);

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...