Gallery

Gallery > Annotation usage and examples

Annotation Header Image

Demonstrates replacing labels with images anywhere a label can go.

Download Show C# Code Show VB Code

<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Drawing.Drawing2D" %>
<script runat="server">

void Page_Load(Object sender, EventArgs e)
{
// Demonstrates replacing labels with images anywhere a label can go.
Chart.TempDirectory = "temp";
Chart.Debug = true;

Chart.Type = ChartType.Combo;
Chart.Size = "600x350";
Chart.Title = " Country Annotation Images ";
Chart.TitleBox.Background.ShadingEffectMode = ShadingEffectMode.Three;
Chart.TitleBox.Label.Font = new Font("Arial", 12,FontStyle.Bold);
Chart.TitleBox.Label.Color = Color.White;
Chart.TitleBox.Position = TitleBoxPosition.Full;
Chart.TitleBox.Background.Color = Color.LightGray;
Chart.LegendBox.Visible = false;
Chart.ShadingEffectMode = ShadingEffectMode.Seven;
Chart.YAxis.Interval = 10;
Chart.ChartArea.Line.Color = Color.FromArgb(240, 240, 240);

// *DYNAMIC DATA NOTE*
// This sample uses random data to populate the chart. To populate
// a chart with database data see the following resources:
// - Use the getLiveData() method using the dataEngine to query a database.
// - Help File > Getting Started > Data Tutorials
// - DataEngine Class in the help file
// - Sample: features/DataEngine.aspx

SeriesCollection mySC = getRandomData();

mySC[0][0].Annotation.Label.Text = "<img:../../images/us.png>";
mySC[0][1].Annotation.Label.Text = "<img:../../images/ca.png>";
mySC[0][2].Annotation.Label.Text = "<img:../../images/uk.png>";
mySC[0][3].Annotation.Label.Text = "<img:../../images/mx.png>";

Chart.DefaultElement.Color = Color.Gray;

// Add the random data.
Chart.SeriesCollection.Add(mySC);

}
SeriesCollection getRandomData()
{
double[] yValues = { 78, 45, 35, 70 };
string[] names = { "US","Canada","UK","Mexico"};
SeriesCollection SC = new SeriesCollection();
Series s = new Series();
for (int j = 0; j < 4; j++)
{
Element e = new Element(names[j]);
e.YValue = yValues[j];
s.Elements.Add(e);

e.Annotation = new Annotation();
e.Annotation.HeaderBackground.ShadingEffectMode = ShadingEffectMode.Three;
e.Annotation.HeaderBackground.Color = Color.LightSkyBlue;
e.Annotation.HeaderLabel.Font = new Font("Tahoma", 10, FontStyle.Bold);
e.Annotation.Size = new Size(80, 60);
e.Annotation.HeaderLabel.Text = "%Name";
e.Annotation.DefaultCorner = BoxCorner.Square;
e.Annotation.Background.Color = Color.White;
e.Annotation.Padding = 5;

}
SC.Add(s);

return SC;
}

SeriesCollection getLiveData()
{
DataEngine de = new DataEngine("ConnectionString goes here");
de.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
de.SqlStatement = "SELECT XAxisColumn, YAxisColumn FROM ....";
return de.GetSeries();
}

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
</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" %>
<script runat="server">

Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' Demonstrates replacing labels with images anywhere a label can go.
Chart.TempDirectory = "temp"
Chart.Debug = True

Chart.Type = ChartType.Combo
Chart.Size = "600x350"
Chart.Title = " Country Annotation Images "
Chart.TitleBox.Background.ShadingEffectMode = ShadingEffectMode.Three
Chart.TitleBox.Label.Font = New Font("Arial", 12,FontStyle.Bold)
Chart.TitleBox.Label.Color = Color.White
Chart.TitleBox.Position = TitleBoxPosition.Full
Chart.TitleBox.Background.Color = Color.LightGray
Chart.LegendBox.Visible = False
Chart.ShadingEffectMode = ShadingEffectMode.Seven
Chart.YAxis.Interval = 10
Chart.ChartArea.Line.Color = Color.FromArgb(240, 240, 240)

' *DYNAMIC DATA NOTE*
' This sample uses random data to populate the chart. To populate
' a chart with database data see the following resources:
' - Use the getLiveData() method using the dataEngine to query a database.
' - Help File > Getting Started > Data Tutorials
' - DataEngine Class in the help file
' - Sample: features/DataEngine.aspx

Dim mySC As SeriesCollection = getRandomData()

mySC(0)(0).Annotation.Label.Text = "<img:../../images/us.png>"
mySC(0)(1).Annotation.Label.Text = "<img:../../images/ca.png>"
mySC(0)(2).Annotation.Label.Text = "<img:../../images/uk.png>"
mySC(0)(3).Annotation.Label.Text = "<img:../../images/mx.png>"

Chart.DefaultElement.Color = Color.Gray

' Add the random data.
Chart.SeriesCollection.Add(mySC)

End Sub
Function getRandomData() As SeriesCollection
Dim yValues As Double() = { 78, 45, 35, 70 }
Dim names As String() = { "US","Canada","UK","Mexico"}
Dim SC As SeriesCollection = New SeriesCollection()
Dim s As Series = New Series()
For j As Integer = 0 To 3
Dim e As Element = New Element(names(j))
e.YValue = yValues(j)
s.Elements.Add(e)

e.Annotation = New Annotation()
e.Annotation.HeaderBackground.ShadingEffectMode = ShadingEffectMode.Three
e.Annotation.HeaderBackground.Color = Color.LightSkyBlue
e.Annotation.HeaderLabel.Font = New Font("Tahoma", 10, FontStyle.Bold)
e.Annotation.Size = New Size(80, 60)
e.Annotation.HeaderLabel.Text = "%Name"
e.Annotation.DefaultCorner = BoxCorner.Square
e.Annotation.Background.Color = Color.White
e.Annotation.Padding = 5

Next j
SC.Add(s)

Return SC
End Function

Function getLiveData() As SeriesCollection
Dim de As DataEngine = New DataEngine("ConnectionString goes here")
de.ChartObject = Chart ' Necessary to view any errors the dataEngine may throw.
de.SqlStatement = "SELECT XAxisColumn, YAxisColumn FROM ...."
Return de.GetSeries()
End Function

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" />
</div>
</body>
</html>

Sample FilenameAnnotationHeaderImage.aspx
Version5.0
Uses DatabaseNo

JS Charting

Gallery

Annotation Header Image