JS Gauge Styling
Some gauge styling methods.
<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING"%>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Drawing.Drawing2D" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script runat="server">
void Page_Load(Object sender,EventArgs e)
{
// Demonstrates some gauge styling methods.
// Set common properties for each shart.
SetChartProperties(Chart);
SetChartProperties(Chart1);
SetChartProperties(Chart2);
// Setting the shading mode changes how the needle appears.
Chart.ShadingEffectMode = ShadingEffectMode.One;
Chart1.ShadingEffectMode = ShadingEffectMode.Two;
Chart2.ShadingEffectMode = ShadingEffectMode.Three;
// CHART 1
// Style the first chart's axis tick marks.
Chart.YAxis.Interval = 20;
Chart.YAxis.MinorInterval = 5;
Chart.YAxis.DefaultTick.Line.Length = 10;
Chart.YAxis.DefaultTick.Line.Width = 3;
Chart.YAxis.DefaultMinorTick.Line.Length = 5;
Chart.LegendBox.Orientation = dotnetCHARTING.Orientation.Top;
// Add an element.
Chart.SeriesCollection.Add(new Series("", new Element("", 50)));
// CHART 2
// Update the main y axis settings
Chart1.YAxis.Minimum = 0;
Chart1.YAxis.Maximum = 100;
Chart1.YAxis.Interval = 25;
Chart1.YAxis.OrientationAngle = 45;
Chart1.YAxis.RangeAngle = 90;
Chart1.YAxis.MinorInterval = 0;
Chart1.YAxis.Markers.Clear();
Chart1.YAxis.Markers.Add(new AxisMarker("", new Background(Color.Red), 0, 25));
Chart1.YAxis.DefaultTick.Label.Font = new Font("Arial", 14, FontStyle.Bold);
// Add an element.
Chart1.SeriesCollection.Add(new Series("Fuel", new Element("", 80)));
// CHART 3
Chart2.DefaultSeries.Background.Color = Color.LightGreen;
// Change the gauge outline.
Chart2.YAxis.Line.Width = 2;
Chart2.YAxis.Line.DashStyle = DashStyle.Dash;
Chart2.YAxis.Line.Color = Color.Red;
Chart2.YAxis.DefaultTick.Line.Color = Color.DarkGreen;
Chart2.ClipGauges = false;
// Add an element.
Chart2.SeriesCollection.Add(new Series("",new Element("",50)));
}
void SetChartProperties(Chart c)
{
c.Type = ChartType.Gauges;
c.Width = 300;
c.Height = 300;
c.TempDirectory = "temp";
c.Debug = true;
c.LegendBox.Position = LegendBoxPosition.None;
c.DefaultSeries.Background.Color = Color.White;
c.JS.Enabled = true;
AxisMarker am = new AxisMarker("",new Background(Color.Red),45,60);
Background bg = new Background(Color.Orange);
bg.HatchStyle = HatchStyle.LightUpwardDiagonal;
bg.HatchColor = Color.White;
AxisMarker am1 = new AxisMarker("",bg,35,45);
c.YAxis.Markers.Add(am);
c.YAxis.Markers.Add(am1);
}
</script>
</head>
<body>
<div align="center">
<dotnet:Chart id="Chart" runat="server" Width="568px" Height="344px">
</dotnet:Chart>
<dotnet:Chart id="Chart1" runat="server" Width="568px" Height="344px">
</dotnet:Chart>
<dotnet:Chart id="Chart2" runat="server" Width="568px" Height="344px">
</dotnet:Chart>
</div>
</body>
</html>
<%@ Page Language="vb" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING"%>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Drawing.Drawing2D" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script runat="server">
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' Demonstrates some gauge styling methods.
' Set common properties for each shart.
SetChartProperties(Chart)
SetChartProperties(Chart1)
SetChartProperties(Chart2)
' Setting the shading mode changes how the needle appears.
Chart.ShadingEffectMode = ShadingEffectMode.One
Chart1.ShadingEffectMode = ShadingEffectMode.Two
Chart2.ShadingEffectMode = ShadingEffectMode.Three
' CHART 1
' Style the first chart's axis tick marks.
Chart.YAxis.Interval = 20
Chart.YAxis.MinorInterval = 5
Chart.YAxis.DefaultTick.Line.Length = 10
Chart.YAxis.DefaultTick.Line.Width = 3
Chart.YAxis.DefaultMinorTick.Line.Length = 5
Chart.LegendBox.Orientation = dotnetCHARTING.Orientation.Top
' Add an element.
Chart.SeriesCollection.Add(New Series("", New Element("", 50)))
' CHART 2
' Update the main y axis settings
Chart1.YAxis.Minimum = 0
Chart1.YAxis.Maximum = 100
Chart1.YAxis.Interval = 25
Chart1.YAxis.OrientationAngle = 45
Chart1.YAxis.RangeAngle = 90
Chart1.YAxis.MinorInterval = 0
Chart1.YAxis.Markers.Clear()
Chart1.YAxis.Markers.Add(New AxisMarker("", New Background(Color.Red), 0, 25))
Chart1.YAxis.DefaultTick.Label.Font = New Font("Arial", 14, FontStyle.Bold)
' Add an element.
Chart1.SeriesCollection.Add(New Series("Fuel", New Element("", 80)))
' CHART 3
Chart2.DefaultSeries.Background.Color = Color.LightGreen
' Change the gauge outline.
Chart2.YAxis.Line.Width = 2
Chart2.YAxis.Line.DashStyle = DashStyle.Dash
Chart2.YAxis.Line.Color = Color.Red
Chart2.YAxis.DefaultTick.Line.Color = Color.DarkGreen
Chart2.ClipGauges = False
' Add an element.
Chart2.SeriesCollection.Add(New Series("",New Element("",50)))
End Sub
Sub SetChartProperties(ByVal c As Chart)
c.Type = ChartType.Gauges
c.Width = 300
c.Height = 300
c.TempDirectory = "temp"
c.Debug = True
c.LegendBox.Position = LegendBoxPosition.None
c.DefaultSeries.Background.Color = Color.White
c.JS.Enabled = True
Dim am As AxisMarker = New AxisMarker("",New Background(Color.Red),45,60)
Dim bg As Background = New Background(Color.Orange)
bg.HatchStyle = HatchStyle.LightUpwardDiagonal
bg.HatchColor = Color.White
Dim am1 As AxisMarker = New AxisMarker("",bg,35,45)
c.YAxis.Markers.Add(am)
c.YAxis.Markers.Add(am1)
End Sub
</script>
</head>
<body>
<div align="center">
<dotnet:Chart id="Chart" runat="server" Width="568px" Height="344px">
</dotnet:Chart>
<dotnet:Chart id="Chart1" runat="server" Width="568px" Height="344px">
</dotnet:Chart>
<dotnet:Chart id="Chart2" runat="server" Width="568px" Height="344px">
</dotnet:Chart>
</div>
</body>
</html>
Previous