| Widgets > Gauge Widgets > wijlineargauge > Create a Logarithmic Gauge |
The wijlineargauge widget supports displaying values in a logarithmic scale. Simply set the isLogarithmic option to take advantage of this feature. See the lineargauge > Logarithmic sample of the MVC Control Explorer live demo at http://demo.componentone.com/ASPNET/MVCExplorer/lineargauge/Logarithmic for an example.
Complete the following steps to set the pager type:
<body> tags of the page, just after @RenderBody():
<div id="gauge"></div>
<div class="options">
<input type="checkbox" id="checkbox1" checked="checked" />
<label for="checkbox1">IsLogarithmic</label>
</div>
This markup will add content for a linear gauge widget and a check box to the page.
After the closing </div> tag you added in the previous step, enter the following jQuery script to initialize the wijlineargauge widget:
<script type="text/javascript">
$(document).ready(function () {
$("#gauge").wijlineargauge({ value: 50,
islogarithmic: true,
labels: {
style: {
fill: "#1E395B",
"font-size": "12pt",
"font-weight": "800"
}
},
tickMajor: {
position: "inside",
interval: 20,
style: {
fill: "#1E395B",
stroke: "none"
}
},
tickMinor: {
position: "inside",
visible: true,
interval: 4,
style: {
fill: "#1E395B",
stroke: "none"
}
},
pointer: {
shape: "rect",
length: 0.5,
style: {
fill: "#1E395B",
stroke: "#1E395B"
}
},
face: {
style: {
fill: "270-#FFFFFF-#D9E3F0",
stroke: "#7BA0CC",
"stroke-width": "4"
}
}
});
$("#checkbox1").change(function () {
$("#gauge").wijlineargauge("option", "islogarithmic", $(this).is(":checked"));
});
});
</script>
If the check box is selected the gauge will display values in a logarithmic scale, if the check box is not selected values will be displayed in the default scale.
What You've Accomplished
Press F5 to run the application, and notice that if the check box is selected the gauge will display values in a logarithmic scale, if the check box is not selected values will be displayed in the default scale.