$.jqplot.MeterGaugeRenderer

Plugin renderer to draw a meter gauge chart.

Data consists of a single series with 1 data point to position the gauge needle.

To use this renderer, you need to include the meter gauge renderer plugin, for example:

>     <script type="text/javascript" src="plugins/jqplot.meterGaugeRenderer.js"></script>

Properties described here are passed into the $.jqplot function as options on the series renderer. For example:

>     plot0 = $.jqplot('chart0',[[18]],{
>         title: 'Network Speed',
>         seriesDefaults: {
>             renderer: $.jqplot.MeterGaugeRenderer,
>             rendererOptions: {
>                 label: 'MB/s'
>             }
>         }
>     });

A meterGauge plot does not support events.

Summary

$.jqplot.MeterGaugeRenderer | Plugin renderer to draw a meter gauge chart.
Properties |
diameter | Outer diameter of the meterGauge, auto computed by default
padding | padding between the meterGauge and plot edges, auto calculated by default.
shadowOffset | offset of the shadow from the gauge ring and offset of each succesive stroke of the shadow from the last.
shadowAlpha | transparency of the shadow (0 = transparent, 1 = opaque)
shadowDepth | number of strokes to apply to the shadow, each stroke offset shadowOffset from the last.
background | background color of the inside of the gauge.
ringColor | color of the outer ring, hub, and needle of the gauge.
tickColor | color of the tick marks around the gauge.
ringWidth | width of the ring around the gauge.
min | Minimum value on the gauge.
max | Maximum value on the gauge.
ticks | Array of tick values.
showTicks | true to show ticks around gauge.
showTickLabels | true to show tick labels next to ticks.
label | A gauge label like ‘kph’ or ‘Volts’
labelHeightAdjust | Number of Pixels to offset the label up (-) or down (+) from its default position.
labelPosition | Where to position the label, either ‘inside’ or ‘bottom’.
intervals | Array of ranges to be drawn around the gauge.
intervalColors | Array of colors to use for the intervals.
intervalInnerRadius | Radius of the inner circle of the interval ring.
intervalOuterRadius | Radius of the outer circle of the interval ring.
tickSpacing | Degrees between ticks.
hubRadius | Radius of the hub at the bottom center of gauge which the needle attaches to.
tickPadding | padding of the tick marks to the outer ring and the tick labels to marks.
needleThickness | Maximum thickness the needle.
needlePad | Padding between needle and inner edge of the ring when the needle is at the min or max gauge value.
pegNeedle | True will stop needle just below/above the min/max values if data is below/above min/max, as if the meter is “pegged”.

### Properties

### diameter

> this.diameter = null

Outer diameter of the meterGauge, auto computed by default

### padding

> this.padding = null

padding between the meterGauge and plot edges, auto calculated by default.

### shadowOffset

> this.shadowOffset = 2

offset of the shadow from the gauge ring and offset of each succesive stroke of the shadow from the last.

### shadowAlpha

> this.shadowAlpha = 0.07

transparency of the shadow (0 = transparent, 1 = opaque)

### shadowDepth

> this.shadowDepth = 4

number of strokes to apply to the shadow, each stroke offset shadowOffset from the last.

### background

> this.background = "#efefef"

background color of the inside of the gauge.

### ringColor

> this.ringColor = "#BBC6D0"

color of the outer ring, hub, and needle of the gauge.

### tickColor

> this.tickColor = "989898"

color of the tick marks around the gauge.

### ringWidth

> this.ringWidth = null

width of the ring around the gauge. Auto computed by default.

### min

> this.min

Minimum value on the gauge. Auto computed by default

### max

> this.max

Maximum value on the gauge. Auto computed by default

### ticks

> this.ticks = []

Array of tick values. Auto computed by default.

### showTicks

> this.showTicks = true

true to show ticks around gauge.

### showTickLabels

> this.showTickLabels = true

true to show tick labels next to ticks.

### label

> this.label = null

A gauge label like ‘kph’ or ‘Volts’

### labelHeightAdjust

> this.labelHeightAdjust = 0

