jQuery Flex Gauge Demos

Example #1 : Basic Example


No options set besides 'appendTo', normal default will put the canvas into the body.
Javascript 
            var gauge = new FlexGauge({
                appendTo: '#example1'
            });

Example #2 : Using Styles for Colors


Options set for the canvas size, arc size, arc fill size, arc background size, faster animation speed and also using a style name to grab the color.
You can pass a class style name and then grab any of the css attributes from that class.
Javascript 
            var gauge = new FlexGauge({
                appendTo: '#example2',
                animateEasing: true,

                elementId: 'example2_canvas',
                elementWidth: 150,
                elementHeight: 150,

                arcSize: 65,
                arcAngleStart: 1,
                arcFillPercent: .80,
                arcStrokeFg: 20,
                arcStrokeBg: 10,
                animateSpeed: 1,

                styleArcFg: 'btn-success',
                styleSrc: 'background-color'
            });

Example #3 : Arc Positioning and Update


Showing different positioning of the arcAngle, also using .update() to redraw the gauge without destroying it. Update will take all of the same options that the initial constructor FlexGauge() takes.
Javascript 
            var gauge = new FlexGauge({
                appendTo: '#example3',
                arcFillPercent: Math.random(),
                arcAngleStart: .6,
                arcAngleEnd: 2.4,
                arcStrokeFg: 15,
                arcStrokeBg: 30,
                colorArcFg: '#444444'
            });

            setInterval(function(){
                gauge.update({
                    arcFillPercent: Math.random()
                });
            }, 3000);

Example #4 : Using Int instead of Perc


Instead of using 'arcFillPercent' to show how much of the arc you would like to fill, you can use 'arcFillInt' and 'arcFillTotal' or 'arcFillStart', 'arcFillEnd' and 'arcFillTotal'.
This example also shows how to add a different background color with saturation and lightness settings.
Javascript 
            var gauge = new FlexGauge({
                appendTo: '#example4',

                arcFillInt: 7,
                arcFillTotal: 20,

                arcAngleStart: .5,
                arcAngleEnd: 1.5,

                arcBgColorLight: 200,
                arcBgColorSat: 50,

                colorArcFg: '#FF3300',
                colorArcBg: '#0033FF'
            });

            //  ----- or -----

            var gauge = new FlexGauge({
                appendTo: '#example4',

                arcFillStart: 5,
                arcFillEnd: 12,
                arcFillTotal: 20,

                arcAngleStart: .5,
                arcAngleEnd: 1.5,

                arcBgColorLight: 200,
                arcBgColorSat: 50,

                colorArcFg: '#FF3300',
                colorArcBg: '#0033FF'
            });

Example #5 : Generating Labels


Setting 'dialValue' to true will generate a div with the class 'fg-dial' and the current value of the gauge.
Setting 'dialLabel' to true will generate a div with the class 'fg-dial-label' with the content 'FlexGauge'. You can set it to whatever you like by passing it a string instead of bool.
Javascript 
                var gauge = new FlexGauge({
                    appendTo: '#example5',
                    dialValue: true,
                    dialLabel: true
                });
CSS 
            /** these classes are pre-generated **/
            .fg-dial {
                font-size: 200%;
                font-weight: bold;
                left: 0;
                position: absolute;
                text-align: center;
                top: 100px;
                width: 100%;
            }
            .fg-dial-label {
                font-size: 200%;
                font-weight: bold;
                left: 0;
                position: absolute;
                text-align: center;
                top: 160px;
                width: 100%;
            }

Example #6 : Existing Labels


You can tell the dial to use an existing class for the div if you already have rules setup. If the div is not inside the 'appendTo' element, it will be created and the specified class will be added to it.
Javascript 
                var gauge = new FlexGauge({
                    appendTo: '#example6',
                    dialValue: true,
                    dialUnit: '$',
                    dialUnitPosition: 'before',
                    dialClass: 'existingDivWithClass',
                    dialUnits: 'unit',
                    arcFillInt: 10,
                    arcFillTotal: 45
                });
CSS 
            .existingDivWithClass {
                font-size: 200%;
                font-weight: bold;
                left: 0;
                position: absolute;
                text-align: center;
                top: 100px;
                width: 100%;
            }
HTML 
                    <div class="existingDivWithClass"></div>

Example #7 : Update All the Things


You can update almost everything in the gauge accept for the element* variables since those are never re-drawn. This allows for the same canvas to be used for mutliple gauges without needed to destroy and re-create the canvas.
Javascript 
                var holder = [
                    {
                        appendTo: '#example7',
                        dialValue: true,
                        dialClass: 'gaugeDials',
                        dialUnit: '$',
                        dialUnitPosition: 'before',
                        dialLabel: 'Sales Revenue',
                        dialLabelClass: 'gaugeDialsLabel',
                        arcFillInt: 150,
                        arcFillTotal: 550,
                        styleArcFg: 'alert-info',
                        styleSrc: 'color',
                        arcStrokeFg: 10,
                        arcStrokeBg: 20
                    },
                    {
                        appendTo: '#example7',
                        dialValue: true,
                        dialLabel: 'Sales Increase',
                        arcFillPercent: .8,
                        dialUnitPosition: 'after',
                        dialUnit: '%',
                        styleArcFg: 'alert-success',
                        styleSrc: 'color',
                        arcStrokeFg: 20,
                        arcStrokeBg: 10
                    }
                ];
                var current = 0;
                var gauge = new FlexGauge(holder[current]);
                setInterval(function(){
                    current = (current == 0 ? current+1 : current-1);
                    gauge.update(holder[current]);
                }, 5000);
CSS 
            .gaugeDials {
                font-size: 200%;
                font-weight: bold;
                left: 0;
                position: absolute;
                text-align: center;
                top: 100px;
                width: 100%;
            }
            .gaugeDialsLabel {
                font-size: 180%;
                font-weight: bold;
                left: 0;
                position: absolute;
                text-align: center;
                top: 170px;
                width: 100%;
            }