Radial Gauge

Linear Gauge

Bullet Graph

Segmented Display


This sample demonstrates how to specify segment interval for the segmented displays. The segmentInterval option specifies the distance between segments in the digit.

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>
<body>
    <div>
        <%=Html.JQSegmentedDisplay().SegmentedDisplay()
                .Width(500)
                .Height(100)
                .Background("#DCDCDC")
                .Digits(10)
                .SegmentMode(SegmentMode.SevenSegment)
                .Text("0123456789")
                .TextForeground("#333333")
                .TextForegroundUnlit("rgba(201, 201, 201, 0.5)")
                .Border(border =>
                    {
                        border.StrokeStyle("#76786A").Padding(10).LineWidth(4);
                    })
        .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>
<body>
    <div>
          @(Html.JQSegmentedDisplay().SegmentedDisplay()
                .Width(500)
                .Height(100)
                .Background("#DCDCDC")
                .Digits(10)
                .SegmentMode(SegmentMode.SevenSegment)
                .Text("0123456789")
                .TextForeground("#333333")
                .TextForegroundUnlit("rgba(201, 201, 201, 0.5)")
                .Border(border =>
                    {
                        border.StrokeStyle("#76786A").Padding(10).LineWidth(4);
                    })
        .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 SegmentInterval()
        {
            return View();
        }

    }
}