Code to make a colored circle with a number inside it

Question

Does anyone have any code to dynamically make a circle with a number inside it? Or a rectangle box with a number inside similar to the Dashboard widgets Gauge charts on a New Style dashboard.    Think of a set of numbers colored billiard balls.  I'm mentally struggling with how to best present summarized information to users to show the performance vs Budget of the  combinations of 5 "Branches" (Regional Sales Divisions) and 7 Product Groups by month and YTD.
I don't know yet how I will present that three dimensional information at a glance but if I could present the information visually with a gradient of say 10 stoplight colors from Green being good though Yellow down to deep Red, it would help me.  I would need to be able to control the colors of he balls and the text on the ball or square dynamically by formula.   
------------------------------Mark Shnier (Your Quickbase Coach)mark.shnier@gmail.com------------------------------

ChayceDuncan · Answer

Are you trying to actually make billiard balls? Here is a snippet that you can make a nice easy circle - but the shading around the number will be much trickier and require much more CSS if that's a requirement. The below will just be a simple solid color with a number inside. I can try and modify it as well if you need a smaller/different colored circle in the middle as well. "

1

"You can adjust the height with the height/width/line-height entries - the 50% border-radius makes it a circle. If you need to line them up left to right you will also need to add some floats like: "

1

" & "

2

" & "

3

" & "

4

"------------------------------Chayce Duncan------------------------------

Sign up

Login to the community