Display a number in a circle

Questions
1

Does anyone know if it is possible and if so how to display a number in a circle. The number would be pulled from a specific field. I tried using the donut feature in charting but it shows a percent in large numbers then the number in smaller numbers. That is very confusing because the percent doesn’t really mean anything. I attached an image of what I am trying to achieve. Any help would be greatly appreciated. Thank you!

2

Google searched and got this.
http://stackoverflow.com/questions/4861224/how-to-use-css-to-surround-a-number-with-a-circle

So, add a Template component to the page. Add the desired field to the template. Then set the Class of the Template to numberCircle.

.numberCircle {


border-radius: 50%; behavior: url(PIE.htc); /* remove if you don't care about IE8 */ width: 36px; height: 36px; padding: 8px; background: #fff; border: 2px solid #666; color: #666; text-align: center; font: 32px Arial, sans-serif; }

Here’s the XML for said solution in Skuid.

<skuidpage unsavedchangeswarning="yes" showsidebar="true" showheader="true"> <models> <model id="user" limit="20" query="true" createrowifnonefound="false" sobject="User"> <fields> <field id="Name"/> </fields> <conditions> <condition type="userinfo" value="" field="Id" operator="=" enclosevalueinquotes="true" userinfotype="userid"/> </conditions> <actions/> </model> </models> <components> <template multiple="false" model="user" allowhtml="true" cssclass="numberCircle"> <contents>1</contents> </template> </components> <resources> <labels/> <javascript/> <css> <cssitem location="inline" name="newcss" cachelocation="false">.numberCircle { border-radius: 50%; behavior: url(PIE.htc); /* remove if you don't care about IE8 */ width: 40px; height: 40px; padding: 8px; background: #fff; border: 4px solid #6cb0d7; color: #666; text-align: center; font: 32px Arial, sans-serif; }</cssitem> </css> </resources> </skuidpage>
3

That is good work for a Friday.  Thanks Pat! 

4

WoW!! Thank you so much that is fantastic work. Your googling skills are much better than mine. You went above and beyond thank you. If it can help anyone here are the changes that I made to the css to be more in line with the Skuid donut chart in a panel set.

&nbsp;.numberCircle { 

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 50%;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; behavior: url(PIE.htc); /* remove if you don't care about IE8 */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 200px;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin-left: auto;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin-right: auto;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin-top: 25px;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 200px;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 25px;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: #fff;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: 30px solid #6cb0d7;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: #666;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-align: center;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font: 120px Arial, sans-serif;<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
5

Thanks Tami.  Appreciate you giving back to the community!