ng-knob

Angular.js directive to Knob component powered by d3.js (without jQuery)

Download View on GitHub

Examples

with different options

Skin Tron + scale {{value}}

$scope.value = 65;
$scope.options = {
  skin: {
    type: 'tron'
  },
  size: 300,
  unit: "%",
  barWidth: 40,
  trackColor: 'rgba(255,0,0,.1)',
  prevBarColor: 'rgba(0,0,0,.2)',
  subText: {
    enabled: true,
    text: 'CPU used'
  },
  scale: {
    enabled: true,
    type: 'lines',
    width: 3
  },
  step: 5,
  displayPrevious: true
};

With subtext, unit and read only {{value}}

$scope.value = 65;
$scope.options = {
  unit: "%",
  readOnly: true,
  subText: {
    enabled: true,
    text: 'CPU used',
    color: 'gray',
    font: 'auto'
  },
  trackWidth: 40,
  barWidth: 25,
  trackColor: '#656D7F',
  barColor: '#2CC185'
};

Bar cap and display previous value{{value}}

$scope.value = 70;
$scope.options = {
  displayPrevious: true,
  barCap: 25,
  trackWidth: 30,
  barWidth: 20,
  trackColor: 'rgba(255,0,0,.1)',
  prevBarColor: 'rgba(0,0,0,.2)',
  textColor: 'rgba(255,0,0,.6)'
};

Default Knob {{value}}

$scope.value = 65;
$scope.options = {
};

Skin Tron {{value}}

$scope.value = 5.4;
$scope.options = {
  skin: {
    type: 'tron',
    width: 5,
    color: '#494B52',
    spaceWidth: 3
  },
  barColor: '#494B52',
  trackWidth: 30,
  barWidth: 30,
  textColor: '#494B52',
  step: 0.1,
  max: 10
};

Lines scale and step {{value}}

$scope.value = 85;
$scope.options = {
  scale: {
    enabled: true,
    type: 'lines',
    color: 'gray',
    width: 1,
    quantity: 20,
    height: 8
  },
  trackWidth: 30,
  barWidth: 30,
  step: 5,
  trackColor: 'rgba(52,152,219,.1)',
  barColor: 'rgba(52,152,219,.5)'
};

Min, max value {{value}}

$scope.value = 350;
$scope.options = {
  min: -1000,
  max: 1000,
  barColor: '#5BC01E',
  trackColor: '#212121',
  trackWidth: 15,
  barWidth: 30
};

Angles {{value}}

$scope.value = 256;
$scope.options = {
  startAngle: 30,
  endAngle: 330,
  unit: 'MB',
  trackColor: "rgba(162,121,143,1)",
  barColor: 'rgba(102,0,204,.5)',
  trackWidth: 15,
  barWidth: 15,
  subText: {
    enabled: true,
    text: 'RAM used'
  },
  max: 1024
};

Dots scale + Dynamic options{{value}}

$scope.value = 65;
$scope.options = {
  scale: {
    enabled: true,
    type: 'dots',
    color: 'rgba(255,0,0,.2)',
    width: 2,
    quantity: 50,
    spaceWidth: 10
  },
  trackWidth: 25,
  barWidth: 40,
  trackColor: 'rgba(0,0,0,.1)',
  dynamicOptions: true
};
$scope.changeOptions = function(){
// options changed
};

Animate and disabled input {{value}}

$scope.value = 65;
$scope.options = {
  displayInput: false,
  animate: {
    enabled: true,
    duration: 2000,
    ease: 'linear'
  },
  trackColor: 'rgba(33,33,33,.2)',
  barColor: 'rgba(255,221,51,1)'
};

Background color {{value}}

$scope.value = 65;
$scope.options = {
  bgColor: '#2C3E50',
  trackWidth: 50,
  barWidth: 30,
  barColor: '#FFAE1A',
  textColor: '#eee'
};

Angles + Tron + Scale {{value}}

$scope.value = 65;
$scope.options = {
  startAngle: 90,
  endAngle: 180,
  displayPrevious: true,
  prevBarColor: 'rgba(255,0,0,.2)',
  trackColor: 'rgba(255,0,0,.2)',
  skin: {
    type: 'tron'
  },
  scale: {
    enabled: true,
    type: 'lines',
    width: 2,
    quantity: 5
  }
};

Features

Dependencies

Browser Support

Get started

Installation

You can also use bower to install the component:
$ bower install ng-knob --save

Usage

HTML:
<body ng-app="KnobDemoApp">
  <div ng-controller="knobCtrl">
    <ui-knob value="value" options="options"></ui-knob>
  </div>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.10/d3.min.js"></script>
<script src="bower_components/ng-knob/dist/ng-knob.min.js"></script>
Angular.js:
var app = angular.module('KnobDemoApp', ['ui.knob'])
app.controller('knobCtrl', function ($scope) {
  $scope.value = 65;
  $scope.options = {
    size: 300
    //other options
  };
});

Options

You can pass these options to the initialize function to set a custom look and feel for the plugin.
Property Type Default Description
skin object { type: 'simple', width: 10, color: 'rgba(255,0,0,.5)', spaceWidth: 5 } Type: simple or tron
animate object { enabled: true, duration: 1000, ease: 'bounce' } Duration in milliseconds, Ease: linear, bounce, sin, cubic, quad, exp, circle
size integer 200 Size of knob in px. It will always be a square.
startAngle integer 0 Start angle in degrees
endAngle integer 360 End angle in degrees
unit string '' Unit values
displayInput boolean true Display input value (true or false)
readOnly boolean false Disabled change value (true or false)
trackWidth integer 50 Width track bar in px
barWidth integer 50 Width bar value in px
trackColor string 'rgba(0,0,0,0)' Color track bar
barColor string 'rgba(255,0,0,.5)' Color bar value
prevBarColor string 'rgba(0,0,0,0)' Color bar previous value
textColor string '#222' Text color
barCap integer 0 Defines how the ending of the bar line looks like in radius
fontSize string 'auto' Font size in px. auto: automatic change
subText object { enabled: false, text: '', color: 'gray', font: 'auto' } Subtext options
bgColor string '' Background color
scale object { enabled: false, type: 'lines', color: 'gray', width: 4, quantity: 20, height: 10, spaceWidth: 15 } Scale options, type: lines or dots
step integer 1 Step change, min 0.1
displayPrevious boolean false Display previous value (true or false)
min integer 0 Min value (start value), only integer
max integer 100 Max value (end value), only integer
dynamicOptions boolean false Dynamic change options (true or false)

Contributing

  1. Fork the repo
  2. Install dependencies: npm install and bower install
  3. Run: grunt
  4. Make your changes
  5. Submit pull request