<script>
window.onload = function ()
{
// Create the chart. The values are: the canvas tag ID, the minimum, the maximum and the actual value.
var gauge = new RGraph.Gauge('cvs', 0, 100, 46);
// Configure the chart to appear as wished
gauge.Set('chart.title', 'Bandwidth');
// Now call the .Draw() method to draw the chart.
gauge.Draw();
}
</script>
chart.centerx If you want to totally override the positioning of the chart (eg you may have multiple charts on one canvas) you can do it with this. Default: null
chart.centery If you want to totally override the positioning of the chart (eg you may have multiple charts on one canvas) you can do it with this. Default: null
chart.radius If you want to totally override the size of the chart (eg you may have multiple charts on one canvas) you can do it with this. Remember that this is the RADIUS and NOT the DIAMETER. Default: null
Margins
chart.gutter.left The left gutter of the chart, (the gutter is where the labels and title are)). Default: 5
chart.gutter.right The right gutter of the chart, (the gutter is where the labels and title are). Default: 5
chart.gutter.top The top gutter of the chart, (the gutter is where the labels and title are). Default: 5
chart.gutter.bottom The bottom gutter of the chart, (the gutter is where the labels and title are). Default: 5
Background
chart.background.color The background color of the chart. Default: white
chart.background.gradient If true then a subtle gradient is drawn over the background. Alternatively you can leave this as false and set the background color to your own gradient. Default: false
Labels and text
chart.text.font The font that is used for the text. Default: Arial
chart.text.color The color of the text. Default: #666
chart.text.size The size of the text Default: 10
chart.labels.count This controls the number of labels shown on the Gauge. Default: 10
Titles
chart.title.top The top title of the chart, if any. Default: (An empty string)
chart.title.top.font The font that the top title is rendered in. If not specified the chart.text.font setting is used (usually Arial) Default: Arial
chart.title.top.size The size of the top title. If not specified the size is usually 2pt bigger than the chart.text.size setting. Default: 14
chart.title.top.bold Whether the top title is bold or not. Default: true
chart.title.top.color The color that the top title is rendered in. Default: #333
chart.title.top.pos If set this number is multiplied with the radius to give the Y position of the title. This allows to totally override the Y position of the title. Default: null
chart.title.bottom The bottom title of the chart, if any. Default: (An empty string)
chart.title.bottom.font The font that the bottom title is rendered in. If not specified the chart.text.font setting is used (usually Arial) Default: Arial
chart.title.bottom.size The size of the bottom title. If not specified the size is usually 2pt bigger than the chart.text.size setting. Default: 14
chart.title.bottom.bold Whether the bottom title is bold or not. Default: true
chart.title.bottom.color The color that the bottom title is rendered in. Default: #333
chart.title.bottom.pos If set this number is multiplied with the radius to give the Y position of the title. This allows to totally override the Y position of the title. Default: null
Scale
chart.scale.decimals The number of decimal places to display for the Y scale. Default: 0
chart.scale.point The character used as the decimal point. Default: .
chart.scale.thousand The character used as the thousand separator Default: ,
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)
chart.border.outer This is the color of the outer border. Default: #ccc
chart.border.inner This is the color of the inner border. Default: #f1f1f1
chart.border.outline This is the color of the border around the Gauge. Default: black
Shadow
chart.shadow Whether a drop shadow is applied. Default: true
chart.shadow.color The color of the shadow. Default: gray
chart.shadow.offsetx The X offset of the shadow. Default: 0
chart.shadow.offsety The Y offset of the shadow. Default: 0
chart.shadow.blur The severity of the shadow blurring effect. Default: 15
Needle
chart.needle.tail Whether the tail for the needle is shown. Default: false
chart.needle.color This is the color of the needle. Default: #D5604D
chart.needle.size This is the size of the needle(s). This can be an array of numbers or just a single number. Default: null
chart.needle.colors This is the color(s) of the needle(s). Default: ['#D5604D', 'red', 'green', 'yellow']
chart.needle.type This controls the appearance of the needles. It can be triangle or line. Default: triangle
chart.centerpin.color This is the color used in the centerpin gradient coloring. Default: blue
chart.centerpin.radius This is ths radius of the centerpin. Default: null
Interactive Features
chart.adjustable You can make the Gauge interactively adjustable by setting this to true. Default: false
Miscellaneous
chart.border.width The width of the border that goes around the Gauge. Default: 10
chart.tickmarks.small The number of small tickmarks on the chart. Default: 25
chart.tickmarks.small.color The color of the small tickmarks on the chart. Default: black
chart.tickmarks.big The number of big tickmarks on the chart. If you specify this you will actually get one more than the number of tickmarks than you specify. So if you specify 5, you'll get 6 tickmarks because of the end tickmarks. Default: 25
chart.tickmarks.big.color The color of the big tickmarks on the chart. Default: black
chart.border.gradient This determines whether the Gauge chart has a graduated border. Note: This can cause effects to run slowly in some browsers. Default: false
Zoom
chart.zoom.factor This is the factor that the chart will be zoomed by (bigger values means more zoom) Default: 1.5
chart.zoom.fade.in Whether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode. Default: true
chart.zoom.fade.out Whether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode. Default: true
chart.zoom.hdir The horizontal direction of the zoom. Possible values are: left, center, right Default: right
chart.zoom.vdir The vertical direction of the zoom. Possible values are: up, center, down Default: down
chart.zoom.delay The delay (in milliseconds) between frames. Default: 50
chart.zoom.frames The number of frames in the zoom animation. Default: 10
chart.zoom.shadow Whether or not the zoomed canvas has a shadow or not. Default: true
Methods
obj.Get(name)
An accessor that you can use to retrieve the value of properties.
obj.Set(name, value)
An accessor that you can use to set the value of properties.
obj.getValue(event)
This method can be used to get the value at a particular point (eg in a click or other event listener). That value could
then be used to set the value of the Gauge. Like this:
myGauge.canvas.onmousedown = function (e)
{
var obj = e.target.__object__;
var value = obj.getValue(e);
obj.value = value;
RGraph.Effects.Gauge.Grow(obj);
}
obj.getAngle(value)
This method can be used to get an appropriate angle for a value when you're doing custom drawing on the chart. It
returns null if the value is out of range.
