Radial Gauge

Linear Gauge

Bullet Graph

Segmented Display


This sample demonstrates how to specify segmented display background.

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("#AAD7FF")
                .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("#AAD7FF")
                .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 DisplayBackground()
        {
            return View();
        }

    }
}