jqplot.meterGaugeRenderer.js

Summary

jqplot.meterGaugeRenderer.js
$.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”.

$.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

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”.