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 103. 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)
    else if ((rem == 1) || (rem == -2))
    else if (rem == -1)
        mag -= 2;
    var coeff = value * Math.pow(10, -mag);
    if (fixedDigits)
        return coeff.toFixed(fixedDigits) + "e" + mag.toString();
        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.

Raw number Trio Sci Not Formatted
1000000 1,000,000.00 1,000,000.00
10000000 10,000,000.00 10,000,000.00
100000000 100,000,000.00 100,000,000.00
1000000000 1,000,000,000.00 1,000,000,000.00
10000000000 10,000,000,000.00 10,000,000,000.00
100000000000 0.10e12 0.10  x 10 12
1000000000000 1.00e12 1.00  x 10 12
10000000000000 10.00e12 10.00  x 10 12
100000000000000 0.10e15 0.10  x 10 15
1000000000000000 1e15 1.00  x 10 15

Here is the javascript source for ScientificNotation.

Comment Section

Comments are closed.