Animated Gauge Plugin In JavaScript - JustGage
File Size: | 1.03 MB |
---|---|
Views Total: | 23948 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

JustGage is a JavaScript plugin for generating and animating nice & clean gauges.
It is based on Raphaël library for vector drawing, so it’s completely resolution independent and self-adjusting.
See Also:
How to use it:
1. Install & Download.
# NPM $ npm i justgage --save
2. Load the necessary Raphaël library and JustGage plugin in the document.
<script src="/path/to/cdn/raphael.min.js"></script> <script src="/path/to/dist/justgage.js"></script>
3. Create a container to hold the gauge.
<div id="gauge"></div>
4. Create a new gauge instance.
var gauge = new JustGage({ id: "gauge", // required // more options here });
5. All default configs to customize the gauge.
// id : string // this is container element id id: config.id, // value : float // value gauge is showing value: kvLookup('value', config, dataset, 0, 'float'), // defaults : bool // defaults parameter to use defaults: kvLookup('defaults', config, dataset, 0, false), // parentNode : node object // this is container element parentNode: kvLookup('parentNode', config, dataset, null), // width : int // gauge width width: kvLookup('width', config, dataset, null), // height : int // gauge height height: kvLookup('height', config, dataset, null), // valueFontColor : string // color of label showing current value valueFontColor: kvLookup('valueFontColor', config, dataset, "#010101"), // valueFontFamily : string // color of label showing current value valueFontFamily: kvLookup('valueFontFamily', config, dataset, "Arial"), // symbol : string // special symbol to show next to value symbol: kvLookup('symbol', config, dataset, ''), // min : float // min value min: kvLookup('min', config, dataset, 0, 'float'), // minTxt : string // min value text minTxt: kvLookup('minTxt', config, dataset, false), // max : float // max value max: kvLookup('max', config, dataset, 100, 'float'), // maxTxt : string // max value text maxTxt: kvLookup('maxTxt', config, dataset, false), // reverse : bool // reverse min and max reverse: kvLookup('reverse', config, dataset, false), // humanFriendlyDecimal : int // number of decimal places for our human friendly number to contain humanFriendlyDecimal: kvLookup('humanFriendlyDecimal', config, dataset, 0), // textRenderer: func // function applied before rendering text textRenderer: kvLookup('textRenderer', config, dataset, null), // onAnimationEnd: func // function applied after animation is done onAnimationEnd: kvLookup('onAnimationEnd', config, dataset, null), // gaugeWidthScale : float // width of the gauge element gaugeWidthScale: kvLookup('gaugeWidthScale', config, dataset, 1.0), // gaugeColor : string // background color of gauge element gaugeColor: kvLookup('gaugeColor', config, dataset, "#edebeb"), // label : string // text to show below value label: kvLookup('label', config, dataset, ''), // labelFontColor : string // color of label showing label under value labelFontColor: kvLookup('labelFontColor', config, dataset, "#b3b3b3"), // valueFontFamily : string // font-family for label as well as min/max value labelFontFamily: kvLookup('labelFontFamily', config, dataset, "Arial"), // shadowOpacity : int // 0 ~ 1 shadowOpacity: kvLookup('shadowOpacity', config, dataset, 0.2), // shadowSize: int // inner shadow size shadowSize: kvLookup('shadowSize', config, dataset, 5), // shadowVerticalOffset : int // how much shadow is offset from top shadowVerticalOffset: kvLookup('shadowVerticalOffset', config, dataset, 3), // levelColors : string[] // colors of indicator, from lower to upper, in RGB format levelColors: kvLookup('levelColors', config, dataset, ["#a9d70b", "#f9c802", "#ff0000"], 'array', ','), // startAnimationTime : int // length of initial animation startAnimationTime: kvLookup('startAnimationTime', config, dataset, 700), // startAnimationType : string // type of initial animation (linear, >, <, <>, bounce) startAnimationType: kvLookup('startAnimationType', config, dataset, '>'), // refreshAnimationTime : int // length of refresh animation refreshAnimationTime: kvLookup('refreshAnimationTime', config, dataset, 700), // refreshAnimationType : string // type of refresh animation (linear, >, <, <>, bounce) refreshAnimationType: kvLookup('refreshAnimationType', config, dataset, '>'), // donutStartAngle : int // angle to start from when in donut mode donutStartAngle: kvLookup('donutStartAngle', config, dataset, 90), // valueMinFontSize : int // absolute minimum font size for the value valueMinFontSize: kvLookup('valueMinFontSize', config, dataset, 16), // labelMinFontSize // absolute minimum font size for the label labelMinFontSize: kvLookup('labelMinFontSize', config, dataset, 10), // minLabelMinFontSize // absolute minimum font size for the minimum label minLabelMinFontSize: kvLookup('minLabelMinFontSize', config, dataset, 10), // maxLabelMinFontSize // absolute minimum font size for the maximum label maxLabelMinFontSize: kvLookup('maxLabelMinFontSize', config, dataset, 10), // hideValue : bool // hide value text hideValue: kvLookup('hideValue', config, dataset, false), // hideMinMax : bool // hide min and max values hideMinMax: kvLookup('hideMinMax', config, dataset, false), // showInnerShadow : bool // show inner shadow showInnerShadow: kvLookup('showInnerShadow', config, dataset, false), // humanFriendly : bool // convert large numbers for min, max, value to human friendly (e.g. 1234567 -> 1.23M) humanFriendly: kvLookup('humanFriendly', config, dataset, false), // noGradient : bool // whether to use gradual color change for value, or sector-based noGradient: kvLookup('noGradient', config, dataset, false), // donut : bool // show full donut gauge donut: kvLookup('donut', config, dataset, false), // relativeGaugeSize : bool // whether gauge size should follow changes in container element size relativeGaugeSize: kvLookup('relativeGaugeSize', config, dataset, false), // counter : bool // animate level number change counter: kvLookup('counter', config, dataset, false), // decimals : int // number of digits after floating point decimals: kvLookup('decimals', config, dataset, 0), // customSectors : object // custom sectors colors. Expects an object with props // percents : bool hi/lo are percents values // ranges : array of objects : {hi, lo, color} customSectors: kvLookup('customSectors', config, dataset, {}), // formatNumber: boolean // formats numbers with commas where appropriate formatNumber: kvLookup('formatNumber', config, dataset, false), // pointer : bool // show value pointer pointer: kvLookup('pointer', config, dataset, false), // min must = -max and pointer will be at top when = 0 differential: true, // pointerOptions : object // define pointer look pointerOptions: kvLookup('pointerOptions', config, dataset, {}), // displayRemaining: boolean // replace display number with the number remaining to reach max displayRemaining: kvLookup('displayRemaining', config, dataset, false)
6. API methods.
// refresh the gauge value guage.refresh(val, max, min, label); // update options gauge.update({ // new options }); // destroy the instance guage.destroy();
Changelog:
v1.6.1 (2022-12-02)
- fix: make differential work with all intervals
v1.6.0 (2022-12-01)
- feat: differential gauge
v1.5.1 (2021-12-11)
- chore: bump path-parse from 1.0.6 to 1.0.7
- fix: style conflict with multiple gauges created using the "parentNode" method
v1.4.3/1.5.0 (2021-06-11)
- feat: use custom formats when textRenderer returns false
v1.4.2 (2021-02-16)
- fix: refresh with min/max 0
v1.4.1 (2021-02-10)
- Add labelFontFamily prop
v1.4.0 (2020-08-05)
- Update
This awesome jQuery plugin is developed by toorshia. For more Advanced Usages, please check the demo page or visit the official website.