Home

Awesome

JustGage

<p align="center"><img src="docs/img/logo.png"/></p>

Downloads

Build

PRs Welcome MIT Licence

NPM

JustGage is a handy JavaScript plugin for generating and animating nice & clean dashboard gauges. It is based on Raphaël library for vector drawing.

<p align="center"><img src="docs/img/screenshot.gif"/></p>

Getting Started

Installing Justgage is as easy as...

bower install justgage-official

or maybe you wish to use NPM...

npm install justgage --save

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

NameDefaultDescription
id(required)The HTML container element id
value0Value Gauge is showing
parentNodenullThe HTML container element object. Used if id is not present
defaultsfalseDefaults parameters to use globally for gauge objects
widthnullThe Gauge width in pixels (Integer)
heightnullThe Gauge height in pixels
valueFontColor#010101Color of label showing current value
valueFontFamilyArialFont of label showing current value
symbol''Special symbol to show next to value
min0Min value
minTxtfalseMin value text, overrides min if specified
max100Max value
maxTxtfalseMax value text, overrides max if specified
reversefalseReverse min and max
humanFriendlyDecimal0Number of decimal places for our human friendly number to contain
textRenderernullFunction applied before redering text (value) => value return false to format value based on config options
onAnimationEndnullFunction applied after animation is done
gaugeWidthScale1.0Width of the gauge element
gaugeColor#edebebBackground color of gauge element
label''Text to show below value
labelFontColor#b3b3b3Color of label showing label under value
shadowOpacity0.2Shadow opacity 0 ~ 1
shadowSize5Inner shadow size
shadowVerticalOffset3How much shadow is offset from top
levelColors["#a9d70b", "#f9c802", "#ff0000"]Colors of indicator, from lower to upper, in RGB format
startAnimationTime700Length of initial animation in milliseconds
startAnimationType>Type of initial animation (linear, >, <, <>, bounce)
refreshAnimationTime700Length of refresh animation in milliseconds
refreshAnimationType>Type of refresh animation (linear, >, <, <>, bounce)
donutStartAngle90Angle to start from when in donut mode
valueMinFontSize16Absolute minimum font size for the value label
labelMinFontSize10Absolute minimum font size for the label
minLabelMinFontSize10Absolute minimum font size for the min label
maxLabelMinFontSize10Absolute minimum font size for the man label
hideValuefalseHide value text
hideMinMaxfalseHide min/max text
showInnerShadowfalseShow inner shadow
humanFriendlyfalseconvert large numbers for min, max, value to human friendly (e.g. 1234567 -> 1.23M)
noGradientfalseWhether to use gradual color change for value, or sector-based
donutfalseShow donut gauge
differentialfalseGauge will fill starting from the center, rather than from the min value
relativeGaugeSizefalseWhether gauge size should follow changes in container element size
counterfalseAnimate text value number change
decimals0Number of digits after floating point
customSectors{}Custom sectors colors. Expects an object
formatNumberfalseFormats numbers with commas where appropriate
pointerfalseShow value pointer
pointerOptions{}Pointer options. Expects an object
displayRemainingfalseReplace display number with the value remaining to reach max value
targetLinenullValue Target line will display
targetLineColor"#000000"Color of Target Line
targetLineWidth1.5Width of Target Line

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'
}

TargetLine

Example:

var gauge = new JustGage({
            id: "gauge-targetLine", 
            value: 50,
            min: 0,
            max: 100,
            decimals: 2,
            gaugeWidthScale: 0.6,
    		targetLine: 50,
    		targetLineColour: "#000",
    		targetLineWidth: 4
        });
<p align="center"><img src="docs/img/TargetLine_Example.png"/></p>

Methods

Refresh

Used to refresh Gauge value and max value

guage.refresh(val, max, min, label)

Update

Used to dynamically update existing Gauge appearence

gauge.update(option, value)

vs

const options = {
  valueFontColor: '#ff0000',
  labelFontColor: '#ff0000',
}
gauge.update(options)

Update Options

NameDescription
valueFontColorHEX color for gauge value text
labelFontColorHEX 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

License

This project is licensed under MIT License

Author