Gauge charts documentation

 

Example

 
<script>
    window.onload = function ()
    {
        // Create the chart. The values are: the canvas tag ID,  the minimum, the maximum and the actual value.
        var gauge = new OfficeExcel.Gauge('cvs', 0, 100, 46);
        
        // Configure the chart to appear as wished
        gauge.Set('chart.title', 'Bandwidth');
        
        // Now call the .Draw() method to draw the chart.
        gauge.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');

Margins

chart.gutter.left
The left gutter of the chart.
Default: 5

chart.gutter.right
The right gutter of the chart.
Default: 5

chart.gutter.top
The top gutter of the chart.
Default: 5

chart.gutter.bottom
The bottom gutter of the chart.
Default: 5

Labels and text

chart.text.font
The font that is used for the text.
Default: Verdana

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

chart.text.size
The size of the text
Default: 10

Titles

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

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

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

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

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

chart.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

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

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

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

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

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

chart.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

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

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

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

chart.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)

chart.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

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

chart.red.color
The red color.
Default: #DC3912

chart.yellow.color
The yellow color.
Default: #FF9900

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

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

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

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

Needle

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

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

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

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

Miscellaneous

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

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

chart.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