Charts

Gauge

gauge = new GaugeChart
    el       : $('.pillow-gauge')
    label    : 'Expansion rate'
    max      : 100
    avg      : 65
    value    : 75
    maxLabel : '100%'

gauge.render()

Properties

el

null

jQuery element used to render the chart.

value

null

Value to show on the chart.

unit

%

Unit displayed next to value.

label

""

Label for the chart.

max

100

Defines the max scale value.

maxLabel

null

Label displayed as max value; leave null to hide it.

avg

null

Value for the average marker.

avgType

notch

Type of average marker. Can be "notch" or "shadow".

animationDuration

1500

Duration in milliseconds.

autoAnimate

yes

Set yes to automatically play animation when rendered.

formatFn

null

Custom value formatting function.

Shadow notch

gauge = new GaugeChart
    avg     : 65
    avgType : 'shadow'
    // other properties are omitted

gauge.render()

Dimensions

To specify dimensions of a gauge chart use gauge-w*-h* classes.

Colors

Additiona chart colors are supported for white and black backgrounds.

.orange

.light-blue

.dark-blue

.grey

.purple

.red

.egg-blue

.black-background

Not available state

To render a gauge chart as n/a simply add the gauge-not-available class to it and omit the value attribute.