Important: The RGraph website has recently experienced some downtime. It's now back up and available once more but keep this in mind as you may experience errors or oddities when browsing the site.

Gauge charts documentation

 

Example

<script>
    $(document).ready(function ()
    {
        // Create the chart.
        var gauge = new RGraph.Gauge({
            id: 'cvs',
            min: 0,
            max: 100,
            value: 46,
            options: {
                title: 'Bandwidth'
            }
        }).draw()
    })
</script>

The example file is here.

 

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');

 

Chart configuration

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

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

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

angles.start
You can specify the angle that the Gauge should start at with this property. Remember that there are three "constants" available for you to use: RGraph.HALFPI, RGraph.PI, RGraph.TWOPI
Default: null

angles.end
You can specify the angle that the Gauge should end at with this property. Remember that there are three "constants" available for you to use: RGraph.HALFPI, RGraph.PI, RGraph.TWOPI
Default: null

 

Margins

gutter.left
The left gutter of the chart, (the gutter is where the labels and title are)).
Default: 5

gutter.right
The right gutter of the chart, (the gutter is where the labels and title are).
Default: 5

gutter.top
The top gutter of the chart, (the gutter is where the labels and title are).
Default: 5

gutter.bottom
The bottom gutter of the chart, (the gutter is where the labels and title are).
Default: 5

 

Background

background.color
The background color of the chart.
Default: white

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

text.font
The font that is used for the text.
Default: Arial

text.color
The color of the text.
Default: #666

text.size
The size of the text
Default: 10

labels.count
This controls the number of labels shown on the Gauge.
Default: 5

value.text
This allows you to show a text label under the pointer (by default) that tells you what the value is (http://www.rgraph.net/fiddle/view/a-gauge-chart-with-a-center-label).
Default: false

value.text.units.pre
Units that are added to the center label (before the number)
Default: (an empty string)

value.text.units.post
Units that are added to the center label (after the number)
Default: (an empty string)

 

Titles

title.top
The top title of the chart, if any.
Default: (An empty string)

title.top.font
The font that the top title is rendered in. If not specified the text.font setting is used (usually Arial)
Default: Arial

title.top.size
The size of the top title. If not specified the size is usually 2pt bigger than the text.size setting.
Default: 14

title.top.bold
Whether the top title is bold or not.
Default: true

title.top.color
The color that the top title is rendered in.
Default: #333

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

title.bottom
The bottom title of the chart, if any.
Default: (An empty string)

title.bottom.font
The font that the bottom title is rendered in. If not specified the text.font setting is used (usually Arial)
Default: Arial

title.bottom.size
The size of the bottom title. If not specified the size is usually 2pt bigger than the text.size setting.
Default: 14

title.bottom.bold
Whether the bottom title is bold or not.
Default: true

title.bottom.color
The color that the bottom title is rendered in.
Default: #333

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

scale.decimals
The number of decimal places to display for the Y scale.
Default: 0

scale.point
The character used as the decimal point.
Default: .

scale.thousand
The character used as the thousand separator
Default: ,

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)

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

red.start
The point at which the red area starts.
Default: 90% of the max

red.color
The red color.
Default: #DC3912

yellow.color
The yellow color.
Default: #FF9900

green.end
The point at which the green area ends.
Default: 70% of the max

green.color
The green color.
Default: rgba(0,0,0,0)

border.outer
This is the color of the outer border.
Default: #ccc

border.inner
This is the color of the inner border.
Default: #f1f1f1

border.outline
This is the color of the border around the Gauge.
Default: black

colors.ranges
With this you can totally control the colors used on the chart - eg [[-100,-90, 'red'], [-90, -70,'yellow'], [-70, 70, '#0f0'], [70, 90, 'yellow'], [90,100,'red']]
Default: null

 

Shadow

shadow
Whether a drop shadow is applied.
Default: true

shadow.color
The color of the shadow.
Default: gray

shadow.offsetx
The X offset of the shadow.
Default: 0

shadow.offsety
The Y offset of the shadow.
Default: 0

shadow.blur
The severity of the shadow blurring effect.
Default: 15

 

Needle

needle.tail
Whether the tail for the needle is shown.
Default: false

needle.color
This is the color of the needle.
Default: #D5604D

needle.size
This is the size of the needle(s). This can be an array of numbers or just a single number.
Default: null

needle.colors
This is the color(s) of the needle(s).
Default: ['#D5604D', 'red', 'green', 'yellow']

needle.type
This controls the appearance of the needles. It can be triangle or line.
Default: triangle

centerpin.color
This is the color used in the centerpin gradient coloring.
Default: blue

centerpin.radius
This is ths radius of the centerpin.
Default: null

 

Interactive Features

adjustable
You can make the Gauge interactively adjustable by setting this to true.
Default: false

 

Miscellaneous

border.width
The width of the border that goes around the Gauge.
Default: 10

tickmarks.small
The number of small tickmarks on the chart.
Default: 25

tickmarks.small.color
The color of the small tickmarks on the chart.
Default: black

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

tickmarks.big.color
The color of the big tickmarks on the chart.
Default: black

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

clearto
This is used in animations and effects as the default color to use when the canvas.
Default: null

 

Zoom

zoom.factor
This is the factor that the chart will be zoomed by (bigger values means more zoom)
Default: 1.5

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

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

zoom.hdir
The horizontal direction of the zoom. Possible values are: left, center, right
Default: right

zoom.vdir
The vertical direction of the zoom. Possible values are: up, center, down
Default: down

zoom.delay
The delay (in milliseconds) between frames.
Default: 50

zoom.frames
The number of frames in the zoom animation.
Default: 10

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;
    
    obj.grow();
}

 

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.

 

obj.on(event, func)

This method can be used to set an event listener on an object. It operates in a similar way to the jQuery .on() function - the first argument is the event you wish to attach to and the second is the handler function. For example:

.on('draw', function (obj)
{
    // Put event code here
});

The function is useful if you use method chaining when creating your charts:

var obj = new RGraph.Gauge('cvs', 0,100,52)
    .on('mousemove', function (e, shape)
    {
        e.target.style.cursor = 'pointer';
    })
    .on('click', function (e, shape)
    {
        // Handle click event
    })
    .draw()

 

Animation Effects

These effects are available and can be used instead of the .draw() function. There are also generic effects available which you can see here: Generic effects and transitions
<script>
    /**
    * Optional callback function that's called when the effect is complete
    */
    function myCallback (obj)
    {
        // ...
    }

    var obj = new RGraph.Gauge({
        id: 'cvs',
        min: 0,
        max: 100,
        value: 56
        options: {
        }
    }).grow({frames: 60}, myCallback)
</script>