Gauge charts documentation

 

Example

<script>
    // 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.

Layout style:     
  

Chart configuration

PropertyDescriptionDefault
centerxIf 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.null
centeryIf 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.null
radiusIf 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.null
anglesStartYou 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.TWOPInull
anglesEndYou 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.TWOPInull

Margins

PropertyDescriptionDefault
gutterLeftThe left gutter of the chart, (the gutter is where the labels and title are)).5
gutterRightThe right gutter of the chart, (the gutter is where the labels and title are).5
gutterTopThe top gutter of the chart, (the gutter is where the labels and title are).5
gutterBottomThe bottom gutter of the chart, (the gutter is where the labels and title are).5

Background

PropertyDescriptionDefault
backgroundColorThe background color of the chart.white
backgroundGradientIf 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.false

Labels and text

PropertyDescriptionDefault
textAccessibleA new feature in 2016 that allows you to use DOM text in place of canvas text. It makes for much higher quality text that you can also select if desired (for copy/paste operations). It won't fit all situations and you can read more about the DOM text feature here. A good way to control borders/margins/padding etc is not to set them on the canvas but to wrap the canvas in a div and set them on that like this:
<div style="margin-left: 50px; display: inline-block">
<canvas id="cvs" width="650" height="250"></canvas>
</div>
true
textAccessibleOverflowThis can be visible or hidden and it controls whether the text is clipped to the edges of the canvas. It defaults to be visible and means you can set small gutters if you wish.visible
textAccessiblePointereventsThis controls whether the DOM text responds to mouse based events or not (it sets the pointer-events CSS property to none).true
textFontThe font that is used for the text.Arial
textColorThe color of the text.#666
textSizeThe size of the text10
labelsCountThis controls the number of labels shown on the Gauge.5
labelsOffsetAngleThis is the angular offset that the labels are positioned at (measured in radians).0
labelsOffsetRadiusThis is the radial offset the the labels are positioned at.0
labelsOffsetxThis is the X offset the the labels are positioned at.0
labelsOffsetyThis is the Y offset the the labels are positioned at.0
labelsSpecificIf you don't want a scale and want specific labels instead, you pass an array of labels using this property onstead.null
labelsCenteredThis controls whether the labels are centered horizontally and verticallyfalse
valueTextThis 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).false
valueTextColorThis allows you to set the color of the text.black
valueTextBoundingThis allows you to turn completely off the bounding box.black
valueTextBoundingStrokeThis 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)black
valueTextBoundingFillThis 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)white
valueTextYPosThis 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.0.5
valueTextUnitsPreUnits that are added to the center label (before the number)(an empty string)
valueTextUnitsPostUnits that are added to the center label (after the number)(an empty string)

Titles

PropertyDescriptionDefault
titleTopThe top title of the chart, if any.(An empty string)
titleTopFontThe font that the top title is rendered in. If not specified the text.font setting is used (usually Arial)Arial
titleTopSizeThe size of the top title. If not specified the size is usually 2pt bigger than the text.size setting.14
titleTopBoldWhether the top title is bold or not.true
titleTopColorThe color that the top title is rendered in.#333
titleTopPosIf 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.null
titleBottomThe bottom title of the chart, if any.(An empty string)
titleBottomFontThe font that the bottom title is rendered in. If not specified the text.font setting is used (usually Arial)Arial
titleBottomSizeThe size of the bottom title. If not specified the size is usually 2pt bigger than the text.size setting.14
titleBottomBoldWhether the bottom title is bold or not.true
titleBottomColorThe color that the bottom title is rendered in.#333
titleBottomPosIf 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.null

Scale

PropertyDescriptionDefault
scaleDecimalsThe number of decimal places to display for the Y scale.0
scalePointThe character used as the decimal point..
scaleThousandThe character used as the thousand separator,
unitsPreThe units that the Y axis is measured in. This string is displayed BEFORE the actual number, allowing you to specify values such as "$50".(An empty string)
unitsPostThe units that the Y axis is measured in. This string is displayed AFTER the actual number, allowing you to specify values such as "50ms".(An empty string)

Colors

PropertyDescriptionDefault
redStartThe point at which the red area starts.90% of the max
redColorThe red color.#DC3912
redWidthThe width of the red area10
yellowColorThe yellow color.#FF9900
yellowWidthThe width of the yellow area10
greenEndThe point at which the green area ends.70% of the max
greenColorThe green color.rgba(0,0,0,0)
greenWidthThe width of the red area10
borderOuterThis is the color of the outer border.#ccc
borderInnerThis is the color of the inner border.#f1f1f1
borderOutlineThis is the color of the border around the Gauge.black
colorsRangesWith 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']]null

Shadow

PropertyDescriptionDefault
shadowWhether a drop shadow is applied.true
shadowColorThe color of the shadow.gray
shadowOffsetxThe X offset of the shadow.0
shadowOffsetyThe Y offset of the shadow.0
shadowBlurThe severity of the shadow blurring effect.15

Needle

PropertyDescriptionDefault
needleTailWhether the tail for the needle is shown.false
needleSizeThis is the size of the needle(s). This can be an array of numbers or just a single number.null
needleColorsThis is the color(s) of the needle(s).['#D5604D', 'red', 'green', 'yellow']
needleTypeThis controls the appearance of the needles. It can be triangle or line.triangle
needleWidthThis is the linewidth thats used as the width of the line style of pointer.7
centerpinColorThis is the color used in the centerpin gradient coloring.blue
centerpinRadiusThis is ths radius of the centerpin.null

Interactive Features

PropertyDescriptionDefault
adjustableYou can make the Gauge interactively adjustable by setting this to true.false

Miscellaneous

PropertyDescriptionDefault
borderWidthThe width of the border that goes around the Gauge.10
tickmarksSmallThe number of small tickmarks on the chart.25
tickmarksSmallColorThe color of the small tickmarks on the chart.black
tickmarksBigThe 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.25
tickmarksBigColorThe color of the big tickmarks on the chart.black
borderGradientThis determines whether the Gauge chart has a graduated border. Note: This can cause effects to run slowly in some browsers.false
cleartoThis is used in animations and effects as the default color to use when the canvas.null

Zoom

PropertyDescriptionDefault
zoomFactorThis is the factor that the chart will be zoomed by (bigger values means more zoom)1.5
zoomFadeInWhether the zoomed canvas fades in or not. This also can be used to control the fade in for the zoom in thumbnail mode.true
zoomFadeOutWhether the zoomed canvas fades out or not. This also can be used to control the fade in for the zoom in thumbnail mode.true
zoomHdirThe horizontal direction of the zoom. Possible values are: left, center, rightright
zoomVdirThe vertical direction of the zoom. Possible values are: up, center, downdown
zoomDelayThe delay (in milliseconds) between frames.50
zoomFramesThe number of frames in the zoom animation.10
zoomShadowWhether or not the zoomed canvas has a shadow or not.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();

 

The exec option and method

The exec function is documented here.

 

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>
Share RGraph!