jQuery Plugin To Generate Animated & Customizable Gauges - Flex Gauge

Flex Gauge is a powerful jQuery plugin to draw animated & highly customizable gauges using Html5 canvas element.

How to use it:

1. Load the jQuery flex gauge plugin after loading jQuery library.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="FlexGauge.js"></script>

2. Create an empty element that will be served as a gauge container.

<div id="demo">

</div>

3. The Javascript to generate a basic gauge appending to the element you just created.

var gauge = new FlexGauge({
appendTo: '#demo'
});

4. Available settings to customize the gauge.

• appendTo: 'body': {String} Element that you would like to append to. ie '#idname', '.classname', 'div#idname', etc..
• elementId: 'canvas': Id of Canvas already created or Id of canvas that will be created automatically
• elementClass: 'canvas': Class of canvas created
• elementWidth: 200: Canvas Width
• elementHeight: 200: Canvas Height
• dialValue: false: Generate Dial Value for the Gauge, true will use arcFillPercent or arcFillInt depending on provided values and specified dialUnits, string will use specified value
• dialClass: 'fg-dial': Class applied to div when dial is generated.
• dialUnit: '%':  Type of unit to use for the dial. string: %|$|
• dialUnitPosition: 'after': Where the dial unit will be displayed.{string: before|after}
• dialLabel: false: Generate Label for the Gauge, true will use default "FlexGauge", string will use specified
• dialLabelClass: 'fg-dial-label': Class applied to div when label is generated.
• arcSize: 85: Radius of the arc
• arcAngleStart: 0.85: Starting location of the arc, End always needs to be larger
• arcAngleEnd: 2.15: Ending location of the arc, End always needs to be larger
• arcFillPercent: .5: Percentage the arc fills
• arcFillStart: null: Starting values that are used to
• arcFillEnd: null: Ending values that are used to.  ie: 60 (arcFillEnd) - 10 (arcFillStart) = 50
• arcFillInt: null: Data used to find out what percentage of the arc to fill. arcFillInt can be populated by the difference of arcFillStart
• arcFillTotal: null: Data used to find out what percentage of the arc to fill. arcFillInt can be populated by the difference of arcFillEnd
• arcBgColorLight: 80: Color lightness: 0 - 255, 0 having no white added, 255 having all white and no color
• arcBgColorSat: 60: Color saturation: 0 - 100, 0 having no color, 100 is full color
• arcStrokeFg: 30: Size of the line marking the percentage
• arcStrokeBg: 30: Size of the container holding the line
• colorArcFg: '#5bc0de':  Color of the line marking the percentage
• colorArcBg: null: Color of the container holding the line, default is using the Fg color and lightening it
• styleArcFg: null: Instead of providing a color or hex for the color, you can provide a class from the stylesheet and specify what you would like to grab for the color in styleSrc
• styleArcBg: null,
• styleSrc: 'color',
• animateEasing: true: If set to false, then the graph will not be animated
• animateSpeed: 5: Speed for the animation, 1 is fastest, higher the number, slower the animation
• animateNumerator: 12: Math used in animation speed
• animateDivisor: 15,
• _animatePerc: 0.00: Placeholder for current percentage while animating
• _animateLoop: null: Placeholder for setInterval
• _canvas: null: Placeholder for canvas
• _ctx: null: Placeholder for canvas context

---

This awesome jQuery plugin is developed by jeffmillies. For more Advanced Usages, please check the demo page or visit the official website.