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.MeterGaugeRendererPlugin renderer to draw a meter gauge chart.
Properties
diameterOuter diameter of the meterGauge, auto computed by default
paddingpadding between the meterGauge and plot edges, auto calculated by default.
shadowOffsetoffset of the shadow from the gauge ring and offset of each succesive stroke of the shadow from the last.
shadowAlphatransparency of the shadow (0 = transparent, 1 = opaque)
shadowDepthnumber of strokes to apply to the shadow, each stroke offset shadowOffset from the last.
backgroundbackground color of the inside of the gauge.
ringColorcolor of the outer ring, hub, and needle of the gauge.
tickColorcolor of the tick marks around the gauge.
ringWidthwidth of the ring around the gauge.
minMinimum value on the gauge.
maxMaximum value on the gauge.
ticksArray of tick values.
showTickstrue to show ticks around gauge.
showTickLabelstrue to show tick labels next to ticks.
labelA gauge label like ‘kph’ or ‘Volts’
labelHeightAdjustNumber of Pixels to offset the label up (-) or down (+) from its default position.
labelPositionWhere to position the label, either ‘inside’ or ‘bottom’.
intervalsArray of ranges to be drawn around the gauge.
intervalColorsArray of colors to use for the intervals.
intervalInnerRadiusRadius of the inner circle of the interval ring.
intervalOuterRadiusRadius of the outer circle of the interval ring.
tickSpacingDegrees between ticks.
hubRadiusRadius of the hub at the bottom center of gauge which the needle attaches to.
tickPaddingpadding of the tick marks to the outer ring and the tick labels to marks.
needleThicknessMaximum thickness the needle.
needlePadPadding between needle and inner edge of the ring when the needle is at the min or max gauge value.
pegNeedleTrue 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