Sparkline directive using AngularJs and SVG with no other dependencies.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
tests CR fixups plus change slicey to radians Jul 16, 2014
.gitignore
LICENSE
README.md Update README.md for slicey Jul 16, 2014
coffeelint.json
examples.png
mixin.styl
package.json use npm run build, package.json and dev deps Apr 27, 2015
slicey-examples.png
slicey.coffee
slicey.jade
slicey.styl
sparky.coffee
sparky.jade
sparky.styl
variable.styl

README.md

Sparky

Sparkline directive using AngularJs and SVG with no other dependencies.

ScreenShot

Line graphs
  • Multiple lines.
  • Optional range marked on graph.
  • Overall or per line colors.
  • Fill the area under the line instead of drawing the line.
Bar graphs
  • Shows negative and positive items.
  • Overall colors or positive, neutral, negative colors.
All graphs
  • Scale to max value (E.g. 6 out of 10) or leave as automatic.
  • Optionally scale to number of points (E.g. 15 days out of 31 days) or leave as automatic.

Usage:

<sparky datasets='[[0,1,2],[3,4,5]]'> datasets takes an array of arrays.

Optional attributes

bar='true'

vertical-max='10'

point-count='30'

range-bottom='3'

range-top='4'

w='500' (in pixels)

h='200' (in pixels)

color-index='4' (override the color class applied, used if you want colors to match between a multiple line graph and a single line graph.)

filled='true'

Slicey

Sparkline directive using AngularJs and SVG with no other dependencies.

ScreenShot

Pie Charts
  • Donut charts.
  • Pass in statuses with the data to assign classes for coloring.
  • Automagically normalises data into percentages of the circle.

Usage:

<slicey dataset='[{status: 'warning', value: 10},{status: 'positive', value: 5}]'> dataset takes an array of objects.

Optional attributes

donut='true'

diameter='100' (in pixels)