Radial Gauge

Linear Gauge

Bullet Graph

Segmented Display


This sample demonstrates how to specify radial gauge analog clock appearance.

For detailed implementation, please take a look at the Aspx, Razor and Controller code tabs.
 
<%@ Page  Language="C#"  Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<%@ Import Namespace="JQChart.Web.Mvc" %>

<!DOCTYPE html>
<html>
<head runat="server">
    <title></title>    
    <link rel="stylesheet" type="text/css" href="~/Content/jquery.jqGauges.css" />
    <script src="<%: Url.Content("~/Scripts/jquery-1.11.1.min.js") %>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/jquery.jqGauges.min.js") %>" type="text/javascript"></script>
    <!--[if IE]><script lang="javascript" type="text/javascript" src="<%: Url.Content("~/Scripts/excanvas.js") %>"></script><![endif]-->
</head>
<body>
    <div>
        <%=Html.JQRadialGauge().RadialGauge()
            .ID("jqRadialGauge")
            .Background("#F7F7F7")
            .Width(350)
            .Height(350)
            .Border(border =>
            {
                border.LineWidth(6)
                      .StrokeStyle("#76786A")
                      .Padding(16);
            })
            .Shadows(true)
            .Anchor(anchor =>
            {
                anchor.Visible(true)
                      .Radius(0.1)
                      .FillStyle(gradient =>
                      {
                          gradient.RadialGradient(0.35, 0.35, 0, 0.35, 0.35, 1)
                                  .ColorStops(stop =>
                          {
                            stop.Add(0, "#4F6169");
                            stop.Add(1, "#252E32");
                          });
                      });
            })
           .Tooltips(tooltips =>
            {
                tooltips.Disabled(true).Highlighting(false);
            })
           .Scales(scales =>
                {
                    scales.RadialScale()
                          .Minimum(0)
                          .Maximum(12)
                          .StartAngle(270)
                          .EndAngle(630)
                          .Interval(1)
                    .MajorTickMarks(majorTickMarks =>
                        {
                            majorTickMarks.Offset(0.97)
                                          .LineWidth(3);
                        })
                    .MinorTickMarks(minorTickMarks =>
                        {
                            minorTickMarks.Offset(0.98)
                                          .Visible(true)
                                          .Interval(0.2);
                        })
                    .Labels(labels =>
                        {
                            labels.ShowFirstLabel(false)
                                  .Font("14px sans-serif")
                                  .Offset(0.85)
                                  .Interval(1);
                        })
                    .Needles(needles =>
                        {
                             needles.RadialNeedle()
                                    .Value(1)
                                    .Type(RadialNeedleType.Pointer)
                                    .MediumOffset(0.4)
                                    .OuterOffset(0.5)
                                    .Width(12)
                                    .FillStyle("#252E32");
                                         
                             needles.RadialNeedle()
                                    .Value(6)
                                    .Type(RadialNeedleType.Pointer)
                                    .MediumOffset(0.6)
                                    .OuterOffset(0.8)
                                    .Width(12)
                                    .FillStyle("#252E32");
                                         
                             needles.RadialNeedle()
                                    .Value(10)
                                    .Type(RadialNeedleType.Line)
                                    .OuterOffset(0.8)
                                    .InnerOffset(-0.2)
                                    .LineWidth(3)
                                    .StrokeStyle("#B2183E");
                        });                              
         })
        .Render()%>
        <script lang="javascript" type="text/javascript">
            function updateGauge() {
                var currentValues = getValidTime();

                var scales = $('#jqRadialGauge').jqRadialGauge('option', 'scales');

                scales[0].needles[0].value = currentValues.hours;
                scales[0].needles[1].value = currentValues.minutes;
                scales[0].needles[2].value = currentValues.seconds;

                $('#jqRadialGauge').jqRadialGauge('update');

                setTimeout('updateGauge()', 1000);
            }

            function getValidTime() {
                var currentTime = new Date();

                var hoursValue = currentTime.getHours();
                var minutesValue = currentTime.getMinutes() / 5;
                var secondsValue = currentTime.getSeconds() / 5;

                if (hoursValue > 12) {
                    hoursValue -= 12;
                }

                hoursValue += (minutesValue / 12 * 11) / 12;

                return {
                    hours: hoursValue,
                    minutes: minutesValue,
                    seconds: secondsValue
                };
            }

            $(document).ready(function () {
                $('#jqRadialGauge').bind('labelCreating', function (event, data) {
                    switch (data.text) {
                        case '1':
                            data.text = 'I';
                            break;
                        case '2':
                            data.text = 'II';
                            break;
                        case '3':
                            data.text = 'III';
                            break;
                        case '4':
                            data.text = 'IV';
                            break;
                        case '5':
                            data.text = 'V';
                            break;
                        case '6':
                            data.text = 'VI';
                            break;
                        case '7':
                            data.text = 'VII';
                            break;
                        case '8':
                            data.text = 'VIII';
                            break;
                        case '9':
                            data.text = 'IX';
                            break;
                        case '10':
                            data.text = 'X';
                            break;
                        case '11':
                            data.text = 'XI';
                            break;
                        case '12':
                            data.text = 'XII';
                            break;
                    }

                });

                updateGauge();
            });
        </script>
    </div>
