JS Circular Line Breaks
Demonstrates using axis line breaks at tick positions.
<%@ 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 using axis line breaks at tick positions.
// Set the chart type
Chart.Type = ChartType.Gauges;
Chart.DefaultSeries.GaugeType = GaugeType.CircularBars;
Chart.Palette = new Color[] { Color.FromArgb(170, 226, 57) };
Chart.JS.Enabled = true;
Chart.LegendBox.Visible = false;
// Set the size
Chart.Width = 740;
Chart.Height = 400;
// Set the temp directory
Chart.TempDirectory = "temp";
// Debug mode. ( Will show generated errors if any )
Chart.Debug = false;
Chart.Title = "Axis Line Tick Breaks";
Chart.XAxis.SpacingPercentage = 20;
Chart.XAxis.DefaultTick.GridLine.Color = Color.FromArgb(220, 220, 220);
// Axis line breaks
Chart.YAxis.LineBreaks.Enabled = true;
Chart.YAxis.LineBreaks.Gap = .5;
Chart.YAxis.Line.Width = 7;
Chart.YAxis.Line.Color = Color.FromArgb(19, 139, 25);
Chart.YAxis.ScaleRange = new ScaleRange(0, 100);
Chart.YAxis.TickLabelPadding = -2;
Chart.YAxis.Interval = 10;
// Second Y Axis
Axis y2 = new Axis();
y2.ScaleRange = new ScaleRange(0, 100);
y2.LineBreaks.Enabled = true;
y2.LineBreaks.Gap = .3;
y2.LineBreaks.Invert = true;
y2.Line.Width = 7;
y2.Line.Color = Color.FromArgb(19, 139, 25); ;
y2.TickLabelPadding = 10;
y2.ScaleRange = new ScaleRange(0, 100);
y2.Interval = 10;
Series s1 = new Series();
Element e1 = new Element();
s1.Name = "Breaks with 0.5 gap";
e1.YValue = 25;
e1.Name = "Tank 1";
s1.Elements.Add(e1);
Series s2 = new Series();
Element e2 = new Element();
s2.Name = "Inverted breaks with 0.3 gap";
e2.YValue = 25;
e1.Name = "Tank 2";
s2.Elements.Add(e1);
s2.YAxis = y2;
//Shape Labels
dotnetCHARTING.Label l1 = new dotnetCHARTING.Label();
l1.Text = "%name";
l1.Font = new Font("Arial", 15);
l1.LineAlignment = StringAlignment.Far;
dotnetCHARTING.Label l2 = new dotnetCHARTING.Label();
l2.Text = "Tank 1<br>Level: %sum";
l2.Font = new Font("Arial", 10);
l2.LineAlignment = StringAlignment.Center;
s1.ShapeLabels.Add(l1, l2);
l1 = new dotnetCHARTING.Label();
l1.Text = "%name";
l1.Font = new Font("Arial", 15);
l1.LineAlignment = StringAlignment.Far;
l2 = new dotnetCHARTING.Label();
l2.Text = "Tank 2<br>Level: %sum";
l2.Font = new Font("Arial", 10);
l2.LineAlignment = StringAlignment.Center;
s2.ShapeLabels.Add(l1, l2);
// *DYNAMIC DATA NOTE*
// This sample uses random data to populate the chart. To populate
// a chart with database data see the following resources:
// - Classic samples folder
// - Help File > Data Tutorials
// - Sample: features/DataEngine.aspx
// Add the random data.
Chart.SeriesCollection.Add(s1, s2);
}
</script>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" />
</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 using axis line breaks at tick positions.
' Set the chart type
Chart.Type = ChartType.Gauges
Chart.DefaultSeries.GaugeType = GaugeType.CircularBars
Chart.Palette = New Color() { Color.FromArgb(170, 226, 57) }
Chart.JS.Enabled = True
Chart.LegendBox.Visible = False
' Set the size
Chart.Width = 740
Chart.Height = 400
' Set the temp directory
Chart.TempDirectory = "temp"
' Debug mode. ( Will show generated errors if any )
Chart.Debug = False
Chart.Title = "Axis Line Tick Breaks"
Chart.XAxis.SpacingPercentage = 20
Chart.XAxis.DefaultTick.GridLine.Color = Color.FromArgb(220, 220, 220)
' Axis line breaks
Chart.YAxis.LineBreaks.Enabled = True
Chart.YAxis.LineBreaks.Gap =.5
Chart.YAxis.Line.Width = 7
Chart.YAxis.Line.Color = Color.FromArgb(19, 139, 25)
Chart.YAxis.ScaleRange = New ScaleRange(0, 100)
Chart.YAxis.TickLabelPadding = -2
Chart.YAxis.Interval = 10
' Second Y Axis
Dim y2 As Axis = New Axis()
y2.ScaleRange = New ScaleRange(0, 100)
y2.LineBreaks.Enabled = True
y2.LineBreaks.Gap =.3
y2.LineBreaks.Invert = True
y2.Line.Width = 7
y2.Line.Color = Color.FromArgb(19, 139, 25)
y2.TickLabelPadding = 10
y2.ScaleRange = New ScaleRange(0, 100)
y2.Interval = 10
Dim s1 As Series = New Series()
Dim e1 As Element = New Element()
s1.Name = "Breaks with 0.5 gap"
e1.YValue = 25
e1.Name = "Tank 1"
s1.Elements.Add(e1)
Dim s2 As Series = New Series()
Dim e2 As Element = New Element()
s2.Name = "Inverted breaks with 0.3 gap"
e2.YValue = 25
e1.Name = "Tank 2"
s2.Elements.Add(e1)
s2.YAxis = y2
'Shape Labels
Dim l1 As dotnetCHARTING.Label = New dotnetCHARTING.Label()
l1.Text = "%name"
l1.Font = New Font("Arial", 15)
l1.LineAlignment = StringAlignment.Far
Dim l2 As dotnetCHARTING.Label = New dotnetCHARTING.Label()
l2.Text = "Tank 1<br>Level: %sum"
l2.Font = New Font("Arial", 10)
l2.LineAlignment = StringAlignment.Center
s1.ShapeLabels.Add(l1, l2)
l1 = New dotnetCHARTING.Label()
l1.Text = "%name"
l1.Font = New Font("Arial", 15)
l1.LineAlignment = StringAlignment.Far
l2 = New dotnetCHARTING.Label()
l2.Text = "Tank 2<br>Level: %sum"
l2.Font = New Font("Arial", 10)
l2.LineAlignment = StringAlignment.Center
s2.ShapeLabels.Add(l1, l2)
' *DYNAMIC DATA NOTE*
' This sample uses random data to populate the chart. To populate
' a chart with database data see the following resources:
' - Classic samples folder
' - Help File > Data Tutorials
' - Sample: features/DataEngine.aspx
' Add the random data.
Chart.SeriesCollection.Add(s1, s2)
End Sub
</script>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" />
</div>
</body>
</html>
Previous