Awesome

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.

• JustGage
  • Getting Started
  • Basic usage
  • Options
    • Custom Sectors
    • Pointer options
  • Methods
    • Refresh
    • Update
      • Update Options
    • Destroy
  • Demo
  • Examples
  • Changelog
    • BREAKING CHANGES
  • License
  • Author

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

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
        });

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

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
  • customSectors expects an object and not an array (percent support, check docs for more info)
• 1.2.6
  • Removed title feature

License

This project is licensed under MIT License

Author

• Bojan Djuricic