Gallery
JS Axis Tick Icons
<%@ 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 icons in axis tick labels.
Chart.JS.Enabled = true;
// Set the size
Chart.Width = 700;
Chart.Height = 340;
// Set the temp directory
Chart.TempDirectory = "temp";
// Debug mode. ( Will show generated errors if any )
Chart.Debug = false;
Chart.TitleBox.Label.Text = "Icons in Axis Ticks";
Chart.TitleBox.Position = TitleBoxPosition.FullWithLegend;
Chart.YAxis.ScaleRange = new ScaleRange(0, 55);
AxisTick at = new AxisTick(40, "<icon name=material/alert/warning size=26 fill=#FD5D2A verticalAlign=center>");
at.GridLine.Color = Color.FromArgb(100, 250, 92, 42);
Chart.YAxis.ExtraTicks.Add(at);
at = new AxisTick(50, "<icon name=material/alert/error size=26 fill=crimson verticalAlign=center>");
at.GridLine.Color = Color.FromArgb(100, 200, 10, 30);
Chart.YAxis.ExtraTicks.Add(at);
// Add the random data.
Chart.SeriesCollection.Add(getRandomData());
}
SeriesCollection getRandomData()
{
Random myR = new Random(1);
SeriesCollection SC = new SeriesCollection();
DateTime dt = new DateTime(2020, 1, 1);//DateTime.Today.AddDays(-15);//
Series s = new Series("Series 1");
for (int b = 1; b < 10; b++)
{
Element e = new Element();
e.XDateTime = dt = dt.AddDays(1);
e.YValue = myR.Next(50);
s.Elements.Add(e);
}
SC.Add(s);
return SC;
}
</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 icons in axis tick labels.
Chart.JS.Enabled = True
' Set the size
Chart.Width = 700
Chart.Height = 340
' Set the temp directory
Chart.TempDirectory = "temp"
' Debug mode. ( Will show generated errors if any )
Chart.Debug = False
Chart.TitleBox.Label.Text = "Icons in Axis Ticks"
Chart.TitleBox.Position = TitleBoxPosition.FullWithLegend
Chart.YAxis.ScaleRange = New ScaleRange(0, 55)
Dim at As AxisTick = New AxisTick(40, "<icon name=material/alert/warning size=26 fill=#FD5D2A verticalAlign=center>")
at.GridLine.Color = Color.FromArgb(100, 250, 92, 42)
Chart.YAxis.ExtraTicks.Add(at)
at = New AxisTick(50, "<icon name=material/alert/error size=26 fill=crimson verticalAlign=center>")
at.GridLine.Color = Color.FromArgb(100, 200, 10, 30)
Chart.YAxis.ExtraTicks.Add(at)
' Add the random data.
Chart.SeriesCollection.Add(getRandomData())
End Sub
Function getRandomData() As SeriesCollection
Dim myR As Random = New Random(1)
Dim SC As SeriesCollection = New SeriesCollection()
Dim dt As DateTime = New DateTime(2020, 1, 1) 'DateTime.Today.AddDays(-15);//
Dim s As Series = New Series("Series 1")
For b As Integer = 1 To 9
Dim e As Element = New Element()
dt = dt.AddDays(1)
e.XDateTime = dt
e.YValue = myR.Next(50)
s.Elements.Add(e)
Next b
SC.Add(s)
Return SC
End Function
</script>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" />
</div>
</body>
</html>
- Sample FilenameJsAxisTickIcons.aspx
- Version9.0
- Uses DatabaseNo