Skip to main content
M
matts69405811
Participating Frequently
September 24, 2017
Answered

AE: add commas to number counting in expressions

  • September 24, 2017
  • 3 replies
  • 10497 views

I've found a few threads on how to have commas for numbers in expression, but I haven't been able to crack the code to add to the expression that I already have. It is as followed:

str = thisLayer.name;

if(str.length < 7){

pos = parseInt(str[6]);}

else{

pos = parseInt(str.substr(6,str.length));}

pos = pos-1;

duration = thisComp.layer("BarsController").effect("Animation duration labels")("Slider");

offset =  thisComp.layer("BarsController").effect("Animation labels start time offset")("Slider");

circle_offset = thisComp.layer("BarsController").effect("Animation bar scale offset")("Slider");

distance = thisComp.layer("BarsController").effect("Distance amount")("Slider");

label_Ypos = thisComp.layer("BarsController").effect("Labels distance")("Slider");

endAt = thisComp.layer("BarsController").effect("Animation labels end time offset")("Slider");

stay = thisComp.layer("BarsController").effect("Stay still until")("Slider")

if(time < stay+endAt){"$"+

Math.round(ease_in(time,1+pos*circle_offset+offset,1+pos*circle_offset+offset+duration,0,thisComp.layer(thisLayer.name.substr(5,  thisLayer.name.length)).effect("Value")("Slider")));}

else{"$"+

Math.round(ease_in(time,stay+endAt,stay+endAt+pos*circle_offset+offset+duration,thisComp.layer(thisLayer.name.substr(5,  thisLayer.name.length)).effect("Value")("Slider"),0))+"%";}

So trying to add commas to the numbers. Thanks!

Correct answer Rick Gerard

V1 is the one I have been messing with and sequence V2 should have the original. Thanks!

PVG_MarketUpdate_InfoG_DB.aep


Now that I'm a little more awake here's the solution. Basically you have to define the calculated number as the s (short for string) value that Dan's punctuation expression expression is looking for. That needs to happen just after the { that starts the if calculation and just after the { that starts the else calculation.

You have manually added a leading $ to the text string and Dan's punctuation expression is going to see that as a column so it could add an extra comma. You have to remove the "$" but for reasons that I did not dig through you have to leave in the "".

I found the trouble by quickly going through the expression you wrote and giving it some punctuation and comments. I also corrected the ease_in method and basically used the default language from the Expression Language Menu > Interpolation helper and just added an e to the else arrays to keep them separated.

The corrected expression looks like this:

// punctuation setup

numDecimals = 0;

commas = true;

dollarSign = true;

// variables from sliders

duration = thisComp.layer("BarsController").effect("Animation duration labels")("Slider");

offset =  thisComp.layer("BarsController").effect("Animation labels start time offset")("Slider");

circle_offset = thisComp.layer("BarsController").effect("Animation bar scale offset")("Slider");

distance = thisComp.layer("BarsController").effect("Distance amount")("Slider");

label_Ypos = thisComp.layer("BarsController").effect("Labels distance")("Slider");

endAt = thisComp.layer("BarsController").effect("Animation labels end time offset")("Slider");

stay = thisComp.layer("BarsController").effect("Stay still until")("Slider")

// find layer and retrieve name

str = thisLayer.name;

if(str.length < 7){

  pos = parseInt(str[6]);}

else{

  pos = parseInt(str.substr(6,str.length));}

pos = pos-1;

t = time;

// calculate if values

tMin = 1+pos*circle_offset+offset;

tMax = 1+pos*circle_offset+offset+duration;

value1 = 0;

value2 = thisComp.layer(thisLayer.name.substr(5, thisLayer.name.length)).effect("Value")("Slider");

// calculate else values

etMin = stay+endAt;

etMax = stay+endAt+pos*circle_offset+offset+duration;

evalue1 = thisComp.layer(thisLayer.name.substr(5, thisLayer.name.length)).effect("Value")("Slider");

evalue2 = 0;

if(time < stay+endAt){

  s = ""+ Math.round(easeIn(t, tMin, tMax, value1, value2));}

else{

  s = ""+ Math.round(easeIn(t, etMin, etMax, evalue1 ,evalue2));}

// insert punctuation

prefix = "";

