pie-chart

WebJar for pie-chart

License	MIT
Categories	Charts User Interface
GroupId	org.webjars.bower
ArtifactId	n3-charts.pie-chart
Last Version	1.0.0
Release Date	Apr 14, 2015
Type	jar
Description	pie-chart WebJar for pie-chart
Project URL	http://webjars.org
Source Code Management	https://github.com/n3-charts/pie-chart

Download n3-charts.pie-chart

Filename	Size
n3-charts.pie-chart-1.0.0.pom
n3-charts.pie-chart-1.0.0.jar	29 KB
n3-charts.pie-chart-1.0.0-sources.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.bower/n3-charts.pie-chart/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>n3-charts.pie-chart</artifactId>
    <version>1.0.0</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.bower/n3-charts.pie-chart/
implementation 'org.webjars.bower:n3-charts.pie-chart:1.0.0'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.bower/n3-charts.pie-chart/
implementation ("org.webjars.bower:n3-charts.pie-chart:1.0.0")

Apache Buildr

'org.webjars.bower:n3-charts.pie-chart:jar:1.0.0'

Apache Ivy

<dependency org="org.webjars.bower" name="n3-charts.pie-chart" rev="1.0.0">
  <artifact name="n3-charts.pie-chart" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.bower', module='n3-charts.pie-chart', version='1.0.0')
)

Scala SBT

libraryDependencies += "org.webjars.bower" % "n3-charts.pie-chart" % "1.0.0"

Leiningen

[org.webjars.bower/n3-charts.pie-chart "1.0.0"]

Dependencies

compile (2)

Group / Artifact	Type	Version
org.webjars.bower : d3	jar	[3.1.7,3.2)
org.webjars.bower : angular	jar	[1.0.6,1.1)

Project Modules

There are no modules declared in this project.

n3-charts.pie-chart

Yummy pies and donuts for AngularJS applications. Built on top of the wonderful D3.js library.

Here is a demo page.

How to install

• Copy pie-chart.min.js wherever you want
• Reference it in your index.html file
• Reference the module in your app file : angular.module('myApp', [ 'n3-pie-chart' ])

How to use

A pie chart is called using this syntax :

<pie-chart data="data" options="options"></pie-chart>

The pie chart directives needs two attributes : data and options. If one is missing, nothing happens.

Data

Your data must be an array. Depending whether you wan a pie/donut or a gauge, the array can contain at least two rows, or only one.

Standard

$scope.data = [
  {label: "one", value: 12.2, color: "red"}, 
  {label: "two", value: 45, color: "#00ff00"},
  {label: "three", value: 10, color: "rgb(0, 0, 255)"}
];

Gauge

$scope.gauge_data = [
  {label: "CPU", value: 75, suffix: "%", color: "steelblue"}
];

• complementBrightness : optional (disabled by default). Expects a number between 0 and 100. If set, it will take the color of the chart, increase the brightness by a given percentage and use the new color for the complement.
• colorComplement : optional (default is "white"). Defines the color of the complement. Will be ignored if complementBrightness is set.

Options

Options must be an object. Depending whether you want a pie/donut or a gauge, additional settings can be required.

Standard

$scope.options = {thickness: 10};

• thickness : optional (default is 10). Defines the chart's thickness and has an impact on the legend display (thicker chart means less space for legend).

Gauge

$scope.gauge_options = {thickness: 5, mode: "gauge", total: 100};

• thickness : optional (default is 10). Defines the chart's thickness and has an impact on the legend display (thicker chart means less space for legend).
• mode : optional (default is ""). Can be "gauge" or anything else (but anything else will default to standard pie/donut mode). "gauge" only works when there is exactly one data row in the chart's data attribute.
• total : optional (default is 100). Ignored if mode is not "gauge". Make the chart able to display the data relatively to a maximum (for instance, if you want to display a percentage, the maximum should be 100).

Building

Fetch the repo :

$ git clone https://github.com/angular-d3/pie-chart.git

Install stuff :

$ npm install

Install moar stuff :

$ bower install

Install teh uterz stuff :

$ grunt

Hack.

Testing

AngularJS is designed to be testable, and so is this project. It has a good coverage rate (between 85% and 95%), and we want to keep it this way.

Making AngularJS charts as easy as pie.

Versions

Version
1.0.0 Apr 14, 2015