Percent Complete Circle And Indicator

[intapiuser]

This is a purely HTML, SVG, and CSS widget requiring no Javascript.

The style of the guage is:

.circular-chart { display: block; margin: 10px auto; max-width: 80%; max-height: 250px; }

.circle-bg { fill: none; stroke: #eee; stroke-width: 3.8; }

.circle { fill: none; stroke-width: 2.8; stroke-linecap: round; }

.circular-chart.orange .circle { stroke: #ff9f00; }

.percentage { fill: #666; font-family: sans-serif; font-size: 0.5em; text-anchor: middle; }

And the construction of the widget is:

<div class='single-chart'>

   <svg viewBox='0 0 36 36' class='circular-chart orange'>

       <path class='circle-bg' d='M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831' />

       <path class='circle' stroke-dasharray='{panel:value}, 100' d='M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831' />

       <text x='18' y='20.35' class='percentage'>{panel:value}</text>

   </svg>

</div>

We will take both elements and insert them into a BloX widget.

The style will go into the BloXs’ main style section.

The HTML will go directly into an HTML text block.

The circle class has an attribute {panel:value}.

This sets the percentage of the circle defined by value / 100.

BloX Editor Content:

{

   "style": ".circular-chart { display: block; margin: 10px auto; max-width: 80%; max-height: 250px; }.circle-bg { fill: none; stroke: #eee; stroke-width: 3.8; }.circle { fill: none; stroke-width: 2.8; stroke-linecap: round; }.circular-chart.orange .circle { stroke: #ff9f00; }.percentage { fill: #666; font-family: sans-serif; font-size: 0.5em; text-anchor: middle; }",

   "script": "",

   "title": "",

   "showCarousel": true,

   "body": [

       {

           "type": "Container",

           "horizontalAlignment": "center",

           "items": [

               {

                   "type": "TextBlock",

                   "horizontalAlignment": "center",

                   "text": "<div class='single-chart'> <svg viewBox='0 0 36 36' class='circular-chart orange'><path class='circle-bg' d='M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831' /><path class='circle' stroke-dasharray='{panel:value}, 100' d='M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831' /><text x='18' y='20.35' class='percentage'>{panel:value}</text> </svg> </div>"

               }

           ]

       }

   ],

   "actions": []

}