if (s[0] == "-"){

  prefix = "-";

  s = s.substr(1);

}

if(dollarSign) prefix += "$";

if (commas){

  decimals = "";

  if (numDecimals > 0){

    decimals = s.substr(-(numDecimals + 1));

    s = s.substr(0,s.length - (numDecimals + 1));

  }

  outStr = s.substr(-s.length, (s.length-1)%3 +1);

  for (i = Math.floor((s.length-1)/3); i > 0; i--){

    outStr += "," + s.substr(-i*3,3);

  }

  prefix + outStr + decimals;

}else{

  prefix + s;

}

It is amazing how much easier it is to troubleshoot an expression if you give it a little air by using tabs and spaces. This is a much more complicated way of creating this data animation than I would have used. Index instead of layer name would be a good place to start. Expression controlled values for you bars would be another place. My approach would have been to use an index - argument and tie things together so one animated value would drive everything and all you had to do was duplicate the layer set to bring in more bars.

Anyway, copy and paste the expression and things should work. I hope you followed the logic.

3 replies

hellopaul4
hellopaul4
Inspiring
January 17, 2023

Just in case anyone stumbles across this outdated, and now totally incorrect, thread:

1. In File > Project Settings, under the Expressions tab, set "Expressions Engine" to "JavaScript".

2. Use this expression in your Source Text (assuming you have a Slider Control on that text layer, and want it to count up to a lot - hence the "*10" to multiply the value by 10). This also kills off the decimal places using the "toFixed" thing. If you want to keep the decimal places, just delete that second line, and change the "b" to an "a" in the last line. It's the "toLocaleString" bit that does the magic with the commas. You can Google that and change the formatting with some extra bits if you want - eg. 'en-US' to make it American-format:

a = effect("Slider Control")("Slider").value * 10;
b = a.toFixed(0);
Number(b).toLocaleString()

