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": []
}