</body>
</html>

                                        
 

@using JQChart.Web.Mvc

<!DOCTYPE html>
<html>
<head runat="server">
    <title></title>    
    <link rel="stylesheet" type="text/css" href="~/Content/jquery.jqGauges.css" />
    <script src="@Url.Content("~/Scripts/jquery-1.11.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.jqGauges.min.js")" type="text/javascript"></script>
    <!--[if IE]><script lang="javascript" type="text/javascript" src="@Url.Content("~/Scripts/excanvas.js")"></script><![endif]-->
</head>
<body>
    <div>
          @(Html.JQRadialGauge().RadialGauge()
            .ID("jqRadialGauge")
            .Background("#F7F7F7")
            .Width(350)
            .Height(350)
            .Border(border =>
            {
                border.LineWidth(6)
                      .StrokeStyle("#76786A")
                      .Padding(16);
            })
            .Shadows(true)
            .Anchor(anchor =>
            {
                anchor.Visible(true)
                      .Radius(0.1)
                      .FillStyle(gradient =>
                      {
                          gradient.RadialGradient(0.35, 0.35, 0, 0.35, 0.35, 1)
                                  .ColorStops(stop =>
                          {
                            stop.Add(0, "#4F6169");
                            stop.Add(1, "#252E32");
                          });
                      });
            })
           .Tooltips(tooltips =>
            {
                tooltips.Disabled(true).Highlighting(false);
            })
           .Scales(scales =>
                {
                    scales.RadialScale()
                          .Minimum(0)
                          .Maximum(12)
                          .StartAngle(270)
                          .EndAngle(630)
                          .Interval(1)
                    .MajorTickMarks(majorTickMarks =>
                        {
                            majorTickMarks.Offset(0.97)
                                          .LineWidth(3);
                        })
                    .MinorTickMarks(minorTickMarks =>
                        {
                            minorTickMarks.Offset(0.98)
                                          .Visible(true)
                                          .Interval(0.2);
                        })
                    .Labels(labels =>
                        {
                            labels.ShowFirstLabel(false)
                                  .Font("14px sans-serif")
                                  .Offset(0.85)
                                  .Interval(1);
                        })
                    .Needles(needles =>
                        {
                             needles.RadialNeedle()
                                    .Value(1)
                                    .Type(RadialNeedleType.Pointer)
                                    .MediumOffset(0.4)
                                    .OuterOffset(0.5)
                                    .Width(12)
                                    .FillStyle("#252E32");
                                         
                             needles.RadialNeedle()
                                    .Value(6)
                                    .Type(RadialNeedleType.Pointer)
                                    .MediumOffset(0.6)
                                    .OuterOffset(0.8)
                                    .Width(12)
                                    .FillStyle("#252E32");
                                         
                             needles.RadialNeedle()
                                    .Value(10)
                                    .Type(RadialNeedleType.Line)
                                    .OuterOffset(0.8)
                                    .InnerOffset(-0.2)
                                    .LineWidth(3)
                                    .StrokeStyle("#B2183E");
                        });                              
         })
        .Render() 
          )
        <script lang="javascript" type="text/javascript">
            function updateGauge() {
                var currentValues = getValidTime();

                var scales = $('#jqRadialGauge').jqRadialGauge('option', 'scales');

                scales[0].needles[0].value = currentValues.hours;
                scales[0].needles[1].value = currentValues.minutes;
                scales[0].needles[2].value = currentValues.seconds;

                $('#jqRadialGauge').jqRadialGauge('update');

                setTimeout('updateGauge()', 1000);
            }

            function getValidTime() {
                var currentTime = new Date();

                var hoursValue = currentTime.getHours();
                var minutesValue = currentTime.getMinutes() / 5;
                var secondsValue = currentTime.getSeconds() / 5;

                if (hoursValue > 12) {
                    hoursValue -= 12;
                }

                hoursValue += (minutesValue / 12 * 11) / 12;

                return {
                    hours: hoursValue,
                    minutes: minutesValue,
                    seconds: secondsValue
                };
            }

            $(document).ready(function () {
                $('#jqRadialGauge').bind('labelCreating', function (event, data) {
                    switch (data.text) {
                        case '1':
                            data.text = 'I';
                            break;
                        case '2':
                            data.text = 'II';
                            break;
                        case '3':
                            data.text = 'III';
                            break;
                        case '4':
                            data.text = 'IV';
                            break;
                        case '5':
                            data.text = 'V';
                            break;
                        case '6':
                            data.text = 'VI';
                            break;
                        case '7':
                            data.text = 'VII';
                            break;
                        case '8':
                            data.text = 'VIII';
                            break;
                        case '9':
                            data.text = 'IX';
                            break;
                        case '10':
                            data.text = 'X';
                            break;
                        case '11':
                            data.text = 'XI';
                            break;
                        case '12':
                            data.text = 'XII';
                            break;
                    }

                });

                updateGauge();
            });
        </script>
    </div>
</body>
</html>

                                        
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using SamplesBrowser.Models;

namespace GaugesSamplesBrowser.Controllers
{
    public class GaugeController : Controller
    {

    public ActionResult AnalogClock()
        {
            return View();
        }

    }
}