3. You're welcome.

    M
    matts69405811Author
    Participating Frequently
    September 25, 2017

    Thanks. I understand Dan's expression, but I'm trying to understand mine lol I tried this, but it failed:

    numDecimals = 0;

    commas = true;

    dollarSign = false;

    dur = 4;

    t = time - inPoint;

    s = thisLayer.name;

    if(str.length < 7){

    pos = parseInt(str[6]);}

    else{

    pos = parseInt(str.substr(6,str.length));}

    pos = pos-1;

    duration = thisComp.layer("BarsController").effect("Animation duration labels")("Slider");

    offset =  thisComp.layer("BarsController").effect("Animation labels start time offset")("Slider");

    circle_offset = thisComp.layer("BarsController").effect("Animation bar scale offset")("Slider");

    distance = thisComp.layer("BarsController").effect("Distance amount")("Slider");

    label_Ypos = thisComp.layer("BarsController").effect("Labels distance")("Slider");

    endAt = thisComp.layer("BarsController").effect("Animation labels end time offset")("Slider");

    stay = thisComp.layer("BarsController").effect("Stay still until")("Slider")

    if(time < stay+endAt){"$"+

    Math.round(ease_in(time,1+pos*circle_offset+offset,1+pos*circle_offset+offset+duration,0,thisComp.layer(thisLayer.name.substr(5,  thisLayer.name.length)).effect("Value")("Slider")));}

    else{"$"+

    Math.round(ease_in(time,stay+endAt,stay+endAt+pos*circle_offset+offset+duration,thisComp.layer(thisLayer.name.substr(5,  thisLayer.name.length)).effect("Value")("Slider"),0));}

    R
    Community Expert
    Rick GerardCommunity Expert
    Community Expert
    September 25, 2017

    You have added the s = in the wrong place and I don't see the rest of Dan's expression.

    You don't need dur, it has nothing to do with the way your expression generates numbers.

    You don't need t = time, it has nothing to do with the way your expression generates numbers.

    Dan's expression generates numbers and declares that number to be the variable s.

    Replace the two layers t = and s = with your expression

    Add s= to the last line of your expression because that is the line that generates the numbers

    Then add the rest of Dan's expression which adds commas to the number defined by the variable s.

    I'd do the copy and paste for you but it's hard to do on my phone...

    M
    matts69405811Author
    Participating Frequently
    September 25, 2017

    Sorry for me struggling with this haha

    So I took the top half of the code then pasted my code where t= and s= were relacing it. Then added the rest of his code. Then I put s= at the end.....

    numDecimals = 0;

    commas = true;

    dollarSign = false;

    str = thisLayer.name;

    if(str.length < 7){

    pos = parseInt(str[6]);}

    else{

    pos = parseInt(str.substr(6,str.length));}

    pos = pos-1;

    duration = thisComp.layer("BarsController").effect("Animation duration labels")("Slider");

    offset =  thisComp.layer("BarsController").effect("Animation labels start time offset")("Slider");

    circle_offset = thisComp.layer("BarsController").effect("Animation bar scale offset")("Slider");

    distance = thisComp.layer("BarsController").effect("Distance amount")("Slider");

    label_Ypos = thisComp.layer("BarsController").effect("Labels distance")("Slider");

    endAt = thisComp.layer("BarsController").effect("Animation labels end time offset")("Slider");

    stay = thisComp.layer("BarsController").effect("Stay still until")("Slider")

    if(time < stay+endAt){"$"+

    Math.round(ease_in(time,1+pos*circle_offset+offset,1+pos*circle_offset+offset+duration,0,thisComp.layer(thisLayer.name.substr(5,  thisLayer.name.length)).effect("Value")("Slider")));}

    else{"$"+

    Math.round(ease_in(time,stay+endAt,stay+endAt+pos*circle_offset+offset+duration,thisComp.layer(thisLayer.name.substr(5,  thisLayer.name.length)).effect("Value")("Slider"),0));}

    prefix = "";

    if (s[0] == "-"){

      prefix = "-";

      s = s.substr(1);

    }

    if(dollarSign) prefix += "$";

    if (commas){

      decimals = "";

      if (numDecimals > 0){

        decimals = s.substr(-(numDecimals + 1));

        s = s.substr(0,s.length - (numDecimals + 1));

      }

      outStr = s.substr(-s.length, (s.length-1)%3 +1);

      for (i = Math.floor((s.length-1)/3); i > 0; i--){

        outStr += "," + s.substr(-i*3,3);

      }

      prefix + outStr + decimals;

    }else{

      prefix + s;

    }

    s=

    R
    Community Expert
    Rick GerardCommunity Expert
    Community Expert
    September 25, 2017

    This was figured out a long time ago so I am giving you the link the the expression master: universal counter - Dan Ebberts's Expressioneering Design Guide

    The guts of everything you need to add commas is right there.

    M
    matts69405811Author
    Participating Frequently
    September 25, 2017

    Thanks. I read it through and tried to add the comma code to different parts of my expression, but it keeps failing. Where should I drop it into my code?

    Assuming this is what I need:

    if (commas){
      decimals = "";
      if (numDecimals > 0){
      decimals = s.substr(-(numDecimals + 1));
      s = s.substr(0,s.length - (numDecimals + 1));
      }
      outStr = s.substr(-s.length, (s.length-1)%3 +1);
      for (i = Math.floor((s.length-1)/3); i > 0; i--){
      outStr += "," + s.substr(-i*3,3);
      }

    R
    Community Expert
    Rick GerardCommunity Expert
    Community Expert
    September 25, 2017

    The top part of Dan's universal counter declares the variables and starts the counter:

    numDecimals = 2;

    commas = true;

    dollarSign = true;

    beginCount = -1999;

    endCount = 1999;

    dur = 4;

    t = time - inPoint;

    s = linear (t, 0, dur, beginCount, endCount).toFixed(numDecimals);

    The top five lines define variables. The next two lines generate the numbers. The variable "s" is the generated number that the rest of the expression looks at.

    As you can probably guess you don't need decimals so you can change that variable to zero, you do need commas so you keep that true, and you don't need a dollar sign so you can change that variable to false.

    You do not need the begin count and end count because you already have an expression that generates numbers. If you replace the t= and the s= lines with your expression you will be generating numbers again. Dan's expression is looking for the variable s to decide where to put the commas, add a dollar sign or add decimals. If you add an s = in front of your last line then the rest of Dan's expression should work just fine.

    I hope that helps. It takes a while to understand how expressions work but if you try and understand each line then it will get easier to understand the logic.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices