You can see demo here.
I needed this kind of Gauge "chart" for one of my projects and it was great opportunity to get some experience in both AngularJS and Raphael.js :)
via bower:
bower install angular-raphael-gauge
or simply download latest source code from repository: link
Include angular-raphael-gauge in your HTML file. Remember about including Raphael.js and jQuery.
<!-- AngularJS -->
<script src="path/to/angular.min.js"></script>
<!-- JQuery -->
<script src="path/to/jquery.min.js"></script>
<!-- Raphael.js -->
<script src="path/to/raphael-min.js"></script>
<!-- angular raphael gauge -->
<script src="path/to/angular-raphael-gauge.min.js"></script>Next plugin-in angular-raphael-gauge into your application:
var angularDemo = angular.module('angularDemo', ['angular-raphael-gauge']);Now all you have to do is put directive code into HTML file:
<raphael-gauge id="gauge1" config="gauge"></raphael-gauge>and pass some options via config object in $scope:
angularDemo.controller('DemoCtrl', ['$scope', function ($scope) {
$scope.gauge = {
name: 'Some data',
opacity: 0.55,
value: 65,
text: 'some cool data'
};
}]);Updating $scope.value will update gauge value and render animation.
That's it! :) See demo for working example.
Here are options available to be set during runtime:
var options = {
name: false, // text under gauge
value: 25, // value
image: false, // path to image (should be square) - it will be under gauge
text: false, // text in the middle of gauge
textColor: '#000000', // text color
arcColor: '#57E0EA', // animated arc color
bgArcColor: '#000', // round background under arc
opacity: false, // arc opacity
duration: 1600, // animation duration
easing: 'bounce' // Raphael easing effect. Don't use backIn or Elastic, they mess up animation :/
};You can build minified version yourself, by simply using Grunt in project root.
grunt- Fork it
- Create your feature branch (
git checkout -b my-new-feature) - Commit your changes (
git commit -am 'Add some feature') - Push to the branch (
git push origin my-new-feature) - Create new Pull Request