https://github.com/wasilak/angular-raphael-gauge

Nice and simple gauge Raphael.js for AngularJS
https://github.com/wasilak/angular-raphael-gauge

Last synced: about 9 hours ago
JSON representation

Nice and simple gauge Raphael.js for AngularJS

• Host: GitHub
• URL: https://github.com/wasilak/angular-raphael-gauge
• Owner: wasilak
• License: mit
• Created: 2014-11-27T07:03:34.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2024-04-25T07:47:49.000Z (7 months ago)
• Last Synced: 2024-04-25T15:47:59.063Z (7 months ago)
• Language: HTML
• Size: 807 KB
• Stars: 9
• Watchers: 4
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
jQuery Raphael Gauge

=============

[![Code Climate](https://codeclimate.com/github/wasilak/angular-raphael-gauge/badges/gpa.svg)](https://codeclimate.com/github/wasilak/angular-raphael-gauge)

You can see demo [here](http://wasilak.github.io/angular-raphael-gauge/).

Why bother?

-------------------

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 :)

INSTALLATION

-------------------

via bower:

```

bower install angular-raphael-gauge

```

or simply download latest source code from repository: [link](https://github.com/wasilak/angular-raphael-gauge/archive/master.zip)

USAGE

-------------------

Include ```angular-raphael-gauge``` in your HTML file. Remember about including [Raphael.js](http://raphaeljs.com/) and [jQuery]().

```html

```

Next plugin-in ```angular-raphael-gauge``` into your application:

```javascript

var angularDemo = angular.module('angularDemo', ['angular-raphael-gauge']);

```

Now all you have to do is put directive code into HTML file:

```javascript

```

and pass some options via config object in ```$scope```:

```javascript

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](http://wasilak.github.io/angular-raphael-gauge/) for working example.

OPTIONS

-------------------

Here are options available to be set during runtime:

```javascript

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 :/

            };

 ```

Building / Minifing

----------

You can build minified version yourself, by simply using [Grunt](http://gruntjs.com) in project root.

```bash

grunt

```

Contributing

--------------

1. Fork it

2. Create your feature branch (`git checkout -b my-new-feature`)

3. Commit your changes (`git commit -am 'Add some feature'`)

4. Push to the branch (`git push origin my-new-feature`)

5. Create new Pull Request