You can create any face for your gauge using colors, Raphael drawing, or even an image.
Building on the Quick Start example, you can specify an image file to use for the face of the gauge using the face option.
- In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which uses Raphael drawing to create a template function that specifies the URL of the image to use. 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.
Drop down and copy script to paste in <head> section
| Script |
Copy Code |
<script type="text/javascript">
$(document).ready(function () {
$("#radialgauge1").wijradialgauge({
value: 90,
radius: 120,
face: {
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);
}
}
});
});
</script> |
- No changes are necessary in the <body> section of your HTML file. The basic <div> tag is sufficient to create the gauge.
- Save your HTML file and open it in a browser. The gauge appears like the one in the live widget below, with the dinner plate appearing as the face of the gauge.
See Also