Number of Pixels to offset the label up (-) or down (+) from its default position.

### labelPosition

> this.labelPosition = 'inside'

Where to position the label, either ‘inside’ or ‘bottom’.

### intervals

> this.intervals = []

Array of ranges to be drawn around the gauge. Array of form:

>     [value1, value2, ...]

indicating the values for the first, second, ... intervals.

### intervalColors

> this.intervalColors = [ "#4bb2c5", "#EAA228", "#c5b47f", "#579575", "#839557", "#958c12", "#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc", "#c747a3", "#cddf54", "#FBD178", "#26B4E3", "#bd70c7"]

Array of colors to use for the intervals.

### intervalInnerRadius

> this.intervalInnerRadius = null

Radius of the inner circle of the interval ring.

### intervalOuterRadius

> this.intervalOuterRadius = null

Radius of the outer circle of the interval ring.

### tickSpacing

> this.tickSpacing = 30

Degrees between ticks. This is a target number, if incompatible span and ticks are supplied, a suitable spacing close to this value will be computed.

### hubRadius

> this.hubRadius = null

Radius of the hub at the bottom center of gauge which the needle attaches to. Auto computed by default

### tickPadding

> this.tickPadding = null

padding of the tick marks to the outer ring and the tick labels to marks. Auto computed by default.

### needleThickness

> this.needleThickness = null

Maximum thickness the needle. Auto computed by default.

### needlePad

> this.needlePad = 6

Padding between needle and inner edge of the ring when the needle is at the min or max gauge value.

### pegNeedle

> this.pegNeedle = true

True will stop needle just below/above the min/max values if data is below/above min/max, as if the meter is “pegged”.

> this.diameter = null

Outer diameter of the meterGauge, auto computed by default

> this.padding = null

padding between the meterGauge and plot edges, auto calculated by default.

> this.shadowOffset = 2

offset of the shadow from the gauge ring and offset of each succesive stroke of the shadow from the last.

> this.shadowAlpha = 0.07

transparency of the shadow (0 = transparent, 1 = opaque)

> this.shadowDepth = 4

number of strokes to apply to the shadow, each stroke offset shadowOffset from the last.

> this.background = "#efefef"

background color of the inside of the gauge.

> this.ringColor = "#BBC6D0"

color of the outer ring, hub, and needle of the gauge.

> this.tickColor = "989898"

color of the tick marks around the gauge.

> this.ringWidth = null

width of the ring around the gauge.

> this.min

Minimum value on the gauge.

> this.max

Maximum value on the gauge.

> this.ticks = []

Array of tick values.

> this.showTicks = true

true to show ticks around gauge.

> this.showTickLabels = true

true to show tick labels next to ticks.

> this.label = null

A gauge label like ‘kph’ or ‘Volts’

> this.labelHeightAdjust = 0

Number of Pixels to offset the label up (-) or down (+) from its default position.

> this.labelPosition = 'inside'

Where to position the label, either ‘inside’ or ‘bottom’.

> this.intervals = []

Array of ranges to be drawn around the gauge.

> this.intervalColors = [ "#4bb2c5", "#EAA228", "#c5b47f", "#579575", "#839557", "#958c12", "#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc", "#c747a3", "#cddf54", "#FBD178", "#26B4E3", "#bd70c7"]

Array of colors to use for the intervals.

> this.intervalInnerRadius = null

Radius of the inner circle of the interval ring.

> this.intervalOuterRadius = null

Radius of the outer circle of the interval ring.

> this.tickSpacing = 30

Degrees between ticks.

> this.hubRadius = null

Radius of the hub at the bottom center of gauge which the needle attaches to.

> this.tickPadding = null

padding of the tick marks to the outer ring and the tick labels to marks.

> this.needleThickness = null

Maximum thickness the needle.

> this.needlePad = 6

Padding between needle and inner edge of the ring when the needle is at the min or max gauge value.

> this.pegNeedle = true

True will stop needle just below/above the min/max values if data is below/above min/max, as if the meter is “pegged”.
Close