face Option

Sets or draws the image or shape to use for the face of the gauge and the background area.

Syntax

Javascript (Usage)
Javascript (Specification)

$(function () {
    
    // Get value
    var returnsValue; // Type:  wijmo.gauge.gauge_face
    returnsValue = $(".selector").wijgauge("option", "face");
    
    // Set value
    var newValue; // Type:  wijmo.gauge.gauge_face
    $(".selector").wijgauge("option", "face", newValue);
        
});

var face : gauge_face;

Example

Javascript

// This example uses a custom image for the face of the gauge. The argument that we name ui in the example is a JSON
// object. This object has a canvas, which is a Raphael paper object, and we use the image method of the Raphael
// paper that takes five parameters: source, x, y, width, and height. See the Raphael documentation for more information.
// We also set the radius to 120 pixels to render it inside the white area of the image.
$(document).ready(function () {
$("#radialgauge1").wijradialgauge({
    value: 90,
    radius: 120,
    face: {
        style: {},
        template: function (ui) {
            var url = "images/customGaugeFace.png";
            return ui.canvas.image(url, ui.origin.x -ui.r, ui.origin.y -ui.r, ui.r * 2, ui.r * 2);
        }
    }
});
});

Remarks

The origin is the center of the gauge, but the image draws from the top left, so we first calculate the starting point of the top left based on the origin, and we calculate the width and height based on the radius of the face. The radius of the face is half of the min of the width and height. Note: The fill property is defined using the Raphael framework. Please see the Raphael Element attr method for more information. The face can be filled with a simple color, or a gradient. The default fill is a radial gradient, indicated by the r in the fill property.

Reference

options type
wijgauge jQuery Widget