By popular feature request, we’re releasing a few Gauge Custom Tiles!
Update: Gauges are available in Super Tiles now! If you’re looking for a simpler way to work with gauges, including customizing segments, check out the new feature!
This requires SharpTools frontend version 240510.xxxx or newer, so make sure to refresh the page on any devices that will be using these Custom Tiles to pull in the latest updates.
Gauge Tile - Gauge.js
The first option is a radial gauge using the Gauge.js library. The default design is a half arc with a pointer, but you can use the Chart Customizations setting to pass in options from their documentation.
Import Gauge Tile - Gauge.jsThis also includes some basic settings included as defaults in the Advanced Customizations setting field for quick adjustments:
- label: hide or show the label (default: false)
- Accepts a boolean true/false to hide or show the gauge
- Accepts one of
"top", "middle", "bottom"for custom positioning
- min: set the minimum value
- max: set the maximum value
- units: override the displayed unit of measure
Starting from left-to-right, top-to-bottom we have the following customizations:
-
Default
{ label: false, min: 0, max: 100 } -
Label Shown (default bottom position)
{ label: true, min: 0, max: 100 } -
Label Shown, Top Position
{ label: "top", min: 0, max: 100 } -
Label Shown, Middle Position
{ label: "middle", min: 0, max: 100 } -
Advanced: Static Zones
{ label: true, min: 0, max: 100, staticZones: [ {strokeStyle: "#F03E3E", min: 0, max: 33}, {strokeStyle: "#FFDD00", min: 33, max: 66}, {strokeStyle: "#30B32D", min: 66, max: 100}, ], } -
Advanced: Gradient Color by Position
{ label: "middle", min: 0, max: 100 generateGradient: true, percentColors: [ [0.0, "#43a047"], [0.50, "#f9c802"], [1.0, "#ff0000"] ], }
Make sure to read the documentation from Gauge.js around the advanced customization options and make note that the formats for the static zones vs the gradient by percent are different formats. The zones are actual static value ranges whereas the percentColors are the fractional percent as a value between 0-1.
Gauge Tile - Apex Charts Donut
The next is a new Gauge tile using the Apex Charts library. The default design is a donut style gauge, but you can use the Chart Customizations setting to pass in customizations from their documentation.
The first tile is the out of the box look and feel with a basic customization to complement the base customizations we made to the Gauge.js tile above.
Apex Charts is quite a complex and robust library with tons of customization options. The second example is quite a whopper of a customization snippet copied directly from their examples in their documentation.
Advanced Customization Example (tap to expand)
{
colors: ["#20E647"],
plotOptions: {
radialBar: {
hollow: {
margin: 0,
size: "70%",
background: "#293450"
},
track: {
dropShadow: {
enabled: true,
top: 2,
left: 0,
blur: 4,
opacity: 0.15
}
}
}
},
fill: {
type: "gradient",
gradient: {
shade: "dark",
type: "vertical",
gradientToColors: ["#87D4F9"],
stops: [0, 100]
}
}
}
The intention of this was to show what’s possible with this type of gauge, but if you want to use heavy customization like this across multiple gauges, I would recommend importing another copy of the custom tile and customizing those options directly in the custom tile code.
Otherwise using heavy customizations in each tile could start to slow down your dashboard loading and will increase the data size of your dashboards with all the redundant / duplicate customizations.
!