Angular Gauge – Angular Gauge directive – Angular Gauge charet
In this post we will show you how to implemant Angular Gauge and Angular Gauge directive and Angular Gauge chart. Angularjs gauge could be a extremely customizable gauge directive for Angularjs JS apps and dashboards. it’s provides multitude of choices to customise as per your wants.
hear we will give yoiu how demo and example for Angular Gauge and how to use it with best way hear is link for git and demo and Download link for Angularjs Gauge.
Angular Gauge Usage
Angularjs Gauge Install using npm
// Install with gauge npm install angularjs-gauge
Angularjs Gauge Install using Bower
// Install with Bower bower install angularjs-gauge
Angularjs Gauge Install manually
// Install manually with git git clone https://github.com/ashish-chopra/angular-gauge.git
Copy the files from manually or dist into your project folder. Then, add the script to your code (“after adding the dependency of Angular 1.5”) and partitioning the ways as given below step:
<head> add your head <head> <body> add your body </body> <!-- angular-min js --> <script src="vendor/angular/angular.min.js"></script> <!-- angularjs-gauge js --> <script src="vendor/angular-gauge/dist/angularjs-gauge.min.js"></script>
Add as dependency in your module
angular.module('itsyourApp', ['angularjs-gauge']);
Use it in your HTML markup like this
<ng-gauge size="201" type="full" thick="5" value="71.5" cap="round" label="Angularjs gauge Speed" foreground-color="#ffcb65" background-color="rgba(255,255,255, 0.5)" append="mph"></ng-gauge>
Global Defaults
angular-gauge ships with a supplier to globally set config choices for all gauge instances utilized in the appliance throughout angular config part. we’ll be able to specify ngGaugeProvider dependency throughout config part. It supports one API to line config options:
// set ngGauge Provider for custom Options ngGaugeProvider.setOptions(customOptions);
Here, customOptions is associate object wherever keys ar the configOptions name (in camelCase notation), mentioned in on top of section. as an example, let see the way to set size, cap, thick, foreground-color and background-color choices globally mistreatment supplier as shown below:
angular
// set you app for angularjs gauge
.module('myApp', ['angularjs-gauge'])
// set you config App for angularjs gauge
.config(configApp);
// set you config App for angularjs gauge
configApp.$inject = ['ngGaugeProvider'];
// set you config App for angularjs gauge
function configApp(ngGaugeProvider) {
// parameters default setting
// and globally gauge instances.
ngGaugeProvider.setOptions({
size: 251,
cap: 'round',
thick: 15,
foregroundColor: "#ff7586",
// note for camelCase notation in parameter name
backgroundColor: "#e2e2e2"
});
}
You also like Angularjs Image Gallery and Angularjs pie chart and Angularjs line chart