The markup used to create a linear gauge control resembles the following:
<div data-win-control="C1.UI.Gauge.LinearGauge" id="gauge" data-win-options="{face:{type:C1.UI.Gauge.GaugeFace, style:{type:C1.UI.Chart.ChartStyle, fill:'270-#FFFFFF-#D9E3F0', stroke:'#7BA0CC', strokeWidth:2}}, height:120, labels:{type:C1.UI.Gauge.GaugeLabel, style:{type:C1.UI.Chart.ChartStyle, fontWeight:'800', fill:'#1E395B', fontSize:12}}, pointer:{type:C1.UI.Gauge.GaugePointer, length:0.6, style:{type:C1.UI.Chart.ChartStyle, fill:'#1E395B', opacity:1, stroke:'#7BA0CC', strokeWidth:1}, shape:'rect'}, tickMinor:{type:C1.UI.Gauge.GaugeTick, factor:10, interval:4, offset:-11, position:'inside', style:{type:C1.UI.Chart.ChartStyle, fill:'#1E395B', stroke:'none', width:1}, visible:true}, tickMajor:{type:C1.UI.Gauge.GaugeTick, factor:12, interval:20, offset:-11, position:'inside', style:{type:C1.UI.Chart.ChartStyle, fill:'#1E395B', stroke:'none', width:2}}, value:70, width:400}"></div>
You can also add a little CSS styling to the gauge. This example specifies the width of the gauge:
<style type="text/css">
#gauge.wijlineargauge
{
width: 400px;
}
</style>
Now you need to initialize the control, which you can do by adding the following script to the project:
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { $("#wijlineargauge").wijlineargauge({ width: 400, height: 100, value: 50, max: 100, min: 0, }); });
|