This sample demonstrates how to specify bullet graph 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.JQBulletGraph().BulletGraph() .ID("jqBulletGraph") .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)) .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> <script lang="javascript" type="text/javascript"> var values = { v1: 80, v2: 70, v3: 90 }; function updateGauge() { $(values).animate({ v1: Math.round(20 + Math.random() * 80), v2: Math.round(20 + Math.random() * 80) }, { duration: 600, step: function () { var comparativeMeasures = $('#jqBulletGraph').jqBulletGraph('option', 'comparativeMeasures'); comparativeMeasures[0].value = this.v1; var featuredMeasures = $('#jqBulletGraph').jqBulletGraph('option', 'featuredMeasures'); featuredMeasures[0].value = this.v2; $('#jqBulletGraph').jqBulletGraph('update'); }, complete: function () { setTimeout('updateGraph()', 400); } }); } $(document).ready(function () { updateGauge(); }); </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.JQBulletGraph().BulletGraph() .ID("jqBulletGraph") .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)) .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> <script lang="javascript" type="text/javascript"> var values = { v1: 80, v2: 70, v3: 90 }; function updateGauge() { $(values).animate({ v1: Math.round(20 + Math.random() * 80), v2: Math.round(20 + Math.random() * 80) }, { duration: 600, step: function () { var comparativeMeasures = $('#jqBulletGraph').jqBulletGraph('option', 'comparativeMeasures'); comparativeMeasures[0].value = this.v1; var featuredMeasures = $('#jqBulletGraph').jqBulletGraph('option', 'featuredMeasures'); featuredMeasures[0].value = this.v2; $('#jqBulletGraph').jqBulletGraph('update'); }, complete: function () { setTimeout('updateGraph()', 400); } }); } $(document).ready(function () { updateGauge(); }); </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(); } } } |