https://github.com/lennonjesus/angular-peity-charts

Angular Peity Charts
https://github.com/lennonjesus/angular-peity-charts

Last synced: about 7 hours ago
JSON representation

Angular Peity Charts

• Host: GitHub
• URL: https://github.com/lennonjesus/angular-peity-charts
• Owner: lennonjesus
• License: mit
• Created: 2015-12-29T17:40:27.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2016-10-12T23:28:22.000Z (about 8 years ago)
• Last Synced: 2024-11-08T07:20:20.048Z (11 days ago)
• Language: JavaScript
• Homepage: http://lennonjesus.github.io/angular-peity-charts
• Size: 15.6 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
[Peity](http://benpickles.github.io/peity/) is a [jQuery](https://jquery.com/) plugin that converts an element's content into simple `` charts.

This project provides [AngularJS](https://angularjs.org/) directives 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-charts`.

## Set up

If you're familiar 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-charts` to your app dependencies.

```javascript

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

    'angular-peity-charts'

]);

```

## Use it

This module creates four 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"

        }

    };

    $scope.DonutChart = {

        data: [1, 4]

    };

} );

```

#### Template Example

```html

```

## Acknowledgments

See the [LICENSES.md](LICENSES.md) file for copies of the referenced licenses.

Inspired from Benjamin ["maggiben"](https://github.com/maggiben) [ng-peity](https://github.com/maggiben/ng-peity)