You can create any face for your gauge using colors, Raphael drawing, or even an image.
Building on the Quick Start example, you can draw circles with gradient colors 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 draws two circles, one inside the other. 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 circle method of the Raphael paper that takes three parameters: x, y, and radius. See the Raphael documentation for more information. We also set the radius to 185 pixels to render the labels inside the circles.
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: 185,
face: {
style: {},
template: function (ui) {
var set = ui.canvas.set();
var circle = ui.canvas.circle(ui.origin.x, ui.origin.y, ui.r - 2);
circle.attr({ "stroke": "#8f8f8f", "stroke-width": 3, fill: "#e2e2e2" });
set.push(circle);
var circle2 = ui.canvas.circle(ui.origin.x, ui.origin.y, ui.r - 14);
circle2.attr({ "stroke": "#717171", "stroke-width": 2, fill: "270-#a6a6a6-#efefef" });
set.push(circle2);
return set;
}
}
});
});
</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
Widgets
Reference
Show All
Hide All