For both major and minor tick marks, you can set the interval, position, color, thickness, and shape of the marks.
Building on the Quick Start example, you can change the interval, position, color, thickness, and shape of the marks using the tickMajor and tickMinor options.
- In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which changes the tickMajor and tickMinor options for custom tick marks, and also changes the location of the labels and the startAngle (starting point) and sweepAngle (ending point) to make room for the large tick marks.
Drop down and copy script to paste in <head> section
| Script |
Copy Code
|
<script type="text/javascript">
$(document).ready(function () {
$("#radialgauge1").wijradialgauge({
value: 90,
max: 100,
min: 0,
startAngle: 300,
sweepAngle: 300,
labels: {offset: 45},
tickMajor: {
factor: 4,
offset: 44,
position: "inside",
style: { fill: "Grey", stroke: "Navy", "stroke-width": 4 }
},
tickMinor: {
visible: true,
offset: 44,
interval: 2,
position: "inside",
marker: "diamond",
style: { fill: "Grey", stroke: "Grey", "stroke-width": 1.5 }
}
});
});
</script> |
- No changes are necessary in the <body> section of your HTML file. The basic <div> tag is sufficient to create the chart.
- Save your HTML file and open it in a browser. The gauge appears like the one in the live widget below, with large major tick marks outlined in navy blue, and diamond shaped minor tick marks.
See Also
Widgets
Reference
Show All
Hide All