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 chart apears. You can set them by including them in the options section of the configuration as above.

 

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

anglesStart
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

anglesEnd
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

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

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

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

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

 

Background

backgroundColor
The background color of the chart.
Default: white

backgroundGradient
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

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

textColor
The color of the text.
Default: #666

textSize
The size of the text
Default: 10

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

valueText
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.html/a-gauge-chart-with-a-center-label).
Default: false

valueTextColor
This allows you to set the color of the text.
Default: black

valueTextBounding
This allows you to turn completely off the bounding box.
Default: black

valueTextBoundingStroke
This allows you to set the fill color of the label. If you don't want a border you can set it to transparent: rgba(0,0,0,0)
Default: black

valueTextBoundingFill
This allows you to set the fill color of the label. If you don't want the label filled you can set it to transparent: rgba(0,0,0,0)
Default: white

valueTextY.pos
This allows you set the vertical positioning of the text. This number is multiplied with radius and then added to the center Y position to get the Y position of the text label.
Default: 0.5

valueTextUnitsPre
Units that are added to the center label (before the number)
Default: (an empty string)

valueTextUnitsPost
Units that are added to the center label (after the number)
Default: (an empty string)

 

Titles

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

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

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

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

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

titleTopPos
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

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

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

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

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

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

titleBottomPos
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

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

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

scaleThousand
The character used as the thousand separator
Default: ,

unitsPre
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)

unitsPost
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

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

redColor
The red color.
Default: #DC3912

yellowColor
The yellow color.
Default: #FF9900

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

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

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

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

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

colorsRanges
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

shadowColor
The color of the shadow.
Default: gray

shadowOffsetx
The X offset of the shadow.
Default: 0

shadowOffsety
The Y offset of the shadow.
Default: 0

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

 

Needle

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

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

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

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

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

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

centerpinRadius
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

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

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

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

tickmarksBig
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

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

borderGradient
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

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

zoomFadeIn
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

zoomFadeOut
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

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

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

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

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

zoomShadow
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({
    id: 'cvs',
    min: 0,
    max: 100,
    value:52,
    options: {
    }
}).on('mousemove', function (e, shape)
{
    // Handle mousemove event
})
.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>