When you think ASP, think...
Recent Articles
All Articles
ASP.NET Articles
Message Board
Related Web Technologies
User Tips!
Coding Tips

Sample Chapters
Commonly Asked Message Board Questions
JavaScript Tutorials
MSDN Communities Hub
Official Docs
Stump the SQL Guru!
XML Info
Author an Article
ASP ASP.NET ASP FAQs Message Board Feedback
Print this page.
Published: Wednesday, December 13, 2000

Representing Numbers Graphically

On a number of sites you'll see a page counter or some sort of dynamic number displayed as an image as opposed to a text string. The most classic example is the page counter, where you'll see some blurb like:

This page has been visited:
- continued -

times since December 1st, 2000

However, this is not the only application when you might like to display a number as a string of digits. Perhaps you'd like to display the time:


In a little side project of mine I needed such functionality, to display various numbers as an image. I decided to write up a short little function that would encompass this functionality. Before you can use this function, though, you need to go find ten images that represent the digits between 0 and 9. You can grab a zip file containing the digits you see above, or you can snake them from image repositories like http://www.schoenster.com/images/digits/ or http://www.chrome-concepts.com/purp/freecds.htm or http://www.uncg.edu/images/digits/digits.html. (All of these sites were found with a search on image and digits at Google.com.) Next, save these ten digit images in some directory, like /digits.

Now that you have your digit images saved we're ready to examine the ConstructDigits function. This function accepts a single parameter, iValue, which represents a numerical value. The function returns an HTML string with the appropriate HTML IMG tags to generate an image representing the value of iValue.

The first thing ConstructDigits does is ensure that iValue is a number, does not contain any decimal points, and is greater than or equal to zero. While these check could be done with a single regular expression, I've opted to use three If ... Then statements:

Function ConstructDigits(iValue)
'This function accepts a single parameter, iValue, and
'returns HTML containing a series of images representing
'a graphical image of the value in iValue

  'Start by ensuring iValue is a number
  If Not IsNumeric(iValue) then
    ConstructDigits = iValue & " IS NOT A NUMBER!"
    Exit Function
  End If

  'Can't show decimals!
  If InStr(1, iValue, ".") then
    ConstructDigits = "CANNOT CONTAIN DECIMALS!"
    Exit Function
  End If

  'Can't show negative numbers!
  If iValue < 0 then
    Exit Function
  End If

  ...  TO BE EXAMINED ... 

End Function
[View a live demo!]

The first check uses the IsNumeric function to determine if iValue is indeed numeric. If iValue is not numeric, the function returns a warning. Since numbers with decimals and negative numbers are still considered numeric numbers, we need two more checks to account for these two other cases. The next check uses InStr to check if iValue contains a decimal point; if it does, a warning is returned. Finally, the last check determines if the value of iValue is less than zero; again, if it is, a warning is returned.

The only remaining part of the ConstructDigits function is the actual work of displaying a number as an image. This is accomplished with a For ... Next loop that iterates through each character of iValue, creating the correct image tag.

Function ConstructDigits(iValue)


  Dim iLoop, strResults
  For iLoop = (Len(iValue) - 1) to 0 STEP -1
    strResults = strResults & "<img src=""/digits/" & _
       Mid(CStr(iValue),Len(iValue) - iLoop,1) & ".gif"" border=0>"

  ConstructDigits = strResults
End Function
[View a live demo!]

The above code example assumes that the digit images are stored in the format N.gif (that is, that the image for digit 1 is stored as 1.gif and that these images are stored in the /digits directory. You may need to make some slight changes to the code if either of these conditions aren't true for your digit images.

Simplifying ConstructDigits
The ConstructDigits function presented in the article can pretty much be reduced to a single line of code:

(iValue + "").replace(/([0-9])/g, '<img src="$1.gif">' )

Since I do all of my scripting in JavaScript, the code above is in JavaScript. The replace function is also available in VBScript, on the RegExp object, and should work the same way. (For more information on Regular Expressions with VBScript, be sure to read: An Introduction to Regular Expressions with VBScript!)
-- Dennis M.

Well, there you have it, a means to display a number as an image. Now that we have this part licked, you may wish to know about some articles that could make use of the ConstructDigits function. Here are some articles that could be easily adapted to use the ConstructDigits function to snaz up their display!

Happy Programming!


  • View the live demo!
  • Download a ZIP of the digit images

  • ASP.NET [1.x] [2.0] | ASPFAQs.com | Advertise | Feedback | Author an Article