Jump to content

Convert a number result from a calculated field to currency


Recommended Posts

Please bear with me as I am not a coder and/or programmer.
I have a working animated counter using some HTML and Javascript.
The counter is functional and does what I need it to do - it counts the field result but the formatting of the result is my issue.
I can't get it to work with a calculated field that's formatted for currency .
Due to this problem I have been trying everything to convert the number format with no success.

I would greatly appreciate any assistance.

Here is the script:

<script>
const getNumber = (counter) => {
    return parseFloat(counter.dataset.countTo);
};
const getSpeed = (counter) => {
    return parseFloat(counter.dataset.duration);
};

const updateTex = (counter, text) => {
    counter.textContent = text;
};

const animate = (counter, countTo, duration) => {
    let startTime = null;

    let currentTime = Date.now();

    const step = (currentTime) => {
        if (!startTime) {
            startTime = currentTime;
        }

        const progress = Math.min((currentTime - startTime) / duration, 1);

        const currentNum = Math.floor(progress * countTo);

        updateTex(counter, currentNum);

        if (progress < 1) {
            window.requestAnimationFrame(step);
        } else {
            window.cancelAnimationFrame(window.requestAnimationFrame(step));
        }
    };

    window.requestAnimationFrame(step);
};

const counters = document.querySelectorAll('.counter');
counters.forEach((counter) => {
    const countTo = getNumber(counter);
    const animationDuration = getSpeed(counter);
  animate(counter, countTo, animationDuration);
});

</script>

 

The HTML:
 

<div class="base_container_1">
<table width="100%" border="0" cellpadding="0">
  <tbody>
    <tr>
      <td style="padding-left:5px; padding-right: 5px; " width="4%" rowspan="2"><img style="align: middle" src="https://www.erc-recovery.com/ERC/clients12.gif">
</td>
      <td width="96%">
<p class="dashTitle">Total Clients Served:</p>

</td>
    </tr>
    <tr>
      <td><div class="dashNumber"><div data-count-to="[@calcfield:1]" data-duration="3500" class="counter">0</div></div>
</td>
    </tr>
  </tbody>
</table>
</div>

<div class="base_container_2">
<table width="100%" border="0" cellpadding="0">
  <tbody>
    <tr>
      <td style="padding-left:5px; padding-right: 5px; " width="4%" rowspan="2"><img style="align: middle" src="https://www.erc-recovery.com/ERC/bank3.gif">
</td>
      <td width="96%">
<p class="dashTitle">Approved Funding:</p>

</td>
    </tr>
    <tr>
      <td><div class="dashNumber"><div data-count-to="[@calcfield:3]" data-duration="3500" class="counter">0</div></div>
</td>
    </tr>
  </tbody>
</table>
</div>

<div class="base_container_3">
<table width="100%" border="0" cellpadding="0">
  <tbody>
    <tr>
      <td style="padding-left:5px; padding-right: 5px; " width="4%" rowspan="2"><img style="align: middle" src="https://www.erc-recovery.com/ERC/deals3.gif">
</td>
      <td width="96%">
<p class="dashTitle">Wealth Revenue:</p>

</td>
    </tr>
    <tr>
      <td><div class="dashNumber"><div data-count-to="[@calcfield:2]" data-duration="3500" class="counter">0</div></div>
</td>
    </tr>
  </tbody>
</table>
</div>

<table style = "display:none;"> <tr> <td>

 

The Result:

 

 

Total Clients Served:

111
 

Approved Funding:

12749973
 

Wealth Revenue:

566083

 

 

Here's What I'm Trying to Achieve:

 

Total Clients Served:

111
 

Approved Funding:

$12,749,973.43
 

Wealth Revenue:

$566,083.42
 
 
 
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.

Loading...
 Share

×
×
  • Create New...