Gallery
Affecting Ranges
<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING"%>
<%@ Import Namespace="System.Drawing" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script runat="server">
void Page_Load(Object sender,EventArgs e)
{
Chart.TempDirectory = "temp";
Chart.Debug = true;
Chart.Title = "Tick affects the axis range.";
Chart.Size = "568x344";
Chart2.TempDirectory = "temp";
Chart2.Debug = true;
Chart2.Title = "Axis marker affects the axis range.";
Chart2.Size = "568x344";
// * INTRO *
// Demonstrates how axis ticks and axis markers can force an axis scale to expand so they can be seen.
// 1. CREATE A AXIS TICK ( For Chart1 )
// Create a marker with the value of 550, well beyond the data we will chart.
AxisTick at = new AxisTick();
at.Value = 550;
at.Label.Color = Color.Red;
at.Label.Text = "Show On Scale at 550";
// This property will indicate we want the scale where the tick is shown to expand.
at.IncludeInAxisScale = true;
// Add the tick to the y axis.
Chart.YAxis.ExtraTicks.Add(at);
// 2. CREATE A AXIS MARKER ( For Chart2 )
// Create an axis marker with the value of 550, well beyond the data we will chart.
AxisMarker am = new AxisMarker();
am.Label.Text = "Quota";
am.Value = 550;
am.Line.Color = Color.Red;
// This property will indicate we want the scale where the marker is shown to expand.
am.IncludeInAxisScale = true;
// Add the marker to the y axis.
Chart2.YAxis.Markers.Add(am);
// 3. CREATE A AXIS MARKER ( For Chart2 )
// Create an axis marker with the value of November 2021, well beyond the data we will chart.
AxisMarker am2 = new AxisMarker();
am2.Label.Text = "Deadline";
// Notice the alignment is changed because the default would draw on top of another marker.
am2.Label.Alignment = StringAlignment.Far;
am2.Value = new DateTime(2021,11,1);
am2.Line.Color = Color.Green;
// This property will indicate we want the scale where the marker is shown to expand.
am2.IncludeInAxisScale = true;
// Add the marker to the x axis .
Chart2.XAxis.Markers.Add(am2);
// 4. ADD DATA
// *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(getRandomData3());
Chart2.SeriesCollection.Add(getRandomData());
}
SeriesCollection getRandomData()
{
SeriesCollection SC = new SeriesCollection();
Random myR = new Random(1);
DateTime dt = new DateTime(2021,1,1);
for(int a = 1; a < 2; a++)
{
Series s = new Series();
s.Name = "Series " + a;
for(int b = 1; b < 5; b++)
{
Element e = new Element();
e.YValue = myR.Next(50);
e.XDateTime = dt = dt.AddMonths(1);
s.Elements.Add(e);
}
SC.Add(s);
}
return SC;
}
SeriesCollection getRandomData3()
{
SeriesCollection SC = new SeriesCollection();
Random myR = new Random(1);
for(int a = 1; a < 2; a++)
{
Series s = new Series();
s.Name = "Series " + a;
for(int b = 1; b < 5; b++)
{
Element e = new Element();
e.Name = "Element " + b;
e.YValue = myR.Next(50);
s.Elements.Add(e);
}
SC.Add(s);
}
return SC;
}
</script>
<style>
#Chart2
{
padding-left:170px;
}
</style>
</head>
<body>
<div style="text-align:center;min-width:740px;">
<dotnet:Chart id="Chart" 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" %>
<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)
Chart.TempDirectory = "temp"
Chart.Debug = True
Chart.Title = "Tick affects the axis range."
Chart.Size = "568x344"
Chart2.TempDirectory = "temp"
Chart2.Debug = True
Chart2.Title = "Axis marker affects the axis range."
Chart2.Size = "568x344"
' * INTRO *
' Demonstrates how axis ticks and axis markers can force an axis scale to expand so they can be seen.
' 1. CREATE A AXIS TICK ( For Chart1 )
' Create a marker with the value of 550, well beyond the data we will chart.
Dim at As AxisTick = New AxisTick()
at.Value = 550
at.Label.Color = Color.Red
at.Label.Text = "Show On Scale at 550"
' This property will indicate we want the scale where the tick is shown to expand.
at.IncludeInAxisScale = True
' Add the tick to the y axis.
Chart.YAxis.ExtraTicks.Add(at)
' 2. CREATE A AXIS MARKER ( For Chart2 )
' Create an axis marker with the value of 550, well beyond the data we will chart.
Dim am As AxisMarker = New AxisMarker()
am.Label.Text = "Quota"
am.Value = 550
am.Line.Color = Color.Red
' This property will indicate we want the scale where the marker is shown to expand.
am.IncludeInAxisScale = True
' Add the marker to the y axis.
Chart2.YAxis.Markers.Add(am)
' 3. CREATE A AXIS MARKER ( For Chart2 )
' Create an axis marker with the value of November 2021, well beyond the data we will chart.
Dim am2 As AxisMarker = New AxisMarker()
am2.Label.Text = "Deadline"
' Notice the alignment is changed because the default would draw on top of another marker.
am2.Label.Alignment = StringAlignment.Far
am2.Value = New DateTime(2021,11,1)
am2.Line.Color = Color.Green
' This property will indicate we want the scale where the marker is shown to expand.
am2.IncludeInAxisScale = True
' Add the marker to the x axis .
Chart2.XAxis.Markers.Add(am2)
' 4. ADD DATA
' *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(getRandomData3())
Chart2.SeriesCollection.Add(getRandomData())
End Sub
Function getRandomData() As SeriesCollection
Dim SC As SeriesCollection = New SeriesCollection()
Dim myR As Random = New Random(1)
Dim dt As DateTime = New DateTime(2021,1,1)
For a As Integer = 1 To 1
Dim s As Series = New Series()
s.Name = "Series " & a
For b As Integer = 1 To 4
Dim e As Element = New Element()
e.YValue = myR.Next(50)
dt = dt.AddMonths(1)
e.XDateTime = dt
s.Elements.Add(e)
Next b
SC.Add(s)
Next a
Return SC
End Function
Function getRandomData3() As SeriesCollection
Dim SC As SeriesCollection = New SeriesCollection()
Dim myR As Random = New Random(1)
For a As Integer = 1 To 1
Dim s As Series = New Series()
s.Name = "Series " & a
For b As Integer = 1 To 4
Dim e As Element = New Element()
e.Name = "Element " & b
e.YValue = myR.Next(50)
s.Elements.Add(e)
Next b
SC.Add(s)
Next a
Return SC
End Function
</script>
<style>
#Chart2
{
padding-left:170px;
}
</style>
</head>
<body>
<div style="text-align:center;min-width:740px;">
<dotnet:Chart id="Chart" runat="server" Width="568px" Height="344px">
</dotnet:Chart>
<dotnet:Chart id="Chart2" runat="server" Width="568px" Height="344px">
</dotnet:Chart>
</div>
</body>
</html>
- Sample FilenameAffectingRanges.aspx
- VersionLegacy (Pre 3.0)
- Uses DatabaseNo