Skip to content
This repository has been archived by the owner. It is now read-only.
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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)

About

Sparkline directive using AngularJs and SVG with no other dependencies.

Resources

License

Releases

No releases published

Packages

No packages published