@{
	ViewBag.Title = "Overview";
	Layout = "~/Views/Shared/_WidgetLayout.cshtml";
}
@section header
{
	<script type="text/javascript">
		$(document).ready(function () {
			$("#gauge").wijlineargauge({
			    width: 400,
			    height: 120,
			    value: 70,
			    max: 100,
			    min: 0,
			    labels: {
			        style: {
			            fill: "#1E395B",
			            "font-size": 12,
			            "font-weight": 800
			        }
			    },
			    tickMajor: {
			        position: "inside",
			        offset: -11,
			        interval: 20,
			        factor: 12,
			        style: {
			            fill: "#1E395B",
			            stroke: "none",
			            width: 2
			        }
			    },
			    tickMinor: {
			        position: "inside",
			        offset: -11,
			        visible: true,
			        interval: 4,
			        factor: 10,
			        style: {
			            fill: "#1E395B",
			            stroke: "none",
			            width: 1
			        }
			    },
			    pointer: {
			        shape: "rect",
			        length: 0.6,
			        style: {
			            fill: "#1E395B",
			            stroke: "#7BA0CC",
			            "stroke-width": 1,
			            opacity: 1
			        }
			    },
			    face: {
			        style: {
			            fill: "270-#FFFFFF-#D9E3F0",
			            stroke: "#7BA0CC",
			            "stroke-width": 2
			        }
			    },
			    ranges: [{
			        startValue: 20,
			        endValue: 80,
			        startDistance: 0.85, //A ratio value determine the location of the range at start value.
			        endDistance: 0.85, //A ratio value determine the location of the range at end value.
			        startWidth: 0.5,
			        endWidth: 0.5,
			        style: {
			            fill: "90-#3DA1D8-#3A6CAC",
			            opacity: "1",
			            stroke: "none"
			        }
			    }]
			});

		});
	
	</script>
}
<h2>
	Overview</h2>
<div class="main demo">
	<!-- Begin demo markup -->
	<div id="gauge" class="ui-corner-all">
	</div>
	<!-- End demo markup -->
	<div class="demo-options">
		<!-- Begin options markup -->
		<!-- End options markup -->
	</div>
</div>
@section description
{
	<p>
		This demo shows how to use wijlineargauge create an linear gauge on webpage.</p>
}
