Sparkline directive using AngularJs and SVG with no other dependencies.
CoffeeScript CSS HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
tests
.gitignore
LICENSE
README.md
coffeelint.json
examples.png
mixin.styl
package.json
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)