|
Defines the positive, or negative, offset value from the start of the first interval. The interval offset can be applied to labels and the tick marks.
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.JQLinearGauge().LinearGauge()
.ID("jqLinearGauge")
.Background("#F7F7F7")
.Width(400)
.Height(100)
.Border(border =>
{
border.LineWidth(4)
.StrokeStyle("#76786A")
.Padding(10);
})
.Shadows(true)
.Tooltips(tooltips =>
{
tooltips.Disabled(false).Highlighting(true);
})
.Animation(new TimeSpan(0,0,1))
.Scales(scales =>
{
scales.LinearScale()
.Minimum(0)
.Maximum(100)
.MajorTickMarks(majorTickMarks =>
{
majorTickMarks.Offset(0.28)
.Length(10)
.LineWidth(2)
.IntervalOffset(30);
})
.MinorTickMarks(minorTickMarks =>
{
minorTickMarks.Offset(0.32)
.Visible(true)
.Length(6)
.LineWidth(2)
.Interval(2)
.IntervalOffset(30);
})
.Labels(labels =>
{
labels.Offset(0.16).IntervalOffset(30);
})
.Needles(needles =>
{
needles.LinearNeedle()
.Value(80)
.Type(NeedleType.Pointer)
.InnerOffset(0.5)
.OuterOffset(1)
.FillStyle(gradient =>
{
gradient.LinearGradient(0.5, 0, 0.5, 1)
.ColorStops(colorStops =>
{
colorStops.Add(0, "#4F6169");
colorStops.Add(1, "#252E32");
});
});
})
.Ranges(ranges =>
{
ranges.LinearRange()
.InnerOffset(0.46)
.OuterStartOffset(0.64)
.OuterEndOffset(0.75)
.StartValue(0)
.EndValue(100)
.FillStyle(gradient =>
{
gradient.LinearGradient(0.5, 0, 0.5, 1).ColorStops(stops =>
{
stops.Add(0, "#C5F80B");
stops.Add(1, "#6B8901");
});
});
});
})
.Render()%>
</div>
<script lang="javascript" type="text/javascript">
$('#jqLinearGauge').bind('tooltipFormat', function (e, data) {
var tooltip = '<b>Element: ' + data.elementType + '</b> ' + '<br />';
switch (data.elementType) {
case 'needle':
tooltip += 'Value: ' + data.value;
break;
case 'range':
tooltip += 'Start Value: ' + data.startValue + '<br/>End Value: ' + data.endValue;
}
return tooltip;
});
</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.JQLinearGauge().LinearGauge()
.ID("jqLinearGauge")
.Background("#F7F7F7")
.Width(400)
.Height(100)
.Border(border =>
{
border.LineWidth(4)
.StrokeStyle("#76786A")
.Padding(10);
})
.Shadows(true)
.Tooltips(tooltips =>
{
tooltips.Disabled(false).Highlighting(true);
})
.Animation(new TimeSpan(0,0,1))
.Scales(scales =>
{
scales.LinearScale()
.Minimum(0)
.Maximum(100)
.MajorTickMarks(majorTickMarks =>
{
majorTickMarks.Offset(0.28)
.Length(10)
.LineWidth(2)
.IntervalOffset(30);
})
.MinorTickMarks(minorTickMarks =>
{
minorTickMarks.Offset(0.32)
.Visible(true)
.Length(6)
.LineWidth(2)
.Interval(2)
.IntervalOffset(30);
})
.Labels(labels =>
{
labels.Offset(0.16).IntervalOffset(30);
})
.Needles(needles =>
{
needles.LinearNeedle()
.Value(80)
.Type(NeedleType.Pointer)
.InnerOffset(0.5)
.OuterOffset(1)
.FillStyle(gradient =>
{
gradient.LinearGradient(0.5, 0, 0.5, 1)
.ColorStops(colorStops =>
{
colorStops.Add(0, "#4F6169");
colorStops.Add(1, "#252E32");
});
});
})
.Ranges(ranges =>
{
ranges.LinearRange()
.InnerOffset(0.46)
.OuterStartOffset(0.64)
.OuterEndOffset(0.75)
.StartValue(0)
.EndValue(100)
.FillStyle(gradient =>
{
gradient.LinearGradient(0.5, 0, 0.5, 1).ColorStops(stops =>
{
stops.Add(0, "#C5F80B");
stops.Add(1, "#6B8901");
});
});
});
})
.Render()
)
</div>
<script lang="javascript" type="text/javascript">
$('#jqLinearGauge').bind('tooltipFormat', function (e, data) {
var tooltip = '<b>Element: ' + data.elementType + '</b> ' + '<br />';
switch (data.elementType) {
case 'needle':
tooltip += 'Value: ' + data.value;
break;
case 'range':
tooltip += 'Start Value: ' + data.startValue + '<br/>End Value: ' + data.endValue;
}
return tooltip;
});
</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 IntervalOffset()
{
return View();
}
}
}
|
Follow us on Twitter