Radial Gauge

Linear Gauge

Bullet Graph

Segmented Display


This sample demonstrates how to specify multiple linear gauge scales.

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.JQLinearGauge().LinearGauge()
            .ID("jqLinearGauge")
            .Orientation(GaugeOrientation.Vertical)
            .Background("#F7F7F7")
            .Width(150)
            .Height(400)
            .Border(border =>
                      {
                          border.LineWidth(4)
                                .StrokeStyle("#76786A")
                                .Padding(10);
                      })
           .Shadows(true)
           .Tooltips(tooltips =>
                         {
                             tooltips.Disabled(true).Highlighting(false);
                         })
           .Animation(new TimeSpan(0,0,1))
           .Scales(scales =>
                      {
                          scales.LinearScale()
                                .Minimum(-30)
                                .Maximum(50)
                                .Interval(10)
                                .Margin(margin =>
                                    {
                                        margin.Top(6)
                                              .Left(0)
                                              .Right(0)
                                              .Bottom(26);
                                    })
                                .Labels(labels =>
                                    {
                                        labels.Offset(0.2)
                                              .Font("14px sans-serif")
                                              .HorizontalAlignment(HorizontalAlignment.Right);
                                    })
                                .MajorTickMarks(majorTickMarks =>
                                    {
                                        majorTickMarks.Offset(0.25)
                                                      .Length(15)
                                                      .Interval(5);
                                    })
                                .MinorTickMarks(minorTickMarks =>
                                    {
                                        minorTickMarks.Offset(0.31)
                                                      .Visible(true)
                                                      .Interval(1);
                                    })
                                 .BarMarkers(barMarkers =>
                                     {
                                         barMarkers.LinearBarMarker()
                                                   .Value(18)
                                                   .InnerOffset(0.39)
                                                   .OuterOffset(0.58)
                                                   .ZIndex(5)
                                                   .FillStyle(gradient =>
                                                                {
                                                                    gradient.LinearGradient(0, 0, 1, 0)
                                                                            .ColorStops(colorStops =>
                                                                            {
                                                                                colorStops.Add(0, "#B2183E");
                                                                                colorStops.Add(0.42, "#FF3366");
                                                                                colorStops.Add(0.48, "#FF3366");
                                                                                colorStops.Add(1, "#B2183E");
                                                                            });
                                                                });
                                     })
                                .Ranges(ranges =>
                                   {
                                       ranges.LinearRange()
                                             .StartValue(-30)
                                             .EndValue(50)
                                             .FillStyle(System.Drawing.Color.Black)
                                             .InnerOffset(0.38)
                                             .OuterStartOffset(0.39)
                                             .OuterEndOffset(0.39);
                                   })
                               .Needles(needles =>
                               {
                                      needles.LinearNeedle()
                                             .Type(NeedleType.Ellipse)
                                             .LineWidth(1)
                                             .StrokeStyle(System.Drawing.Color.Black)
                                             .Value(-33)
                                             .Width(34)
                                             .Height(34)
                                             .InnerOffset(0.335)
                                             .FillStyle(gradient =>
                                                           {
                                                               gradient.RadialGradient(0.45, 0.45, 0, 0.45, 0.45, 1)
                                                                       .ColorStops(colorStops =>
                                                                           {
                                                                               colorStops.Add(0, "#FF3366");
                                                                               colorStops.Add(1, "#B2183E");
                                                                           });
                                                           });
                               });
                          
                          scales.LinearScale()
                                .Minimum(-22)
                                .Maximum(122)
                                .Interval(20)
                                .Margin(margin =>
                                    {
                                        margin.Top(6)
                                              .Left(0)
                                              .Right(0)
                                              .Bottom(26);
                                    })
                                .Labels(labels =>
                                    {
                                        labels.Offset(0.78)
                                              .Font("14px sans-serif")
                                              .HorizontalAlignment(HorizontalAlignment.Left);
                                    })
                                .MajorTickMarks(majorTickMarks =>
                                    {
                                        majorTickMarks.Offset(0.6)
                                                      .Length(15)
                                                      .Interval(10);
                                    })
                                .MinorTickMarks(minorTickMarks =>
                                    {
                                        minorTickMarks.Offset(0.6)
                                                      .Visible(true)
                                                      .Interval(2);
                                    })
                                .Ranges(ranges =>
                                   {
                                       ranges.LinearRange()
                                             .StartValue(-22)
                                             .EndValue(122)
                                             .FillStyle(System.Drawing.Color.Black)
                                             .InnerOffset(0.58)
                                             .OuterStartOffset(0.59)
                                             .OuterEndOffset(0.59);
                                   });       
                      })
        .Render()%>
    </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.JQLinearGauge().LinearGauge()
            .ID("jqLinearGauge")
            .Orientation(GaugeOrientation.Vertical)
            .Background("#F7F7F7")
            .Width(150)
            .Height(400)
            .Border(border =>
                      {
                          border.LineWidth(4)
                                .StrokeStyle("#76786A")
                                .Padding(10);
                      })
           .Shadows(true)
           .Tooltips(tooltips =>
                         {
                             tooltips.Disabled(true).Highlighting(false);
                         })
           .Animation(new TimeSpan(0,0,1))
           .Scales(scales =>
                      {
                          scales.LinearScale()
                                .Minimum(-30)
                                .Maximum(50)
                                .Interval(10)
                                .Margin(margin =>
                                    {
                                        margin.Top(6)
                                              .Left(0)
                                              .Right(0)
                                              .Bottom(26);
                                    })
                                .Labels(labels =>
                                    {
                                        labels.Offset(0.2)
                                              .Font("14px sans-serif")
                                              .HorizontalAlignment(HorizontalAlignment.Right);
                                    })
                                .MajorTickMarks(majorTickMarks =>
                                    {
                                        majorTickMarks.Offset(0.25)
                                                      .Length(15)
                                                      .Interval(5);
                                    })
                                .MinorTickMarks(minorTickMarks =>
                                    {
                                        minorTickMarks.Offset(0.31)
                                                      .Visible(true)
                                                      .Interval(1);
                                    })
                                 .BarMarkers(barMarkers =>
                                     {
                                         barMarkers.LinearBarMarker()
                                                   .Value(18)
                                                   .InnerOffset(0.39)
                                                   .OuterOffset(0.58)
                                                   .ZIndex(5)
                                                   .FillStyle(gradient =>
                                                                {
                                                                    gradient.LinearGradient(0, 0, 1, 0)
                                                                            .ColorStops(colorStops =>
                                                                            {
                                                                                colorStops.Add(0, "#B2183E");
                                                                                colorStops.Add(0.42, "#FF3366");
                                                                                colorStops.Add(0.48, "#FF3366");
                                                                                colorStops.Add(1, "#B2183E");
                                                                            });
                                                                });
                                     })
                                .Ranges(ranges =>
                                   {
                                       ranges.LinearRange()
                                             .StartValue(-30)
                                             .EndValue(50)
                                             .FillStyle(System.Drawing.Color.Black)
                                             .InnerOffset(0.38)
                                             .OuterStartOffset(0.39)
                                             .OuterEndOffset(0.39);
                                   })
                               .Needles(needles =>
                               {
                                      needles.LinearNeedle()
                                             .Type(NeedleType.Ellipse)
                                             .LineWidth(1)
                                             .StrokeStyle(System.Drawing.Color.Black)
                                             .Value(-33)
                                             .Width(34)
                                             .Height(34)
                                             .InnerOffset(0.335)
                                             .FillStyle(gradient =>
                                                           {
                                                               gradient.RadialGradient(0.45, 0.45, 0, 0.45, 0.45, 1)
                                                                       .ColorStops(colorStops =>
                                                                           {
                                                                               colorStops.Add(0, "#FF3366");
                                                                               colorStops.Add(1, "#B2183E");
                                                                           });
                                                           });
                               });
                          
                          scales.LinearScale()
                                .Minimum(-22)
                                .Maximum(122)
                                .Interval(20)
                                .Margin(margin =>
                                    {
                                        margin.Top(6)
                                              .Left(0)
                                              .Right(0)
                                              .Bottom(26);
                                    })
                                .Labels(labels =>
                                    {
                                        labels.Offset(0.78)
                                              .Font("14px sans-serif")
                                              .HorizontalAlignment(HorizontalAlignment.Left);
                                    })
                                .MajorTickMarks(majorTickMarks =>
                                    {
                                        majorTickMarks.Offset(0.6)
                                                      .Length(15)
                                                      .Interval(10);
                                    })
                                .MinorTickMarks(minorTickMarks =>
                                    {
                                        minorTickMarks.Offset(0.6)
                                                      .Visible(true)
                                                      .Interval(2);
                                    })
                                .Ranges(ranges =>
                                   {
                                       ranges.LinearRange()
                                             .StartValue(-22)
                                             .EndValue(122)
                                             .FillStyle(System.Drawing.Color.Black)
                                             .InnerOffset(0.58)
                                             .OuterStartOffset(0.59)
                                             .OuterEndOffset(0.59);
                                   });       
                      })
        .Render() 
          )
    </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 MultipleScales()
        {
            return View();
        }

    }
}