This sample demonstrates how to specify segmented display live data.
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() .ID("jqSegmentedDisplay") .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> <script lang="javascript" type="text/javascript"> function updateDisplay() { var randomValue = Math.round(Math.random() * 1000000); $('#jqSegmentedDisplay').jqSegmentedDisplay('option', 'text', randomValue.toString()); setTimeout('updateDisplay()', 1000); } $(document).ready(function () { updateDisplay(); }); </script> </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() .ID("jqSegmentedDisplay") .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> <script lang="javascript" type="text/javascript"> function updateDisplay() { var randomValue = Math.round(Math.random() * 1000000); $('#jqSegmentedDisplay').jqSegmentedDisplay('option', 'text', randomValue.toString()); setTimeout('updateDisplay()', 1000); } $(document).ready(function () { updateDisplay(); }); </script> </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 LiveData() { return View(); } } } |