RGraph: HTML5 Javascript charts library - Gauge charts documentation
Gauge charts are another variant of the Odometer/Meter and may be more suited to your design.
The example file is here.
<script>
window.onload = function ()
{
var gauge = new RGraph.Gauge('cvs', 0, 100, 46);
gauge.Set('chart.title', 'Bandwidth');
gauge.Draw();
}
</script>
Properties
You can use these properties to control how the Gauge chart apears. You can set them by using the Set() method. Eg:
myGauge.Set('name', 'value');
Margins
chart.gutter.left
The left gutter of the chart.
Default: 5
chart.gutter.right
The right gutter of the chart.
Default: 5
chart.gutter.top
The top gutter of the chart.
Default: 5
chart.gutter.bottom
The bottom gutter of the chart.
Default: 5
Labels and text
chart.text.font
The font that is used for the text.
Default: Verdana
chart.text.color
The color of the text.
Default: #666
chart.text.size
The size of the text
Default: 10
Titles
chart.title
The title of the chart, if any.
Default: (An empty string)
chart.title.font
The font that the title is rendered in. If not specified the chart.text.font setting is used (usually Verdana)
Default: Verdana
chart.title.size
The size of the title. If not specified the size is usually 2pt bigger than the chart.text.size setting.
Default: 14
chart.title.bold
Whather the title is bold or not.
Default: true
chart.title.color
The color that the title is rendered in.
Default: #333
Scale
chart.scale.decimals
The number of decimals used in the labels
Default: 0
chart.units.pre
The units that the Y axis is measured in. This string is displayed BEFORE the actual number, allowing you to specify values such as "$50".
Default: '' (An empty string)
chart.units.post
The units that the Y axis is measured in. This string is displayed AFTER the actual number, allowing you to specify values such as "50ms".
Default: '' (An empty string)
Colors
chart.red.start
The point at which the red area starts.
Default: 90% of the max
chart.red.color
The red color.
Default: #DC3912
chart.yellow.color
The yellow color.
Default: #FF9900
chart.green.end
The point at which the green area ends.
Default: 70% of the max
chart.green.color
The green color.
Default: rgba(0,0,0,0)
Needle
chart.needle.tail
Whether the tail for the needle is shown.
Default: false
Miscellaneous
chart.border.width
The width of the border that goes around the Gauge.
Default: 10
