@{
	ViewBag.Title = "Overview";
	Layout = "~/Views/Shared/_WidgetLayout.cshtml";
}
@section header
{
	<script type="text/javascript">
		$(document).ready(function () {
			$("#gauge").wijradialgauge({
			    value: 100,
			    max: 150,
			    min: 0,
			    startAngle: -45,
			    sweepAngle: 270,
			    radius: "auto",
			    islogarithmic: false,
			    origin: {
			        x: 0.5, y: 0.5
			    },
			    labels: {
			        offset: 27, //4F6B82
			        style: {
			            fill: "#1E395B",
			            "font-size": 12,
			            "font-weight": "800"
			        }
			    },
			    tickMinor: {
			        position: "inside",
			        offset: 30,
			        style: {
			            "height": 3,
			            "width": 10,
			            fill: "#1E395B",
			            stroke: "#E7EFF8"
			        },
			        interval: 5,
			        visible: true
			    },
			    tickMajor: {
			        position: "inside",
			        offset: 27,
			        style: {
			            fill: "#1E395B",
			            "height": 4,
			            "width": 20,
			            stroke: "#E7EFF8",
			            "stroke-width": 1.5
			        },
			        interval: 25,
			        visible: true
			    },
			    ranges: [
                {
                    startWidth: 2,
                    endWidth: 5,
                    startValue: 0,
                    endValue: 10,
                    startDistance: 0.6,
                    endDistance: 0.58,
                    style: {
                        fill: "#7BA0CC",
                        stroke: "#7BA0CC",
                        "stroke-width": 0
                    }
                },
                {
                    startWidth: 5,
                    endWidth: 20,
                    startValue: 10,
                    endValue: 125,
                    startDistance: 0.58,
                    endDistance: 0.54,
                    style: {
                        fill: "0-#B4D5F0-#B4D5F0",
                        stroke: "#FFFFFF",
                        "stroke-width": 0
                    }
                },
                {
                    startWidth: 20,
                    endWidth: 25,
                    startValue: 125,
                    endValue: 150,
                    startDistance: 0.54,
                    endDistance: 0.5,
                    style: {
                        fill: "#7BA0CC",
                        stroke: "#7BA0CC",
                        "stroke-width": 0
                    }
                }
                ],
			    face: {
			        style: {

			            fill: "r(0.9, 0.60)#FFFFFF-#D9E3F0",
			            stroke: "#7BA0CC",
			            "stroke-width": 4
			        }
			    },
			    pointer: {
			        length: 0.8,
			        offset: 0,
			        shape: "rect",
			        width: 6,
			        style: {
			            fill: "#1E395B",
			            stroke: "#1E395B"
			        }
			    },
			    cap: {
			        radius: 10,
			        style: {
			            fill: "#1E395B",
			            stroke: "#1E395B"
			        }
			    }
			});

		});
	
	</script>
}
<h2>
	Overview</h2>
<div class="main demo">
	<!-- Begin demo markup -->
	<div id="gauge">
	</div>
	<!-- End demo markup -->
	<div class="demo-options">
		<!-- Begin options markup -->
		<!-- End options markup -->
	</div>
</div>
@section description
{
	<p>
		The Wijmo wijradialgauge widget allows you to create customized radial gauges.
	</p>
}
