Meter Gauge

A meter gauge plot shows a data value in a speedometer style gauge. The "series" in consists of a single data value that positions the needle on the gauge. The span of the gauge will be automatically determined, or can be set with the "min" and "max" values in the "rendererOptions" of the series. The plot below also specifies a chart title and a "label" for the gauge.

For small gauges, it can be desirable to turn off the tick labels by setting the "showTickLabels" option in the rendererOptions to false. Also, colored interval bands can be specified. The interval ranges are specified as an array of values the "intervals" option and custom colors for each interval can be specified with the "intervalColors" option.

The inner and outer radii of the interval band will automatically adjust when tick Labels are turned on. Also, the gauge minimum and maximum can be specified with the "min" and "max" options in the rendererOptions.

The inner and outer radii of the interval band can also be specified with the "intervalInnerRadius" and "intervalOuterRadius" options. In the plot below, the "labelPosition" option was set to "bottom" to put the gauge label below the plot. The "labelHeightAdjust" option was set to -5 to raise the label slightly (5 pixels) to place it closer to the gauge.

The gauge automatically resizes to best fit the container. The font size of the tick labels and gauge labels do not size to the container, however. The font size of the tick labels can be controlled by styling the css ".jqplot-meterGauge-ticks" class and the gauge label by the "jqplot-meterGauge-label" class.

AJAX and JSON Data Loading via Data Renderers
Animated Charts
Animated Dashboard Sample - Filled Line with Log Axis
Area Chart
Area Chart 2
Axis Labels
Axis Labels and Rotated Text
Bar Charts
Bar Colors Example
Bezier Curve Plots
Block Plots
Bubble Charts
Bubble Plots
Candlestick and Open Hi Low Close Charts
Chart Theming
Charts with Fill Between Lines
Cumulative Density Function Chart
Dashed Lines with Smoothing
Data Point Highlighting, Tooltips and Cursor Tracking
Data Point labels
Date Axes
Date Axes 2
Date Axes, Rotated Labels and Zooming
Draw Lines on Plots - Canvas Overlay
Draw Rectangles on Plots
Engel Curves
Error Bands and Confidence Intervals
Filled (Area) Charts
Force Plot to Have Tick at 0 or 100
Hidden Plots
Highlighting, Dragging Points, Cursor and Trend Lines
Line Charts and Options
Lorenz Curves
Mekko Charts
Meter Gauge
Open Hi Low Close and Candlestick Charts
Pie Charts and Options
Pie Charts and Options 2
Pie and Donut Charts
Plot Creation with jQuery Selectors
Plot Zooming and Cursor Control
Probability Density Function Chart
Pyramid Chart By Age
Pyramid Charts
Pyramid Charts 2
Quintile Pyramid Charts
Resizable Plots
Rotated Labels and Font Styling
Smoothed Lines
Vertical and Horizontal Bar Charts
Waterfall Charts
Waterfall Charts 2
Zoom Options
Zoom Proxy - Control one plot from another
Zooming
Zooming with Date and Log Axes