Gallery

Gallery > Advanced Customization

Post Render Labeling

Demonstrates how to label an element after the chart is rendered.

Download Show C# Code Show VB Code

<%@ Import Namespace="System.Drawing" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING"%>
<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Drawing.Text" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Post Render Drawing Image</title>
<script runat="server">

void Page_Load(Object sender,EventArgs e)
{
//dotnetCHARTING.Chart Chart = new dotnetCHARTING.Chart();

Chart.Type = ChartType.Combo;//Horizontal;
Chart.Width = 600;
Chart.Height = 350;
Chart.TempDirectory = "temp";
Chart.DefaultSeries.Type = SeriesType.Bubble;
Chart.Title = "Label elements after the chart is generated.";
Chart.TitleBox.Position = TitleBoxPosition.FullWithLegend;

// This sample shows how element can be labeled after the chart image was created.

// *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
SeriesCollection s = getRandomData();

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

//Get a bitmap of the chart.
Bitmap bmp = Chart.GetChartBitmap();

// Create a graphics object from the bitmap
Graphics g = Graphics.FromImage(bmp);
g.TextRenderingHint = TextRenderingHint.AntiAlias;

// After the chart is generated, the element's positions are available.
// Lets iterate the elements we have added and draw a centered label at their positions.

// String format to center the labels.
StringFormat sf = new StringFormat();
sf.Alignment = StringAlignment.Center;
sf.LineAlignment = StringAlignment.Center;

for(int i = 0; i < s.Count; i++)
{
for(int ib = 0; ib < s[i].Elements.Count;ib++)
{
Element el = s[i].Elements[ib];
g.DrawString(el.Name,new Font("Arial",8),Brushes.Black,el.Point,sf);

}
}

// Clean up
g.Dispose();

//Save the image using the FileManager.
Chart.FileManager.SaveImage(bmp);

}

SeriesCollection getRandomData()
{
SeriesCollection SC = new SeriesCollection();
Random myR = new Random();

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("Element " + b, myR.Next(50));
e.BubbleSize = myR.Next(50);
s.Elements.Add(e);
}
}
SC.Add(s);
}
return SC;
}

</script>
</head>
<body>
<div style="text-align:center">

<dotnet:Chart id="Chart" runat="server" Width="568px" Height="344px" Depth="13px" Use3D="True">
</dotnet:Chart>

</div>
</body>
</html>

<%@ Import Namespace="System.Drawing" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING"%>
<%@ Page Language="vb" Description="dotnetCHARTING Component" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Drawing.Text" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Post Render Drawing Image</title>
<script runat="server">

Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
'dotnetCHARTING.Chart Chart = new dotnetCHARTING.Chart();

Chart.Type = ChartType.Combo 'Horizontal;
Chart.Width = 600
Chart.Height = 350
Chart.TempDirectory = "temp"
Chart.DefaultSeries.Type = SeriesType.Bubble
Chart.Title = "Label elements after the chart is generated."
Chart.TitleBox.Position = TitleBoxPosition.FullWithLegend

' This sample shows how element can be labeled after the chart image was created.

' *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
Dim s As SeriesCollection = getRandomData()

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

'Get a bitmap of the chart.
Dim bmp As Bitmap = Chart.GetChartBitmap()

' Create a graphics object from the bitmap
Dim g As Graphics = Graphics.FromImage(bmp)
g.TextRenderingHint = TextRenderingHint.AntiAlias

' After the chart is generated, the element's positions are available.
' Lets iterate the elements we have added and draw a centered label at their positions.

' String format to center the labels.
Dim sf As StringFormat = New StringFormat()
sf.Alignment = StringAlignment.Center
sf.LineAlignment = StringAlignment.Center

For i As Integer = 0 To s.Count - 1
For ib As Integer = 0 To s(i).Elements.Count - 1
Dim el As Element = s(i).Elements(ib)
g.DrawString(el.Name,New Font("Arial",8),Brushes.Black,el.Point,sf)

Next ib
Next i

' Clean up
g.Dispose()

'Save the image using the FileManager.
Chart.FileManager.SaveImage(bmp)

End Sub

Function getRandomData() As SeriesCollection
Dim SC As SeriesCollection = New SeriesCollection()
Dim myR As Random = New Random()

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("Element " & b, myR.Next(50))
e.BubbleSize = myR.Next(50)
s.Elements.Add(e)
Next b
SC.Add(s)
Next a
Return SC
End Function

</script>
</head>
<body>
<div style="text-align:center">

<dotnet:Chart id="Chart" runat="server" Width="568px" Height="344px" Depth="13px" Use3D="True">
</dotnet:Chart>

</div>
</body>
</html>

Sample FilenamePostRenderLabeling.aspx
VersionLegacy (Pre 3.0)
Uses DatabaseNo

JS Charting

Gallery

Post Render Labeling