Radial Gauge

Linear Gauge

Bullet Graph

Segmented Display



This sample demonstrates how to change a spcific gauge options. With .jqRadialGauge("option", optionName, [value]) method you can get or set any jqRadialGauge option. If no value is specified, will act as a getter.

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(false).Highlighting(true);
                                   })
           .Scales(scales =>
                      {
                          scales.RadialScale()
                                .Minimum(0)
                                .Maximum(150)
                                .StartAngle(140)
                                .EndAngle(400)
                                .MajorTickMarks(majorTickMarks =>
                                    {
                                       majorTickMarks.Offset(0.84)
                                                     .Length(12)
                                                     .LineWidth(2)
                                                     .Interval(10);
                                    })
                                .MinorTickMarks(minorTickMarks =>
                                    {
                                       minorTickMarks.Offset(0.84)
                                                     .Visible(true)
                                                     .Length(8)
                                                     .LineWidth(2)
                                                     .Interval(2);
                                    })
                                .Labels(labels => 
                                    {
                                        labels.Orientation(LabelsOrientation.Horizontal)
                                              .Offset(1)
                                              .Interval(10);
                                    })
                                 .Needles(needles =>
                                     {
                                         needles.RadialNeedle()
                                                .Value(100)
                                                .Type(RadialNeedleType.Pointer)
                                                .MediumOffset(0.7)
                                                .OuterOffset(0.8)
                                                .Width(10)
                                                .FillStyle("#252E32");
                                     })
                                 .Ranges(ranges =>
                                     {
                                         // Range from 40 to 110
                                         ranges.RadialRange()
                                               .InnerStartOffset(0.76)
                                               .InnerEndOffset(0.68)
                                               .OuterOffset(0.82)
                                               .StartValue(40)
                                               .EndValue(110)
                                               .FillStyle(gradient =>
                                                     {
                                                         gradient.LinearGradient(0, 0.5, 1, 0.5)
                                                                 .ColorStops(stops =>
                                                             {
                                                                 stops.Add(0, "#C5F80B");
                                                                 stops.Add(1, "#6B8901");
                                                             });
                                                     });
                                         
                                         //Range from 110 to 150
                                         ranges.RadialRange()
                                               .InnerStartOffset(0.68)
                                               .InnerEndOffset(0.60)
                                               .OuterOffset(0.82)
                                               .StartValue(110)
                                               .EndValue(150)
                                               .FillStyle(gradient =>
                                                    {
                                                        gradient.LinearGradient(0, 0.5, 1, 0.5).ColorStops(stops =>
                                                        {
                                                            stops.Add(0, "#FF3366");
                                                            stops.Add(1, "#B2183E");
                                                        });
                                                    });
                                     });
                              
                      })
        .Render()%>
        <br />
        <input id="buttonBackground" type="button" value="Change Background" />
        <input id="buttonRandomValue" type="button" value="Change needle value" />
        <script lang="javascript" type="text/javascript">
            $(document).ready(function () {
                $('#buttonBackground').click(function () {
                    $('#jqRadialGauge').jqRadialGauge('option', 'background', '#AAD7FF');
                });

                $('#buttonRandomValue').click(function () {
                    var scales = $('#jqRadialGauge').jqRadialGauge('option', 'scales');
                    scales[0].needles[0].value = Math.random() * 150;

                    $('#jqRadialGauge').jqRadialGauge('update');
                });
            });
        </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(false).Highlighting(true);
                                   })
           .Scales(scales =>
                      {
                          scales.RadialScale()
                                .Minimum(0)
                                .Maximum(150)
                                .StartAngle(140)
                                .EndAngle(400)
                                .MajorTickMarks(majorTickMarks =>
                                    {
                                       majorTickMarks.Offset(0.84)
                                                     .Length(12)
                                                     .LineWidth(2)
                                                     .Interval(10);
                                    })
                                .MinorTickMarks(minorTickMarks =>
                                    {
                                       minorTickMarks.Offset(0.84)
                                                     .Visible(true)
                                                     .Length(8)
                                                     .LineWidth(2)
                                                     .Interval(2);
                                    })
                                .Labels(labels => 
                                    {
                                        labels.Orientation(LabelsOrientation.Horizontal)
                                              .Offset(1)
                                              .Interval(10);
                                    })
                                 .Needles(needles =>
                                     {
                                         needles.RadialNeedle()
                                                .Value(100)
                                                .Type(RadialNeedleType.Pointer)
                                                .MediumOffset(0.7)
                                                .OuterOffset(0.8)
                                                .Width(10)
                                                .FillStyle("#252E32");
                                     })
                                 .Ranges(ranges =>
                                     {
                                         // Range from 40 to 110
                                         ranges.RadialRange()
                                               .InnerStartOffset(0.76)
                                               .InnerEndOffset(0.68)
                                               .OuterOffset(0.82)
                                               .StartValue(40)
                                               .EndValue(110)
                                               .FillStyle(gradient =>
                                                     {
                                                         gradient.LinearGradient(0, 0.5, 1, 0.5)
                                                                 .ColorStops(stops =>
                                                             {
                                                                 stops.Add(0, "#C5F80B");
                                                                 stops.Add(1, "#6B8901");
                                                             });
                                                     });
                                         
                                         //Range from 110 to 150
                                         ranges.RadialRange()
                                               .InnerStartOffset(0.68)
                                               .InnerEndOffset(0.60)
                                               .OuterOffset(0.82)
                                               .StartValue(110)
                                               .EndValue(150)
                                               .FillStyle(gradient =>
                                                    {
                                                        gradient.LinearGradient(0, 0.5, 1, 0.5).ColorStops(stops =>
                                                        {
                                                            stops.Add(0, "#FF3366");
                                                            stops.Add(1, "#B2183E");
                                                        });
                                                    });
                                     });
                              
                      })
        .Render() 
          )
        <br />
        <input id="buttonBackground" type="button" value="Change Background" />
        <input id="buttonRandomValue" type="button" value="Change needle value" />
        <script lang="javascript" type="text/javascript">
            $(document).ready(function () {
                $('#buttonBackground').click(function () {
                    $('#jqRadialGauge').jqRadialGauge('option', 'background', '#AAD7FF');
                });

                $('#buttonRandomValue').click(function () {
                    var scales = $('#jqRadialGauge').jqRadialGauge('option', 'scales');
                    scales[0].needles[0].value = Math.random() * 150;

                    $('#jqRadialGauge').jqRadialGauge('update');
                });
            });
        </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 ChangeGaugeOptions()
        {
            return View();
        }

    }
}