SVG Gauge charts API reference

Documentation about the SVG Gauge chart including information on all 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:

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

Layout style:     
  

Chart configuration

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

Margins

PropertyDescriptionDefault
gutterLeftThe left gutter of the chart).10
gutterRightThe right gutter of the chart.10
gutterTopThe top gutter of the chart.10
gutterBottomThe bottom gutter of the chart.10
rmarginThis is the area that the outer scale sits in. By default it is calculated at eith 25 or 40 depending on whether the outer scale is enabled or not.null

Background

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

Colors

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

Labels and text

PropertyDescriptionDefault
textFontThe font used to render the text.sans-serif
textSizeThe size of the text.10
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.none (falls back to the textFont property)
labelsIngraphSizeThe font-size to use to render the text for the ingraph label.none (the default is two points bigger than the textSize property)
labelsIngraphBoldWhether the ingraph label should be bold or not.none (falls back to the textBold property)
labelsIngraphItalicWhether the ingraph label should be italic or not.none (falls back to the textItalic property)
labelsIngraphColorThe color of the ingraph label.none (falls back to the textColor property)
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 seperator,
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

Scales

PropertyDescriptionDefault
scaleInnerFontThe font used to render the text.none (falls back to the textFont setting)
scaleInnerSizeThe size of the text.none
scaleInnerBoldWhether the text is bold or not.none (falls back to the textBold setting)
scaleInnerItalicWhether the text is italic or not.none (falls back to the textItalic setting)
scaleInnerColorThe color of the text.none (falls back to the textColor setting)
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 seperator.,
scaleInnerFormatterThis can be a function that entirely handles the formatting of the number.null
scaleInnerLabelsCountThe number of labels that are displayed.10
scaleInnerRoundWhether the generated scale should be rounded.false
scaleOuterWhether the outer scale is displayed or not.true
scaleOuterFontThe font used to render the text.none (falls back to the textFont setting)
scaleOuterSizeThe size of the text.none (the default is two points smaller than the textSize setting)
scaleOuterBoldWhether the text is bold or not.none (falls back to the textBold setting)
scaleOuterItalicWhether the text is italic or not.none (falls back to the textItalic setting)
scaleOuterColorThe color of the text.none (falls back to the textColor setting)
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 seperator.,
scaleOuterFormatterThis can be a function that entirely handles the formatting of the number.null
scaleOuterLabelsCountThe number of labels that are displayed.10
scaleOuterRoundWhether the generated scale should be rounded.false

Title

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. It defaults to be the same as the textColor property.null
titleFontThe font used to render the title.null
titleSizeThe size of the font used to render the title. It defaults to be a little larger than the textSize propertynull
titleBoldWhether the title is bold or not.true
titleItalicWhether the title is italic or not.false
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 gutterTop 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. It defaults to be the same as the textSize setting.null
titleSubtitleBoldWhether the subtitle is bold or not.false
titleSubtitleItalicWhether the subtitle is italic or not.false

Tickmarks

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

PropertyDescriptionDefault
linewidthThe linewidth of the axes.1
innerGapThe size of the gap between the inner and ourt cicular axes.5
needleColorThis is the color of the needle.#666
centerpinRadiusThe radius of the circe thats at the center of the chart5
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 onbeforedraw or ondraw) to the chart object.

 

obj.exec(func)

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

 

Animation Effects

These effects are available and can be used instead of the .draw() function.
<script>
    /**
    * Optional callback function that's called when the effect is complete
    */
    function myCallback (obj)
    {
        // ...
    }

    new RGraph.SVG.SemiCircularProgress({
        id: 'chart-container',
        min: 0,
        max: 100,
        value: 84.99,
        options: {
            colors: ['Gradient(#faa:pink)'],
            labelsCenterUnitsPre: '$',
            labelsCenterDecimals: 2
        }
    }).grow({frames: 60, callback: myCallback});
</script>