angular-font-chart

Angularjs Font chart based on Font Awesome

Module License: MIT

Added by: Sam Deering

GitHub

Repository

bahaaldine/angular-font-chart

Stats

Stars: 10

Watchers: 10

Forks: 0

Author

Bahaaldine
Bahaaldine

Module Description

Build Status Built with Grunt

Angular Font Chart

angular-font-chart lets you create awesome charts based on:

  • Font Awesome http://fortawesome.github.io/Font-Awesome/
  • Hubsopt odometer http://github.hubspot.com/odometer/

Demo page

http://bahaaldine.github.io/angular-font-chart

Installation

Install depedencies using bower:

bower install angular-font-chart

Add js libraries to your application:

    ...
    <script src="bower_components/angular-font-chart/dist/angular-font-chart.js"></script>
    <script src="bower_components/odometer/odometer.min.js"></script>
    ...

Add css stylesheets to your application:

    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="bower_components/angular-font-chart/dist/angular-font-chart.min.css"/>
    <link rel="stylesheet" href="bower_components/odometer/themes/odometer-theme-minimal.css"/>

Add ngFontChart module to you application

    ...
    angular
      .module('myAwesomeApp', [
        ...
        'ngFontChart',
        ...
      ])
    ...

Usage

All you need is to place a ngFontChart with its attribute in your view like the following piece of code:

    ...
        <ng-font-chart 
          font="fa fa-facebook"
          value="23"
          start-color="#3b5998"
          end-color="rgba(255,255,255, 0.8)">
        </ng-font-chart> 
    ...

value: the actual chart value, can be dynamically set through controller scope variable, e.g. : value="{{myScopeVariable}}". The value can also be refresh, the transition from one value to the other will be automatically done.

start-color: the start-color is the chart fill color. It's often related to the font awesome icon you are using. The color in the example is the Facebook color.

end-color: the end-color is the chart background color.

Brower compatibility

Chrome: 35 Safari: 7

Module stats last updated: 2015-06-08 00:26:40

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!