Radial Gauge

Linear Gauge

Bullet Graph

Segmented Display


This sample demonstrates how to specify bullet graph comparative measures.

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);
                               })
           .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);
                           });
               })
           .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");
                                            });
                                        });

                   comparativeMeasures.ComparativeMeasure().Value(60);
                   comparativeMeasures.ComparativeMeasure()
                                      .Value(50)
                                      .InnerOffset(0.2)
                                      .OuterOffset(0.8)
                                      .Width(8);
               })
        .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);
                               })
           .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);
                           });
               })
           .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");
                                            });
                                        });

                   comparativeMeasures.ComparativeMeasure().Value(60);
                   comparativeMeasures.ComparativeMeasure()
                                      .Value(50)
                                      .InnerOffset(0.2)
                                      .OuterOffset(0.8)
                                      .Width(8);
               })
        .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 ComparativeMeasures()
        {
            return View();
        }

    }
}