Nimble Coder

Formatting Exponentials in Javascript

A while back I needed the dashboard for the Key Performance Indicators (KPI) to display nicely formatted numbers. When the KPI values started to get large (millions, billions, etc.) the numbers became almost unreadable. In order to simplify the display of the numbers, I ended up converting the values to scientific notation. However in order to make the numbers even more readable, I converted the scientific notation into powers of 10³. I converted the floating point number into a string that was still a valid floating point number, but it used the exponential notation such as 1.0e6. I then used a regular expression to convert the exponent into HTML that the As a general practice, I would also put the raw formatted floating point number in the tooltip for the display. The function that actually performs the scientific notation grouping and conversion is toTrioExponential().

// Formats the value as an exponential as a multiple of 3
// NOTE: The result is a string that is still	a valid floating point number
function toTrioExponential(value, fixedDigits)
{
    var mag = parseInt(Math.log(Math.abs(value) / Math.LN10);
    var rem = mag % 3;
    if (rem == 2)
        ++mag;
    else if ((rem == 1) || (rem == -2))
        --mag;
    else if (rem == -1)
        mag -= 2;
    var coeff = value * Math.pow(10, -mag);
    if (fixedDigits)
        return coeff.toFixed(fixedDigits) + "e" + mag.toString();
    else
        return coeff.toString() + "e" + mag.toString();
};

The script supports changing the scaling criteria. Just modify the sciNot.scaleDigits and sciNot.scaleThreshold or supply the parameters to the function sciNot.floatAutoScale(elem, floatValue, scaleThreshold, scaleDigits);. The scaleThreshold and scaleDigits parameters are normally optional. To test the script, here is sample output using the default scaling parameters.

Here is the javascript source for ScientificNotation.

Print | posted on Thursday, March 01, 2007 12:54 PM | Filed Under [ JavaScript ]