Display a number in a circle

  • 1
  • Question
  • Updated 4 years ago
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!
Photo of Tami Lust

Tami Lust

  • 5,280 Points 5k badge 2x thumb

Posted 4 years ago

  • 1
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
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>
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
That is good work for a Friday.  Thanks Pat! 
Photo of Tami Lust

Tami Lust

  • 5,280 Points 5k badge 2x thumb
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.

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

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Thanks Tami.  Appreciate you giving back to the community!