<h1>Silverlight vs C1 MVC Gauges</h1>

<p>
    The gauges in C1Studio for Silverlight offered more
    formatting options than the gauges in C1 MVC, but
    it is possible to achieve similar results with both
    using the properties available in the C1 MVC gauges.
</p>
<p>
    The result is often clearer and easier to read gauges
    that work better on mobile devices.
</p>
<p>
    The table below shows a comparison. The Silverlight
    gauges in the table are static images; the C1 MVC gauges
    are actual controls:
</p>

<div class="demo-settings">
    <label for="showTicks">Show Tickmarks</label>
    <input id="showTicks" type="checkbox"><br />
    <label for="animate">Animate</label>
    <input id="animate" type="checkbox">
</div>

<table>
    <thead>
        <tr>
            <th>Silverlight</th>
            <th>C1 MVC</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><img id="slGauge1" style="width:240px"></td>
            <td>
                @(Html.C1().RadialGauge().Id("wjGauge1")
                    .Min(0).Max(120).Step(20).Value(90)
                    .StartAngle(30).SweepAngle(120).Thickness(0.3)
                    .HasShadow(false)
                    .Pointer(p => p.Thickness(0.5).Color(System.Drawing.ColorTranslator.FromHtml("#FF5F38")))
                    .Ranges(r =>
                    {
                        r.Add().Min(0).Max(50).Color(System.Drawing.Color.Red);
                        r.Add().Min(50).Max(85).Color(System.Drawing.Color.Yellow);
                        r.Add().Min(85).Max(100).Color(System.Drawing.ColorTranslator.FromHtml("#4CFF00"));
                        r.Add().Min(100).Max(120).Color(System.Drawing.ColorTranslator.FromHtml("#005F0E"));
                    })
                )
            </td>
        </tr>
        <tr>
            <td><img id="slGauge2" style="width:240px"></td>
            <td>
                @(Html.C1().RadialGauge().Id("wjGauge2")
                    .Min(0).Max(120).Step(20).Value(100)
                    .StartAngle(-45).SweepAngle(270).Thickness(0.3)
                    .HasShadow(false)
                    .AutoScale(false) // to get a round border
                    .Pointer(p => p.Thickness(0.5).Color(System.Drawing.ColorTranslator.FromHtml("#FF5F38")))
                    .Ranges(r =>
                    {
                        r.Add().Min(0).Max(45).Color(System.Drawing.Color.Red);
                        r.Add().Min(45).Max(80).Color(System.Drawing.Color.Yellow);
                        r.Add().Min(80).Max(100).Color(System.Drawing.ColorTranslator.FromHtml("#4CFF00"));
                        r.Add().Min(100).Max(120).Color(System.Drawing.ColorTranslator.FromHtml("#005F0E"));
                    })
                )
            </td>
        </tr>
        <tr>
            <td><img id="slGauge3" style="width:140px"></td>
            <td>
                @(Html.C1().RadialGauge().Id("wjGauge3")
                    .Min(0).Max(100).Step(20).Value(40)
                    .StartAngle(100).SweepAngle(160).Thickness(0.3)
                    .HasShadow(false)
                    .Pointer(p => p.Thickness(0.5).Color(System.Drawing.ColorTranslator.FromHtml("#FF5F38")))
                    .Ranges(r =>
                    {
                        r.Add().Min(0).Max(50).Color(System.Drawing.Color.Red);
                        r.Add().Min(50).Max(75).Color(System.Drawing.Color.Yellow);
                        r.Add().Min(75).Max(90).Color(System.Drawing.ColorTranslator.FromHtml("#4CFF00"));
                        r.Add().Min(90).Max(100).Color(System.Drawing.ColorTranslator.FromHtml("#005F0E"));
                    })
                )
            </td>
        </tr>
    </tbody>
</table>