https://github.com/projectweekend/angular-peity

An AngularJS directive for using Peity charts
https://github.com/projectweekend/angular-peity

Last synced: about 1 year ago
JSON representation

An AngularJS directive for using Peity charts

• Host: GitHub
• URL: https://github.com/projectweekend/angular-peity
• Owner: projectweekend
• License: mit
• Created: 2014-04-03T03:30:26.000Z (about 12 years ago)
• Default Branch: master
• Last Pushed: 2018-03-13T13:43:51.000Z (over 8 years ago)
• Last Synced: 2025-03-27T15:53:21.085Z (over 1 year ago)
• Size: 56.6 KB
• Stars: 33
• Watchers: 2
• Forks: 14
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
[Peity](http://benpickles.github.io/peity/) is a jQuery plugin that converts an element's content into simple `` charts. This is an AngularJS directive that makes them easy to use in any project by binding data and options to a controller.

## Installation

This project, along with all of its dependencies are installed with [Bower](http://bower.io/): `bower install angular-peity`.

## Set up

If you're familar with how to include third-party modules in AngularJS, then you can probably skip this section. If you're new to the framework, this should help.

### Step 1

Include the file before the main app file:

~~~html

~~~

### Step 3

Add `angular-peity` to the app requirements (`/js/app.js`).

~~~javascript

var app = angular.module('myApp', [

    'myApp.controllers',

    'myApp.filters',

    'myApp.services',

    // 3rd party dependencies

    'angular-peity'

]);

~~~

## Use it

This module creates three custom directives (tags) that can be used anywhere in your templates. Each directive uses two attributes that are bound to properties of a controller.

* **data** - This attribute is required and is used to supply the data points that the chart will display in an array.

* **options** - This attribute is not required. If used it should be an object with property names that match the available options for the type of chart being used. Information about specific options for each chart type is available at: [http://benpickles.github.io/peity/](http://benpickles.github.io/peity/).

#### Controller Example

~~~javascript

var cMod = angular.module( 'myApp.controllers', [] );

cMod.controller( 'ChartCtrl', function ( $scope ) {

    /*

        This example is over simplified to demonstrate the relationship

        between the 'controller' and the 'template' with regard to loading

        the 'icon' value. Hopefully, you will be loading your controller with

        data from an actual API response. :)

    */

    $scope.PieChart = {

        data: [1, 2, 3, 4],

        options: {

            diameter: 150

        }

    };

    $scope.BarChart = {

        data: [1, 2, 3, 4],

        options: {

            width: 150,

            height: 150

        }

    };

    $scope.LineChart = {

        data: [1, 2, 3, 4, 3, 1],

        options: {

            width: 150,

            stroke: "#eee"

        }

    };

} );

~~~

#### Template Example

~~~html

~~~