|
This sample demonstrates how to specify multiple linear 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.JQLinearGauge().LinearGauge()
.ID("jqLinearGauge")
.Orientation(GaugeOrientation.Vertical)
.Background("#F7F7F7")
.Width(150)
.Height(400)
.Border(border =>
{
border.LineWidth(4)
.StrokeStyle("#76786A")
.Padding(10);
})
.Shadows(true)
.Tooltips(tooltips =>
{
tooltips.Disabled(true).Highlighting(false);
})
.Animation(new TimeSpan(0,0,1))
.Scales(scales =>
{
scales.LinearScale()
.Minimum(-30)
.Maximum(50)
.Interval(10)
.Margin(margin =>
{
margin.Top(6)
.Left(0)
.Right(0)
.Bottom(26);
})
.Labels(labels =>
{
labels.Offset(0.2)
.Font("14px sans-serif")
.HorizontalAlignment(HorizontalAlignment.Right);
})
.MajorTickMarks(majorTickMarks =>
{
majorTickMarks.Offset(0.25)
.Length(15)
.Interval(5);
})
.MinorTickMarks(minorTickMarks =>
{
minorTickMarks.Offset(0.31)
.Visible(true)
.Interval(1);
})
.BarMarkers(barMarkers =>
{
barMarkers.LinearBarMarker()
.Value(18)
.InnerOffset(0.39)
.OuterOffset(0.58)
.ZIndex(5)
.FillStyle(gradient =>
{
gradient.LinearGradient(0, 0, 1, 0)
.ColorStops(colorStops =>
{
colorStops.Add(0, "#B2183E");
colorStops.Add(0.42, "#FF3366");
colorStops.Add(0.48, "#FF3366");
colorStops.Add(1, "#B2183E");
});
});
})
.Ranges(ranges =>
{
ranges.LinearRange()
.StartValue(-30)
.EndValue(50)
.FillStyle(System.Drawing.Color.Black)
.InnerOffset(0.38)
.OuterStartOffset(0.39)
.OuterEndOffset(0.39);
})
.Needles(needles =>
{
needles.LinearNeedle()
.Type(NeedleType.Ellipse)
.LineWidth(1)
.StrokeStyle(System.Drawing.Color.Black)
.Value(-33)
.Width(34)
.Height(34)
.InnerOffset(0.335)
.FillStyle(gradient =>
{
gradient.RadialGradient(0.45, 0.45, 0, 0.45, 0.45, 1)
.ColorStops(colorStops =>
{
colorStops.Add(0, "#FF3366");
colorStops.Add(1, "#B2183E");
});
});
});
scales.LinearScale()
.Minimum(-22)
.Maximum(122)
.Interval(20)
.Margin(margin =>
{
margin.Top(6)
.Left(0)
.Right(0)
.Bottom(26);
})
.Labels(labels =>
{
labels.Offset(0.78)
.Font("14px sans-serif")
.HorizontalAlignment(HorizontalAlignment.Left);
})
.MajorTickMarks(majorTickMarks =>
{
majorTickMarks.Offset(0.6)
.Length(15)
.Interval(10);
})
.MinorTickMarks(minorTickMarks =>
{
minorTickMarks.Offset(0.6)
.Visible(true)
.Interval(2);
})
.Ranges(ranges =>
{
ranges.LinearRange()
.StartValue(-22)
.EndValue(122)
.FillStyle(System.Drawing.Color.Black)
.InnerOffset(0.58)
.OuterStartOffset(0.59)
.OuterEndOffset(0.59);
});
})
.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.JQLinearGauge().LinearGauge()
.ID("jqLinearGauge")
.Orientation(GaugeOrientation.Vertical)
.Background("#F7F7F7")
.Width(150)
.Height(400)
.Border(border =>
{
border.LineWidth(4)
.StrokeStyle("#76786A")
.Padding(10);
})
.Shadows(true)
.Tooltips(tooltips =>
{
tooltips.Disabled(true).Highlighting(false);
})
.Animation(new TimeSpan(0,0,1))
.Scales(scales =>
{
scales.LinearScale()
.Minimum(-30)
.Maximum(50)
.Interval(10)
.Margin(margin =>
{
margin.Top(6)
.Left(0)
.Right(0)
.Bottom(26);
})
.Labels(labels =>
{
labels.Offset(0.2)
.Font("14px sans-serif")
.HorizontalAlignment(HorizontalAlignment.Right);
})
.MajorTickMarks(majorTickMarks =>
{
majorTickMarks.Offset(0.25)
.Length(15)
.Interval(5);
})
.MinorTickMarks(minorTickMarks =>
{
minorTickMarks.Offset(0.31)
.Visible(true)
.Interval(1);
})
.BarMarkers(barMarkers =>
{
barMarkers.LinearBarMarker()
.Value(18)
.InnerOffset(0.39)
.OuterOffset(0.58)
.ZIndex(5)
.FillStyle(gradient =>
{
gradient.LinearGradient(0, 0, 1, 0)
.ColorStops(colorStops =>
{
colorStops.Add(0, "#B2183E");
colorStops.Add(0.42, "#FF3366");
colorStops.Add(0.48, "#FF3366");
colorStops.Add(1, "#B2183E");
});
});
})
.Ranges(ranges =>
{
ranges.LinearRange()
.StartValue(-30)
.EndValue(50)
.FillStyle(System.Drawing.Color.Black)
.InnerOffset(0.38)
.OuterStartOffset(0.39)
.OuterEndOffset(0.39);
})
.Needles(needles =>
{
needles.LinearNeedle()
.Type(NeedleType.Ellipse)
.LineWidth(1)
.StrokeStyle(System.Drawing.Color.Black)
.Value(-33)
.Width(34)
.Height(34)
.InnerOffset(0.335)
.FillStyle(gradient =>
{
gradient.RadialGradient(0.45, 0.45, 0, 0.45, 0.45, 1)
.ColorStops(colorStops =>
{
colorStops.Add(0, "#FF3366");
colorStops.Add(1, "#B2183E");
});
});
});
scales.LinearScale()
.Minimum(-22)
.Maximum(122)
.Interval(20)
.Margin(margin =>
{
margin.Top(6)
.Left(0)
.Right(0)
.Bottom(26);
})
.Labels(labels =>
{
labels.Offset(0.78)
.Font("14px sans-serif")
.HorizontalAlignment(HorizontalAlignment.Left);
})
.MajorTickMarks(majorTickMarks =>
{
majorTickMarks.Offset(0.6)
.Length(15)
.Interval(10);
})
.MinorTickMarks(minorTickMarks =>
{
minorTickMarks.Offset(0.6)
.Visible(true)
.Interval(2);
})
.Ranges(ranges =>
{
ranges.LinearRange()
.StartValue(-22)
.EndValue(122)
.FillStyle(System.Drawing.Color.Black)
.InnerOffset(0.58)
.OuterStartOffset(0.59)
.OuterEndOffset(0.59);
});
})
.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