flat-gauge-js
installation
npm
npm install flat-gauge-js --save
bower
bower install flat-gauge-js -S
include script:
<script type="text/javascript" src="node_modules/flat-gauge-js/dist/bundle.js"></script>
Examples
Spinner Example
var target = document; target rotationSpeed: 1000 title: text: 'Spinning' ;
Options
colors: default: string; active: string; inactive: string; ; activeDegree: number; radius: number; strokeWidth: number; rotationSpeed: number; title: text: string; fontSize: number; fontFamily: string; lineHeight: number; fontWeight: string; letterSpacing: string; ; animationDuration: number; highlight: boolean;
Tune Example
var target = document; var tune = target rotationSpeed: 1000 title: text: 'Tune' ; ;
Options
needleOptions: color: string; minMaxVal: min: number; max: number; value: number; ; radius: number; scale: number; animationDuration: number; ; iconOptions: degree: number; radius: number; animationDuration: number; src: string; dimensions: width: number; height: number; opacity: number; ; colors: default: string; active: string; inactive: string; ; strokeWidth: number; animationDuration: number; radius: number; showEdges: boolean; hollowEdges: number; // ENUM: None = 0,Left = 1,Right = 2,Both = 3 showIcon: boolean; hideBottom: boolean;
Multi-Tune Example
var target = document; var multiTune = target rotationSpeed: 1000 ;
Options
needleOptions: color: string; minMaxVal: min: number; max: number; value: number; ; radius: number; scale: number; animationDuration: number; ; segments: min: number; max: number; value?: number; ; iconOptions?: degree: number; radius: number; animationDuration: number; src: string; dimensions: width: number; height: number; opacity: number; ; colors?: default: string; active: string; inactive: string; ; strokeWidth?: number; animationDuration?: number; radius: number; showEdges: boolean; showIcon: boolean; hideBottom: boolean; backgroundColor?: string; hollowEdgesBgColor?: string; hollowEdges?: number; // ENUM: None = 0,Left = 1,Right = 2,Both = 3;
Timer Example
var target = document; var timer = target animationDuration: 500 time: hours: 2 minutes: 45 seconds: 3 percentage: 33;
Options
colors: default: string; active: string; inactive: string; ; strokeWidth: number; time: hours: number minutes: number seconds: number ; animationDuration: number; radius: number; showEdges: boolean; title: text: string; fontSize: number; fontFamily: string; lineHeight: number; fontWeight: string; letterSpacing: string; ; percentage: number;
AM-PM Example (Not Ready)
var target = document;var ampm = target;
Options
fromTo: from: string; to: string; ; needleOptions: color: string; minMaxVal: min: number; max: number; value: number; ; radius: number; scale: number; animationDuration: number; ; colors: default: string; active: string; inactive: string; ; radius: number; minMaxValAm: min: number; max: number; value: number; ; minMaxValPm: min: number; max: number; value: number; ; animationDuration: number; strokeWidth: number;
Range Example
var target = document;var range = target;
Options
colors?: ColorPalette; minMaxVal: MinMaxVal; strokeWidth?: number; animationDuration?: number; radius: number; showEdges: boolean; hollowEdges?: SideState; hideBottom: boolean; title?: InnerText; highlight?: boolean;
Typescript and ES6 Support
; timer: Timer; { var target = document; thistimer = target animationDuration: 500 time: hours: 2 minutes: 45 seconds: 3 percentage: 33 ; } }