Radial Gauge

Linear Gauge

Bullet Graph

Segmented Display


This sample demonstrates how to specify annotations for bullet graph.

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.JQBulletGraph().BulletGraph()
            .Orientation(GaugeOrientation.Horizontal)
            .Width(400)
            .Height(80)
            .Border(border =>
                             {
                                 border.LineWidth(0);
                             })
           .Tooltips(tooltips =>
                               {
                                   tooltips.Disabled(false).Highlighting(false);
                               })
           .Animation(new TimeSpan(0,0,1))
           .Annotations(annotations =>
               {
                   annotations.Annotation().Text("Range 1")
                                           .Font("12px sans-serif")
                                           .HorizontalOffset(0.2)
                                           .VerticalOffset(0.55)
                                           .FillStyle("white");

                   annotations.Annotation().Text("Range 2")
                        .Font("12px sans-serif")
                        .HorizontalOffset(0.6)
                        .VerticalOffset(0.55)
                        .FillStyle("white");
               })
           .QuantitativeScale(scale =>
               {
                   scale.Minimum(0)
                        .Maximum(100)
                        .Title("Main Scale")
                        .Background(gradient =>
                            {
                                gradient.LinearGradient(0, 1, 0, 0).ColorStops(colorStops =>
                                    {
                                        colorStops.Add(0, "#A4D020");
                                        colorStops.Add(1, "#BFFE01");
                                    });
                            })
                        .Labels(labels =>
                           {
                               labels.Offset(0.95);
                           })
                        .QualitativeRanges(ranges =>
                           {
                               ranges.QualitativeRange()
                                     .Value(47)
                                     .FillStyle(gradient =>
                                       {
                                           gradient.LinearGradient(0, 0, 0, 1).ColorStops(colorStops =>
                                               {
                                                   colorStops.Add(0, "#61B603");
                                                   colorStops.Add(1, "#448100");
                                               });
                                       });

                               ranges.QualitativeRange()
                                     .Value(70)
                                     .FillStyle(gradient =>
                                     {
                                         gradient.LinearGradient(0, 1, 0, 0).ColorStops(colorStops =>
                                         {
                                             colorStops.Add(0, "#87B202");
                                             colorStops.Add(1, "#A6DC01");
                                         });
                                     });
                           });
               })
           .ComparativeMeasures(comparativeMeasures =>
               {
                   comparativeMeasures.ComparativeMeasure()
                                      .Title("Comparative Measure")
                                      .Value(80)
                                      .FillStyle(gradient =>
                                        {
                                            gradient.LinearGradient(0, 0, 1, 0).ColorStops(colorStops =>
                                            {
                                                colorStops.Add(0, "#E4E4E4");
                                                colorStops.Add(0.552, "#FFFFFF");
                                            });
                                        });
               })
           .FeaturedMeasures(featuredMeasures =>
               {
                   featuredMeasures.FeaturedMeasure()
                                   .Title("Featured Measure")
                                   .Value(90)
                                   .InnerOffset(0.4)
                                   .OuterOffset(0.6)
                                   .FillStyle(gradient =>
                                      {
                                          gradient.LinearGradient(0, 0, 0, 1).ColorStops(colorStops =>
                                          {
                                              colorStops.Add(0, "#BABABA");
                                              colorStops.Add(0.495, "#FFFFFF");
                                          });
                                      });
               })
        .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.JQBulletGraph().BulletGraph()
            .Orientation(GaugeOrientation.Horizontal)
            .Width(400)
            .Height(80)
            .Border(border =>
                             {
                                 border.LineWidth(0);
                             })
           .Tooltips(tooltips =>
                               {
                                   tooltips.Disabled(false).Highlighting(false);
                               })
           .Animation(new TimeSpan(0,0,1))
           .Annotations(annotations =>
               {
                   annotations.Annotation().Text("Range 1")
                                           .Font("12px sans-serif")
                                           .HorizontalOffset(0.2)
                                           .VerticalOffset(0.55)
                                           .FillStyle("white");

                   annotations.Annotation().Text("Range 2")
                        .Font("12px sans-serif")
                        .HorizontalOffset(0.6)
                        .VerticalOffset(0.55)
                        .FillStyle("white");
               })
           .QuantitativeScale(scale =>
               {
                   scale.Minimum(0)
                        .Maximum(100)
                        .Title("Main Scale")
                        .Background(gradient =>
                            {
                                gradient.LinearGradient(0, 1, 0, 0).ColorStops(colorStops =>
                                    {
                                        colorStops.Add(0, "#A4D020");
                                        colorStops.Add(1, "#BFFE01");
                                    });
                            })
                        .Labels(labels =>
                           {
                               labels.Offset(0.95);
                           })
                        .QualitativeRanges(ranges =>
                           {
                               ranges.QualitativeRange()
                                     .Value(47)
                                     .FillStyle(gradient =>
                                       {
                                           gradient.LinearGradient(0, 0, 0, 1).ColorStops(colorStops =>
                                               {
                                                   colorStops.Add(0, "#61B603");
                                                   colorStops.Add(1, "#448100");
                                               });
                                       });

                               ranges.QualitativeRange()
                                     .Value(70)
                                     .FillStyle(gradient =>
                                     {
                                         gradient.LinearGradient(0, 1, 0, 0).ColorStops(colorStops =>
                                         {
                                             colorStops.Add(0, "#87B202");
                                             colorStops.Add(1, "#A6DC01");
                                         });
                                     });
                           });
               })
           .ComparativeMeasures(comparativeMeasures =>
               {
                   comparativeMeasures.ComparativeMeasure()
                                      .Title("Comparative Measure")
                                      .Value(80)
                                      .FillStyle(gradient =>
                                        {
                                            gradient.LinearGradient(0, 0, 1, 0).ColorStops(colorStops =>
                                            {
                                                colorStops.Add(0, "#E4E4E4");
                                                colorStops.Add(0.552, "#FFFFFF");
                                            });
                                        });
               })
           .FeaturedMeasures(featuredMeasures =>
               {
                   featuredMeasures.FeaturedMeasure()
                                   .Title("Featured Measure")
                                   .Value(90)
                                   .InnerOffset(0.4)
                                   .OuterOffset(0.6)
                                   .FillStyle(gradient =>
                                      {
                                          gradient.LinearGradient(0, 0, 0, 1).ColorStops(colorStops =>
                                          {
                                              colorStops.Add(0, "#BABABA");
                                              colorStops.Add(0.495, "#FFFFFF");
                                          });
                                      });
               })
        .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 Annotations()
        {
            return View();
        }

    }
}