JustGage
JustGage is a handy JavaScript plugin for generating and animating nice & clean dashboard gauges. It is based on Raphaël library for vector drawing.
Getting Started
Installing Justgage is as easy as...
bower install justgage-official
or maybe you wish to use NPM...
npm install justgage --save
- Example NPM setup using Browserfy
or you can always download the CSS and JS files...
<!-- Raphael must be included before justgage -->
<script type="text/javascript" src="path/to/raphael.min.js"></script>
<script type="text/javascript" src="path/to/justgage.js"></script>
or if even don't want to download the files use cdnjs
<!-- Raphael must be included before justgage -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/justgage/1.2.9/justgage.min.js"></script>
Basic usage
Html
<div id="gauge"></div>
JS
var gauge = new JustGage({
id: "gauge", // the id of the html element
value: 50,
min: 0,
max: 100,
decimals: 2,
gaugeWidthScale: 0.6
});
// update the value randomly
setInterval(() => {
gauge.refresh(Math.random() * 100);
}, 5000)
Options
| Name | Default | Description |
|---|---|---|
| id | (required) | The HTML container element id |
| value | 0 |
Value Gauge is showing |
| parentNode | null |
The HTML container element object. Used if id is not present |
| defaults | false |
Defaults parameters to use globally for gauge objects |
| width | null |
The Gauge width in pixels (Integer) |
| height | null |
The Gauge height in pixels |
| valueFontColor | #010101 |
Color of label showing current value |
| valueFontFamily | Arial |
Font of label showing current value |
| symbol | '' |
Special symbol to show next to value |
| min | 0 |
Min value |
| minTxt | false |
Min value text, overrides min if specified |
| max | 100 |
Max value |
| maxTxt | false |
Max value text, overrides max if specified |
| reverse | false |
Reverse min and max |
| humanFriendlyDecimal | 0 |
Number of decimal places for our human friendly number to contain |
| textRenderer | null |
Function applied before redering text (value) => value return false to format value based on config options |
| onAnimationEnd | null |
Function applied after animation is done |
| gaugeWidthScale | 1.0 |
Width of the gauge element |
| gaugeColor | #edebeb |
Background color of gauge element |
| label | '' |
Text to show below value |
| labelFontColor | #b3b3b3 |
Color of label showing label under value |
| shadowOpacity | 0.2 |
Shadow opacity 0 ~ 1 |
| shadowSize | 5 |
Inner shadow size |
| shadowVerticalOffset | 3 |
How much shadow is offset from top |
| levelColors | ["#a9d70b", "#f9c802", "#ff0000"] |
Colors of indicator, from lower to upper, in RGB format |
| startAnimationTime | 700 |
Length of initial animation in milliseconds |
| startAnimationType | > |
Type of initial animation (linear, >, <, <>, bounce) |
| refreshAnimationTime | 700 |
Length of refresh animation in milliseconds |
| refreshAnimationType | > |
Type of refresh animation (linear, >, <, <>, bounce) |
| donutStartAngle | 90 |
Angle to start from when in donut mode |
| valueMinFontSize | 16 |
Absolute minimum font size for the value label |
| labelMinFontSize | 10 |
Absolute minimum font size for the label |
| minLabelMinFontSize | 10 |
Absolute minimum font size for the min label |
| maxLabelMinFontSize | 10 |
Absolute minimum font size for the man label |
| hideValue | false |
Hide value text |
| hideMinMax | false |
Hide min/max text |
| showInnerShadow | false |
Show inner shadow |
| humanFriendly | false |
convert large numbers for min, max, value to human friendly (e.g. 1234567 -> 1.23M) |
| noGradient | false |
Whether to use gradual color change for value, or sector-based |
| donut | false |
Show donut gauge |
| relativeGaugeSize | false |
Whether gauge size should follow changes in container element size |
| counter | false |
Animate text value number change |
| decimals | 0 |
Number of digits after floating point |
| customSectors | {} |
Custom sectors colors. Expects an object |
| formatNumber | false |
Formats numbers with commas where appropriate |
| pointer | false |
Show value pointer |
| pointerOptions | {} |
Pointer options. Expects an object |
| displayRemaining | false |
Replace display number with the value remaining to reach max value |
Custom Sectors
Example:
customSectors: {
percents: true, // lo and hi values are in %
ranges: [{
color : "#43bf58",
lo : 0,
hi : 50
},
{
color : "#ff3b30",
lo : 51,
hi : 100
}]
}
Pointer options
Example:
pointerOptions: {
toplength: null,
bottomlength: null,
bottomwidth: null,
stroke: 'none',
stroke_width: 0,
stroke_linecap: 'square',
color: '#000000'
}
Methods
Refresh
Used to refresh Gauge value and max value
guage.refresh(val, max, min, label)
val: The Gauge value (required)max: The Gauge Max value (optional)min: The Gauge Min value (optional)label: The Gauge label text (optional)
Update
Used to dynamically update existing Gauge appearence
gauge.update(option, value)
vs
const options = {
valueFontColor: '#ff0000',
labelFontColor: '#ff0000',
}
gauge.update(options)
Update Options
| Name | Description |
|---|---|
| valueFontColor | HEX color for gauge value text |
| labelFontColor | HEX color for gauge min, max and label text |
Destroy
Used to destroy the Gauge element
guage.destroy()
Demo
Click here to see a demo
Examples
Click here for a list of examples
Changelog
Check out the auto-generated Changelog
Or here you can find the old changelog (up to version 1.2.9)
BREAKING CHANGES
- 1.2.9
customSectorsexpects an object and not an array (percent support, check docs for more info)
- 1.2.6
- Removed
titlefeature
- Removed
License
This project is licensed under MIT License
714 Jul 21, 2022
3 May 18, 2022
6 Jul 9, 2022
1 Feb 3, 2022
6 Aug 24, 2022
4 May 3, 2022
14 Jan 3, 2023
9 Aug 23, 2022
10 Dec 23, 2022
14.5k Jan 3, 2023
11 Oct 25, 2022
1 May 9, 2021
13 Apr 22, 2022
106 Dec 31, 2022
10 Aug 29, 2022
1.3k Dec 4, 2022
12 Dec 8, 2022
5 Nov 1, 2022