|
This sample demonstrates how to specify multiple radial gauge scales.
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.JQRadialGauge().RadialGauge()
.Background("#F7F7F7")
.Width(350)
.Height(350)
.Border(border =>
{
border.LineWidth(6)
.StrokeStyle("#76786A")
.Padding(16);
})
.Shadows(true)
.Anchor(anchor =>
{
anchor.Visible(true)
.Radius(0.1)
.FillStyle(gradient =>
{
gradient.RadialGradient(0.35, 0.35, 0, 0.35, 0.35, 1)
.ColorStops(stop =>
{
stop.Add(0, "#4F6169");
stop.Add(1, "#252E32");
});
});
})
.Annotations(annotations =>
{
annotations.Annotation()
.Text("km/h")
.Font("16px sans-serif")
.FillStyle("#339CFF")
.HorizontalOffset(0.5)
.VerticalOffset(0.76);
annotations.Annotation()
.Text("MPH")
.Font("16px sans-serif")
.FillStyle("#FF3366")
.HorizontalOffset(0.5)
.VerticalOffset(0.81);
})
.Tooltips(tooltips =>
{
tooltips.Disabled(false).Highlighting(true);
})
.Animation(new TimeSpan(0,0,1))
.Scales(scales =>
{
scales.RadialScale()
.Minimum(0)
.Maximum(150)
.StartAngle(120)
.EndAngle(420)
.Interval(10)
.MajorTickMarks(majorTickMarks =>
{
majorTickMarks.Offset(0.82)
.Length(14)
.LineWidth(2)
.StrokeStyle("#FF3366");
})
.MinorTickMarks(minorTickMarks =>
{
minorTickMarks.Visible(true)
.Offset(0.82)
.Length(8)
.LineWidth(2)
.Interval(2)
.StrokeStyle("#FF3366");
})
.Labels(labels =>
{
labels.Offset(1);
})
.Needles(needles =>
{
needles.RadialNeedle()
.Value(105)
.Type(RadialNeedleType.Pointer)
.MediumOffset(0.7)
.OuterOffset(0.8)
.Width(10)
.FillStyle("#252E32");
})
.Ranges(ranges =>
{
ranges.RadialRange()
.InnerStartOffset(0.81)
.InnerEndOffset(0.81)
.OuterOffset(0.83)
.StartValue(0)
.EndValue(150)
.FillStyle("#FF3366");
});
scales.RadialScale()
.Minimum(0)
.Maximum(240)
.Interval(20)
.StartAngle(120)
.EndAngle(420)
.Labels(labels =>
{
labels.Offset(0.60);
})
.MajorTickMarks(majorTickMarks =>
{
majorTickMarks.Length(14)
.LineWidth(2)
.Offset(0.68)
.StrokeStyle("#339CFF");
})
.MinorTickMarks(minorTickMarks =>
{
minorTickMarks.Visible(true)
.Length(8)
.LineWidth(2)
.Interval(5)
.Offset(0.72)
.StrokeStyle("#339CFF");
})
.Ranges(ranges =>
{
ranges.RadialRange()
.OuterOffset(0.79)
.InnerStartOffset(0.77)
.InnerEndOffset(0.77)
.StartValue(0)
.EndValue(240)
.FillStyle("#339CFF");
});
})
.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.JQRadialGauge().RadialGauge()
.Background("#F7F7F7")
.Width(350)
.Height(350)
.Border(border =>
{
border.LineWidth(6)
.StrokeStyle("#76786A")
.Padding(16);
})
.Shadows(true)
.Anchor(anchor =>
{
anchor.Visible(true)
.Radius(0.1)
.FillStyle(gradient =>
{
gradient.RadialGradient(0.35, 0.35, 0, 0.35, 0.35, 1)
.ColorStops(stop =>
{
stop.Add(0, "#4F6169");
stop.Add(1, "#252E32");
});
});
})
.Annotations(annotations =>
{
annotations.Annotation()
.Text("km/h")
.Font("16px sans-serif")
.FillStyle("#339CFF")
.HorizontalOffset(0.5)
.VerticalOffset(0.76);
annotations.Annotation()
.Text("MPH")
.Font("16px sans-serif")
.FillStyle("#FF3366")
.HorizontalOffset(0.5)
.VerticalOffset(0.81);
})
.Tooltips(tooltips =>
{
tooltips.Disabled(false).Highlighting(true);
})
.Animation(new TimeSpan(0,0,1))
.Scales(scales =>
{
scales.RadialScale()
.Minimum(0)
.Maximum(150)
.StartAngle(120)
.EndAngle(420)
.Interval(10)
.MajorTickMarks(majorTickMarks =>
{
majorTickMarks.Offset(0.82)
.Length(14)
.LineWidth(2)
.StrokeStyle("#FF3366");
})
.MinorTickMarks(minorTickMarks =>
{
minorTickMarks.Visible(true)
.Offset(0.82)
.Length(8)
.LineWidth(2)
.Interval(2)
.StrokeStyle("#FF3366");
})
.Labels(labels =>
{
labels.Offset(1);
})
.Needles(needles =>
{
needles.RadialNeedle()
.Value(105)
.Type(RadialNeedleType.Pointer)
.MediumOffset(0.7)
.OuterOffset(0.8)
.Width(10)
.FillStyle("#252E32");
})
.Ranges(ranges =>
{
ranges.RadialRange()
.InnerStartOffset(0.81)
.InnerEndOffset(0.81)
.OuterOffset(0.83)
.StartValue(0)
.EndValue(150)
.FillStyle("#FF3366");
});
scales.RadialScale()
.Minimum(0)
.Maximum(240)
.Interval(20)
.StartAngle(120)
.EndAngle(420)
.Labels(labels =>
{
labels.Offset(0.60);
})
.MajorTickMarks(majorTickMarks =>
{
majorTickMarks.Length(14)
.LineWidth(2)
.Offset(0.68)
.StrokeStyle("#339CFF");
})
.MinorTickMarks(minorTickMarks =>
{
minorTickMarks.Visible(true)
.Length(8)
.LineWidth(2)
.Interval(5)
.Offset(0.72)
.StrokeStyle("#339CFF");
})
.Ranges(ranges =>
{
ranges.RadialRange()
.OuterOffset(0.79)
.InnerStartOffset(0.77)
.InnerEndOffset(0.77)
.StartValue(0)
.EndValue(240)
.FillStyle("#339CFF");
});
})
.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 MultipleScales()
{
return View();
}
}
}
|
Follow us on Twitter