SVG Gauge charts API reference

Documentation about the SVG Gauge chart including information about all of the options and methods that are available to you.

 

Example

The code below produces a chart like this:

<script>
        new RGraph.SVG.Gauge({
            id: 'chart-container',
            innerMin: 0,
            innerMax: 10,
            outerMin: 0,
            outerMax: 100,
            value: 7.8,
            options: {
                adjustable: true,
                scaleInnerUnitsPost: '%',
                centerpinRadius: 10,
                labelsIngraphUnitsPost: '%',
                labelsIngraphDecimals: 1,
                colors: ['red','blue']
            }
        }).draw();
</script>

 

The obj.nodes property

Instead of coordinates the Gauge chart maintains references to the nodes that are created - such as the axes, the labels and text nodes. For example:

For example you could add your own event listeners like this:

<script>
    obj.nodes.needleGroup.onclick = function (e)
    {
        alert('The value is: ' + obj.value);
    }
</script>

 

Properties

You can use these properties to control how the chart appears. You can set them by including them in the options section of the configuration as is shown above.

Chart configuration properties

PropertyDescriptionDefault
centerxIf required, you can position the progress bar using this instead of the margins.null
centeryIf required, you can position the progress bar using this instead of the margins.null
radiusIf required, you can size the progress bar using this instead of the margins.null

Margin properties

PropertyDescriptionDefault
marginLeftThe left margin of the chart).10
marginRightThe right margin of the chart.10
marginTopThe top margin of the chart.10
marginBottomThe bottom margin of the chart.10
rmarginThis is the area that the outer scale sits in. By default it is calculated at either 25 or 40 depending on whether the outer scale is enabled or not.null

Background properties

PropertyDescriptionDefault
backgroundStrokeThe color of the background stroke color.#ddd
backgroundFillThe color of the background fill color.Gradient(white:#FEFEFE:#E6E6E6:#dedede)

Color properties

PropertyDescriptionDefault
colorsThe colors of the axes. This should be an array of two strings. Gradients cannot be used here.['black','black']

Other text properties

PropertyDescriptionDefault
textFontThe font used to render the text.Arial, Verdana, sans-serif
textSizeThe size of the text.12
textColorThe color of the labels.black
textItalicWhether the labels are italic or not.false
textBoldWhether the labels are bold or not.false
labelsIngraphWhether the ingraph label (in the center of the chart) is displayed.true
labelsIngraphFontThe font to use to render the text for the ingraph label.null
labelsIngraphSizeThe font size to use to render the text for the ingraph label.null
labelsIngraphBoldWhether the ingraph label should be bold or not.null
labelsIngraphItalicWhether the ingraph label should be italic or not.null
labelsIngraphColorThe color of the ingraph label.null
labelsIngraphUnitsPreUnits which are prepended to the ingraph label.none
labelsIngraphUnitsPostUnits which are appended to the ingraph label.none
labelsIngraphThousandThe character(s) used as the thousand separator.,
labelsIngraphPointThe character(s) used as the decimal point..
labelsIngraphFormatterThis can be a function which is used to handle all of the label formatting. It's passed the number as an argument.null
labelsIngraphDecimalsThis should be a number that dictates how many decimal places are displayed.0
labelsIngraphPaddingPadding that is applied to the number.3
labelsIngraphBackgroundThe color of the background for the label.Gradient(#ddd:#eee)
labelsIngraphRoundedThe severity of the rounded corners effect of the label.2

Scale properties

PropertyDescriptionDefault
scaleInnerFontThe font used to render the text.null
scaleInnerSizeThe size of the text.null
scaleInnerBoldWhether the text is bold or not.null
scaleInnerItalicWhether the text is italic or not.null
scaleInnerColorThe color of the text.null
scaleInnerDecimalsThe number of decimals used by the labels.0
scaleInnerUnitsPreUnits for the label which are prepended to the number.(none)
scaleInnerUnitsPostUnits for the label which are prepended to the number.(none)
scaleInnerPointThe character(s) used for the decimal point..
scaleInnerThousandThe character(s) used as the thousand separator.,
scaleInnerFormatterThis can be a function that entirely handles the formatting of the number.null
scaleInnerLabelsCountThe number of labels that are displayed.10
scaleOuterWhether the outer scale is displayed or not.true
scaleOuterFontThe font used to render the text.null
scaleOuterSizeThe size of the text.null
scaleOuterBoldWhether the text is bold or not.null
scaleOuterItalicWhether the text is italic or not.null
scaleOuterColorThe color of the text.null
scaleOuterDecimalsThe number of decimals used by the labels.0
scaleOuterUnitsPreUnits for the label which are prepended to the number.(none)
scaleOuterUnitsPostUnits for the label which are prepended to the number.(none)
scaleOuterPointThe character(s) used for the decimal point..
scaleOuterThousandThe character(s) used as the thousand separator.,
scaleOuterFormatterThis can be a function that entirely handles the formatting of the number.null
scaleOuterLabelsCountThe number of labels that are displayed.10

Title properties

PropertyDescriptionDefault
titleThe title of the chart.(An empty string)
titleXThe specific X coordinate of the title. This can also be a string that looks like this: "+10" or "-10" in which case it's added to the calculated position.null
titleYThe specific Y coordinate of the title. This can also be a string that looks like this: "+10" or "-10" in which case it's added to the calculated position.+5 (a string)
titleHalignThe horizontal alignment of the title.center
titleValignThe vertical alignment of the title.bottom
titleColorThe color of the title.null
titleFontThe font used to render the title.null
titleSizeThe size of the font used to render the title.null
titleBoldWhether the title is bold or not.null
titleItalicWhether the title is italic or not.null
titleSubtitleThe subtitle of the chart. If a subtitle is specified the title is moved up to accommodate it. As such you might need to give a larger marginTop value.(An empty string)
titleSubtitleXThe specific X coordinate of the subtitle. This can also be a string that looks like this: "+10" or "-10" in which case it's added to the calculated position.null
titleSubtitleYThe specific Y coordinate of the subtitle. This can also be a string that looks like this: "+10" or "-10" in which case it's added to the calculated position.+15 (a string)
titleSubtitleHalignThe horizontal alignment of the subtitle.center
titleSubtitleValignThe vertical alignment of the subtitle.center
titleSubtitleColorThe color of the subtitle.#aaa
titleSubtitleFontThe font used to render the subtitle.null
titleSubtitleSizeThe size of the font used to render the subtitle.null
titleSubtitleBoldWhether the subtitle is bold or not.null
titleSubtitleItalicWhether the subtitle is italic or not.null

Tickmark properties

PropertyDescriptionDefault
tickmarksOuterSizeThe size of the outer axis tickmarks.3
tickmarksInnerSizeThe size of the inner axis tickmarks.3
tickmarksCountThe number of tickmarks that are displayed.10

Other properties

PropertyDescriptionDefault
linewidthThe linewidth of the axes.1
innerGapThe size of the gap between the inner and outer circular axes.5
needleColorThis is the color of the needle.#666
centerpinRadiusThe radius of the circle that's at the center of the chart.5
adjustableIf true then the gauge will be adjustable by clicking on it to select the value.false

Methods

 

obj.set(name, value)

This can be used to set properties if necessary. It's normally used after the chart is drawn if you need to set additional parameters or change them.

 

obj.on(event, handler)

This function adds an event listener (such as beforedraw or draw) to the chart object.

 

obj.exec(func)

This function executes the function that you give it (there and then - not on any particular event)