<h1>
    Radial Gauges
</h1>
<p>
    Radial gauges display a metric as a percentage of the length
    of a circular scale, like a pie or donut chart with a single
    slice.
</p>
<p>
    By default, the radial scale displays a 180-degree arc.
    You can change that by adjusting its start and sweep angles.
    If the "autoScale" property is set to true, the control
    will automatically scale the gauge to fill the host element
    taking onto account the "startAngle" and "sweepAngle"
    properties.
</p>
<p>
    Use the controls below to see the effect of the main RadialGauge
    properties:
</p>
<div class="row demo-settings">
    <div class="col-xs-6">
        <label for="value">value</label>
        @Html.C1().InputNumber().Id("value")
        <br>
        <label for="startAngle">startAngle</label>
        @Html.C1().InputNumber().Id("startAngle").Min(-360).Max(360).Step(10)
        <br>
        <label for="sweepAngle">sweepAngle</label>
        @Html.C1().InputNumber().Id("sweepAngle").Min(-360).Max(360).Step(10)
        <br>
        <label for="autoScale">autoScale</label>
        <input id="autoScale" type="checkbox" checked="checked"><br>

    </div>
    <div class="col-xs-6">
        <div class="gauge-holder">
            @(Html.C1().RadialGauge().Id("theGauge")
                .Min(0).Max(100).Step(5).Value(75)
                .IsReadOnly(false)
                .ShowRanges(false)
                .Ranges(r =>
                {
                    r.Add().Min(0).Max(33).Color(System.Drawing.Color.Red);
                    r.Add().Min(33).Max(66).Color(System.Drawing.Color.Yellow);
                    r.Add().Min(66).Max(100).Color(System.Drawing.Color.Green);
                })
            )
        </div>
    </div>
</div>