An elegant and dynamic graphical gauge meter built with Typescript.
GaugeMeter.ts is highly customizable and includes full-radial, semi-radial & arch dials
Just one script, there is no dependencies.
Built-in themes.
HTML5 renders the Canvas content without images.
Add custom text & label.
Support for any page size and page color.
Configure via data attributes, object properties on call or default settings.
Update by simple function call.
This GaugeMeter can be downloaded here.
Include the following JavaScript Code, CSS and HTML code to render a minimal form of the GaugeMeter.
<script src="./GaugeMeter.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const gauges = document.getElementsByClassName('GaugeMeter');
for (const gauge of gauges) {
const meter = new GaugeMeter(gauge);
}
});
</script>
<style>
.GaugeMeter{
Position: Relative;
Text-Align: Center;
Overflow: Hidden;
Cursor: Default;
}
.GaugeMeter SPAN,
.GaugeMeter B{
Margin: 0 23%;
Width: 54%;
Position: Absolute;
Text-align: Center;
Display: Inline-Block;
Color: RGBa(0,0,0,.8);
Font-Weight: 100;
Font-Family: "Open Sans", Arial;
Overflow: Hidden;
White-Space: NoWrap;
Text-Overflow: Ellipsis;
}
.GaugeMeter[data-style="Semi"] B{
Margin: 0 10%;
Width: 80%;
}
.GaugeMeter S,
.GaugeMeter U{
Text-Decoration: None;
Font-Size: .5em;
Opacity: .5;
}
.GaugeMeter B{
Color: Black;
Font-Weight: 300;
Font-Size: .5em;
Opacity: .8;
}
</style>
Minimal Implementation. The code below is all you will need to render a basic gauge meter with 0 indication.
<div class="GaugeMeter" id="GaugeMeter_1"></div>
Basic Implementation. The code below is all you will need to render a basic gauge meter with 10 indication.
<div class="GaugeMeter" id="GaugeMeter_1" data-percent="10"></div>
Update the gauge value and its indication via update function call.
const meter103 = new GaugeMeter(document.getElementById('GaugeMeter_103'));
meter103.update({ percent: 15 });
Below is a list of all the optional parameters, see the Parameter Definitions for more details on how to utilize these data attributes.
<div class="GaugeMeter" id="GaugeMeter_1"
data-percent="10"
data-min="0"
data-used="256"
data-total="1024"
data-size="200"
data-prepend="$"
data-append=".00"
data-theme="Red-Gold-Green"
data-color="Blue"
data-back="Silver"
data-width="2"
data-style="Semi"
data-stripe="2"
data-animationstep = "1"
data-animate_gauge_colors="true"
data-animate_text_colors="true"
data-label="VISA Card"
data-label_color="#FF0000"
data-text="Spendings"
data-text_size="0.22"
data-fill="#FFFFFF"
data-showvalue="false"
></div>
The form of the gauge meter can be manipulated by means of the following parameters. These parameters can be passed in to the library via HTML5 tag data attributes, as illustrated in the HTML example code above or as object properties when calling the library. The following table elaborates upon each of the parameter properties. All property values shall be given as strings. See MDN.
| Attribute | Optional | Defaults | Values | Description |
|---|---|---|---|---|
| data-percent | No | 0 | Any positive integer string, between 0 to 100. | The value to set the gauge meter to. |
| data-min | Yes | null | Any integer string. | The minimum value of the gauge meter. |
| data-used | Yes | null | Any positive integer string. |
Display a percentage of a value that overrides any
data-percent defined count. To show "25%" of 512 GB of RAM being used, you would specify "128" here and "512" for data-total. |
| data-total | Yes | null | Any positive integer string. |
Display a percentage of a value that overrides any
data-percent defined count. To show "25%" of 512 GB of RAM being used, you would specify "512" here and "128" for data-used. |
| data-text | Yes | null | Any short string. | Replaces the data-percent count in the center of the gauge. |
| data-text_size | Yes | 0.22 | Any positive float string, between 0.0 to 0.5. | Scale factor for text size (indicated value or text in gauge center) in relation to gauge size. |
| data-prepend | Yes | null | Any string (2 characters max). | Adds this text before the percent count in the center of the gauge. |
| data-append | Yes | null | Any string (2 characters max). | Adds this text after the percent count in the center of the gauge. Typical use would be a "%" symbol. |
| data-size | Yes | 100 | Any positive integer string. | Width & height of the gauge meter in pixels. |
| data-width | Yes | 3 | Any positive integer string. | Thickness of the gauge meter progress bar in pixels. |
| data-style | Yes | Full | Full, Semi or Arch | Displays either a full circle, semi-circle or an arched-circle. |
| data-color | Yes | #F8590A | Hex values (#FFFFFF), Red-Green-Blue-Alpha color space (RGBa(255,255,255,1.0)) or HTML color-name (Red) |
The foreground-color of the gauge meter's progress bar. This value is overridden if data-theme is specified. |
| data-back | Yes | RGBa(0,0,0,.06) | Hex values (#FFFFFF), Red-Green-Blue-Alpha color space (RGBa(255,255,255,1.0)) or HTML color-name (Green) | The background-color of the gauge meter's progress bar. |
| data-theme | Yes | Red-Gold-Green |
Red-Gold-Green
|
Color & gradient themes to fill the foreground-color of the gauge meter's progress bar with. |
| data-animate_gauge_colors | Yes | false | Boolean string, false or true. |
When enabled, the foreground-color of the gauge meter's progress bar will cycle according to the color value, as directed by the
data-theme. If enabled, this overrides any values specified by the data-color. |
| data-animate_text_colors | Yes | false | Boolean string, false or true. |
When enabled, the percentage text color of the gauge meter will cycle according to the color value, as directed by the
data-theme. If enabled, this overrides any values specified by the data-label_color. |
| data-label | Yes | null | Any short string. | Supplemental text label that can appear below the central percentage or text of the gauge meter. |
| data-label_color | Yes | Black | Hex values (#FFFFFF), Red-Green-Blue-Alpha color space (RGBa(255,255,255,1.0)) or HTML color-name (Blue) | The foreground text color of the supplemental text label. |
| data-stripe | Yes | 0 | Any positive integers string. |
Show the gauge meter's progress bar in solid form or stripe form. If the value is greater than 0, the gauge meter's progress bar changes from a solid to a stripe, where the value is the thickness of the stripes. |
| data-fill | Yes | null | Hex values (#FFFFFF), Red-Green-Blue-Alpha color space (RGBa(255,255,255,1.0)) or HTML color-name (Blue) | Fill color of internal gauge background area where prepend, append and gauge text is shown. |
| data-animationstep | Yes | 1 | Any positive integer string. | Step width used for animation when gauge bargraph is drawn. Higher number results in higher animation speed. 0 stops animation. |
| data-showvalue | Yes | false | Boolean string, false or true. | Label will show value instead of percent. Gauge bargraph will show 0-100% or computation of data-used and data-total. |
A few samples to show off the capabilities of this plugin.
data-percent: "10"
data-text: null
data-text_size: "0.22"
data-prepend: null
data-append: null
data-size: null
data-width: null
data-style: null
data-color: null
data-back: null
data-theme: null
data-animate_gauge_colors: "false"
data-animate_text_colors: "false"
data-label: null
data-label_color: null
data-stripe: null
data-percent: "20"
data-text: null
data-text_size: "0.22"
data-prepend: null
data-append: "%"
data-size: null
data-style: null
data-color: null
data-back: null
data-theme: null
data-animate_gauge_colors: "false"
data-animate_text_colors: "false"
data-label: null
data-label_color: null
data-stripe: null
data-percent: "30"
data-text: null
data-text_size: "0.22"
data-prepend: "$"
data-append: null
data-size: null
data-style: null
data-color: null
data-back: null
data-theme: null
data-animate_gauge_colors: "false"
data-animate_text_colors: "false"
data-label: null
data-label_color: null
data-stripe: null
data-percent: "40"
data-text: "Hello"
data-text_size: "0.22"
data-prepend: null
data-append: null
data-size: null
data-width: null
data-style: null
data-color: null
data-back: null
data-theme: null
data-animate_gauge_colors: "false"
data-animate_text_colors: "false"
data-label: null
data-label_color: null
data-stripe: null
data-percent: "65"
data-text: "World"
data-text_size: "0.1"
data-prepend: null
data-append: null
data-size: null
data-width: null
data-style: null
data-color: null
data-back: null
data-theme: null
data-animate_gauge_colors: "false"
data-animate_text_colors: "false"
data-label: null
data-label_color: null
data-stripe: null
data-percent: "50"
data-text: null
data-text_size: "0.22"
data-prepend: "%"
data-append: null
data-size: "50"
data-width: null
data-style: null
data-color: null
data-back: null
data-theme: null
data-animate_gauge_colors: "false"
data-animate_text_colors: "false"
data-label: null
data-label_color: null
data-stripe: null
data-percent: "60"
data-text: null
data-text_size: "0.22"
data-prepend: null
data-append: "%"
data-size: "64"
data-width: null
data-style: null
data-color: null
data-back: null
data-theme: null
data-animate_gauge_colors: "false"
data-animate_text_colors: "false"
data-label: null
data-label_color: null
data-stripe: null
data-percent: "70"
data-text: null
data-text_size: "0.22"
data-prepend: null
data-append: "%"
data-size: "128"
data-width: null
data-style: null
data-color: null
data-back: null
data-theme: null
data-animate_gauge_colors: "false"
data-animate_text_colors: "false"
data-label: null
data-label_color: null
data-stripe: null
data-percent: "80"
data-text: null
data-text_size: "0.22"
data-prepend: null
data-append: "%"
data-size: "150"
data-width: "20"
data-style: null
data-color: null
data-back: null
data-theme: "DarkRed-LightRed"
data-animate_gauge_colors: "false"
data-animate_text_colors: "false"
data-label: null
data-label_color: null
data-stripe: "4"
data-percent: "88"
data-text: null
data-text_size: "0.22"
data-prepend: null
data-append: "%"
data-size: "200"
data-width: "1"
data-style: null
data-color: null
data-back: "RGBa(255,255,255,0)"
data-theme: null
data-animate_gauge_colors: "false"
data-animate_text_colors: "false"
data-label: null
data-label_color: null
data-stripe: null
data-percent: "77"
data-text: null
data-text_size: "0.22"
data-prepend: null
data-append: "%"
data-size: "256"
data-width: "30"
data-style: null
data-color: "#F8590A"
data-back: "#FF9EE0"
data-theme: null
data-animate_gauge_colors: "false"
data-animate_text_colors: "false"
data-label: null
data-label_color: null
data-stripe: null
data-percent: "0"
data-min: "-100"
data-total: "100"
data-used: "-95"
data-text: null
data-text_size: "0.22"
data-prepend: null
data-append: "%"
data-size: "150"
data-width: "15"
data-style: "Arch"
data-color: null
data-back: null
data-theme: null
data-animate_gauge_colors: "false"
data-animate_text_colors: "false"
data-label: null
data-label_color: null
data-stripe: null
data-showvalue: true
data-percent: "20" - "100"
data-text: null
data-text_size: "0.22"
data-prepend: null
data-append: "%"
data-size: "150"
data-width: "15"
data-style: "Semi"
data-color: null
data-back: null
data-theme: null
data-animate_gauge_colors: "false"
data-animate_text_colors: "false"
data-label: null
data-label_color: null
data-stripe: null
data-percent: "20" - "100"
data-text: null
data-text_size: "0.22"
data-prepend: null
data-append: "%"
data-size: "150"
data-width: "15"
data-style: "Arch"
data-color: null
data-back: null
data-theme: "Red-Gold-Green"
data-animate_gauge_colors: "false"
data-animate_text_colors: "false"
data-label: null
data-label_color: null
data-stripe: null
data-percent: "20" - "100"
data-text: null
data-text_size: "0.22"
data-prepend: null
data-append: "%"
data-size: "150"
data-width: null
data-style: null
data-color: null
data-back: null
data-theme: "Green-Gold-Red"
data-animate_gauge_colors: "false"
data-animate_text_colors: "false"
data-label: null
data-label_color: null
data-stripe: null
data-percent: "20" - "100"
data-text: null
data-text_size: "0.22"
data-prepend: null
data-append: "%"
data-size: "150"
data-width: null
data-style: null
data-color: null
data-back: null
data-theme: "Green-Red"
data-animate_gauge_colors: "false"
data-animate_text_colors: "false"
data-label: null
data-label_color: null
data-stripe: null
data-percent: "20" - "100"
data-text: null
data-text_size: "0.22"
data-prepend: null
data-append: "%"
data-size: "150"
data-width: null
data-style: null
data-color: null
data-back: null
data-theme: "Red-Green"
data-animate_gauge_colors: "false"
data-animate_text_colors: "false"
data-label: null
data-label_color: null
data-stripe: null
data-percent: "20" - "100"
data-text: null
data-text_size: "0.22"
data-prepend: null
data-append: "%"
data-size: "150"
data-width: null
data-style: null
data-color: null
data-back: null
data-theme: "DarkBlue-LightBlue"
data-animate_gauge_colors: "false"
data-animate_text_colors: "false"
data-label: null
data-label_color: null
data-stripe: null
data-percent: "20" - "100"
data-text: null
data-text_size: "0.22"
data-prepend: null
data-append: "%"
data-size: "150"
data-width: null
data-style: null
data-color: null
data-back: null
data-theme: "LightBlue-DarkBlue"
data-animate_gauge_colors: "false"
data-animate_text_colors: "false"
data-label: null
data-label_color: null
data-stripe: null
data-percent: "20" - "100"
data-text: null
data-text_size: "0.22"
data-prepend: null
data-append: "%"
data-size: "150"
data-width: null
data-style: null
data-color: null
data-back: null
data-theme: "DarkRed-LightRed"
data-animate_gauge_colors: "false"
data-animate_text_colors: "false"
data-label: null
data-label_color: null
data-stripe: null
data-percent: "20" - "100"
data-text: null
data-text_size: "0.22"
data-prepend: null
data-append: "%"
data-size: "150"
data-width: null
data-style: null
data-color: null
data-back: null
data-theme: "LightRed-DarkRed"
data-animate_gauge_colors: "false"
data-animate_text_colors: "false"
data-label: null
data-label_color: null
data-stripe: null
data-percent: "20" - "100"
data-text: null
data-text_size: "0.22"
data-prepend: null
data-append: "%"
data-size: "150"
data-width: null
data-style: null
data-color: null
data-back: null
data-theme: "DarkGreen-LightGreen"
data-animate_gauge_colors: "false"
data-animate_text_colors: "false"
data-label: null
data-label_color: null
data-stripe: null
data-percent: "20" - "100"
data-text: null
data-text_size: "0.22"
data-prepend: null
data-append: "%"
data-size: "150"
data-width: null
data-style: null
data-color: null
data-back: null
data-theme: "LightGreen-DarkGreen"
data-animate_gauge_colors: "false"
data-animate_text_colors: "false"
data-label: null
data-label_color: null
data-stripe: null
data-percent: "20" - "100"
data-text: null
data-text_size: "0.22"
data-prepend: null
data-append: "%"
data-size: "150"
data-width: null
data-style: null
data-color: null
data-back: null
data-theme: "DarkGold-LightGold"
data-animate_gauge_colors: "false"
data-animate_text_colors: "false"
data-label: null
data-label_color: null
data-stripe: null
data-percent: "20" - "100"
data-text: null
data-text_size: "0.22"
data-prepend: null
data-append: "%"
data-size: "150"
data-width: null
data-style: null
data-color: null
data-back: null
data-theme: "LightGold-DarkGold"
data-animate_gauge_colors: "false"
data-animate_text_colors: "false"
data-label: null
data-label_color: null
data-stripe: null
data-percent: "20" - "100"
data-text: null
data-text_size: "0.22"
data-prepend: null
data-append: "%"
data-size: "150"
data-width: null
data-style: null
data-color: null
data-back: null
data-theme: "Red-Gold-Green"
data-animate_gauge_colors: "true"
data-animate_text_colors: "false"
data-label: null
data-label_color: null
data-stripe: null
data-percent: "20" - "100"
data-text: null
data-text_size: "0.22"
data-prepend: null
data-append: "%"
data-size: "150"
data-width: null
data-style: null
data-color: null
data-back: null
data-theme: "Red-Gold-Green"
data-animate_gauge_colors: "true"
data-animate_text_colors: "true"
data-label: null
data-label_color: null
data-stripe: null
data-percent: "20" - "100"
data-text: null
data-text_size: "0.22"
data-prepend: null
data-append: "%"
data-size: null
data-width: "2"
data-style: null
data-color: null
data-back: "RGBa(255,255,255,.2)"
data-theme: "White"
data-animate_gauge_colors: "false"
data-animate_text_colors: "true"
data-label: null
data-label_color: "#FFF"
data-stripe: null
data-percent: "47" / "76" / "100"
data-text: null
data-text_size: "0.22"
data-prepend: null
data-append: "%"
data-size: "180"
data-width: "7"
data-style: null / "Arch" / "Semi"
data-color: null
data-back: null
data-theme: "Black"
data-animate_gauge_colors: "true"
data-animate_text_colors: "true"
data-label: "Battery" / "WiFi" / "Upload"
data-label_color: "#FF0000"
data-stripe: null
data-percent: "47" / "76" / "100"
data-text: null
data-text_size: "0.22"
data-prepend: null
data-append: "%"
data-size: "180"
data-width: "7"
data-style: null / "Arch" / "Semi"
data-color: null
data-back: null
data-theme: "Black"
data-animate_gauge_colors: "true"
data-animate_text_colors: "true"
data-label: "Battery" / "WiFi" / "Upload"
data-label_color: "#FF0000"
data-stripe: null
data-fill: "#FF4E06"
data-percent: "0"
data-total: "256"
data-used: "128"
data-text: null
data-text_size: "0.22"
data-prepend: null
data-append: null
data-size: "180"
data-width: "7"
data-style: "Arch"
data-color: null
data-back: null
data-theme: "Black"
data-animate_gauge_colors: "false"
data-animate_text_colors: "false"
data-label: "128 of 256"
data-label_color: "#FF0000"
data-stripe: null
data-fill: null
data-showvalue: "true"