Skip to content
Sparkline directive using AngularJs and SVG with no other dependencies.
CoffeeScript CSS HTML
Find file
Latest commit fa6e2ce @camjc camjc Merge pull request #8 from Adslot/package-json-and-dev-deps
Package json and dev deps
Failed to load latest commit information.
tests
.gitignore
LICENSE
README.md Update README.md for slicey
coffeelint.json use npm run build, package.json and dev deps
examples.png
mixin.styl
package.json
slicey-examples.png
slicey.coffee
slicey.jade CR fixups plus change slicey to radians
slicey.styl
sparky.coffee
sparky.jade Initial Commit
sparky.styl use npm run build, package.json and dev deps
variable.styl use npm run build, package.json and dev deps

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)

Something went wrong with that request. Please try again.