Forum Discussion

MarkShnier__You's avatar
MarkShnier__You
Qrew Champion
4 months ago

Code to make a colored circle with a number inside it

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
------------------------------

5 Replies

Sort By
  • ChayceDuncan's avatar
    ChayceDuncan
    Qrew Captain
    4 months ago

    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. 

    "<div style='font-weight:bold;margin:auto;line-height: 27px;text-align:center;height: 25px;width: 25px;background: #ffb205;color:white;border-radius: 50%'>1</div>"

    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: 

    "<div style='font-weight:bold;margin:auto;line-height: 27px;text-align:center;height: 25px;width: 25px;background: #ffb205;color:white;border-radius: 50%;float:left;'>1</div>" & 

    "<div style='font-weight:bold;margin:auto;line-height: 27px;text-align:center;height: 25px;width: 25px;background: #ffb205;color:white;border-radius: 50%;float:left;'>2</div>" & 

    "<div style='font-weight:bold;margin:auto;line-height: 27px;text-align:center;height: 25px;width: 25px;background: #ffb205;color:white;border-radius: 50%;float:left;'>3</div>" & 

    "<div style='font-weight:bold;margin:auto;line-height: 27px;text-align:center;height: 25px;width: 25px;background: #ffb205;color:white;border-radius: 50%;float:left;'>4</div>"



    ------------------------------
    Chayce Duncan
    ------------------------------
    • MarkShnier__You's avatar
      MarkShnier__You
      Qrew Champion
      4 months ago

      Awesome. Not I don't need the inner circle. I see I can control the font color of the words so I can choose a contrasting color (probably black or white) according to what is most readable for that background color.     



      ------------------------------
      Mark Shnier (Your Quickbase Coach)
      mark.shnier@gmail.com
      ------------------------------
      • ChayceDuncan's avatar
        ChayceDuncan
        Qrew Captain
        4 months ago

        Just make sure that if you change the overall size of the circle you keep the height/width the exact same - and then the line-height is just there to force the div to vertically align the text in the middle. It should be right around the same px of the height/width as well but not exact given the shape of the element. 



        ------------------------------
        Chayce Duncan
        ------------------------------