Gallery

Gallery > Chart Type Tweaks

Org Label Layout

Demonstrates manually creating an organizational chart using label styling.

Download Show C# Code Show VB Code

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

<script runat="server">
Color [] palette = ChartPalettes.GetPalette(Palette.Default);
void Page_Load(Object sender, EventArgs e)
{
// Demonstrates manually creating an organizational chart using label styling.
Chart.TempDirectory = "temp";
Chart.Debug = true;

Chart.Type = ChartType.Organizational;
Chart.Size = "800x440";
Chart.TitleBox.Position = TitleBoxPosition.Full;

Chart.ChartArea.Background.ShadingEffectMode = ShadingEffectMode.Five;
Chart.ChartArea.Background.Color = Color.FromArgb(250, Color.FromArgb(180,200,224));

// Connecting line styling.
Chart.DefaultSeries.Line.Width = 5;
Chart.DefaultSeries.Line.Color = Color.LightSlateGray;

Chart.DefaultElement.Annotation = new Annotation();
Chart.DefaultElement.Annotation.Label.Alignment = StringAlignment.Center;
Chart.DefaultElement.Annotation.Background.ShadingEffectMode = ShadingEffectMode.One;
Chart.DefaultElement.Annotation.Background.Color = palette[2];
Chart.DefaultElement.Annotation.Padding = 5;
Chart.ChartArea.Padding = 30;

SeriesCollection mySC = getData();

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

SeriesCollection getData()
{
// When no text is specified for the annotations, they will be populated with the element names.

Element p1 = new Element("<block hAlign='right' fStyle='bold' fSize='11'>Margret Swanson<row><img:../../images/Org7.png>President");

Element vp1 = new Element("<block hAlign='right' fStyle='bold' fSize='11'>Mark Hudson<row><img:../../images/Org1.png>Vice President<br>Marketing");
Element vp2 = new Element("<block hAlign='right' fStyle='bold' fSize='11'>Chris Lysek<row><img:../../images/Org2.png>Vice President<br>Sales");

Element mm1 = new Element("<block hAlign='right' fStyle='bold' fSize='11'>Karyn Borbas<row><img:../../images/Org4.png>Marketing");
Element mm2 = new Element("<block hAlign='right' fStyle='bold' fSize='11'>Chris Rup<row><img:../../images/Org6.png>Manager 2<br>Marketing");

Element ms1 = new Element("<block hAlign='right' fStyle='bold' fSize='11'>Jenny Powers<row><img:../../images/Org8.png>Manager 1<br>Sales");
Element ms2 = new Element("<block hAlign='right' fStyle='bold' fSize='11'>Katie Swift<row><img:../../images/Org9.png>Manager 2<br>Sales");

vp1.Parent = p1;
vp2.Parent = p1;

mm1.Parent = vp1;
mm2.Parent = vp1;

ms1.Parent = vp2;
ms2.Parent = vp2;

Series vpS = new Series("", vp1, vp2);
Series managers = new Series("", mm1, mm2, ms1, ms2);
Series President = new Series("",p1);

managers.DefaultElement.Annotation = new Annotation();
managers.DefaultElement.Annotation.Background.Color = palette[1];
managers.DefaultElement.Annotation.Background.ShadingEffectMode = ShadingEffectMode.One;

vpS.DefaultElement.Annotation = new Annotation();
vpS.DefaultElement.Annotation.Background.Color = palette[0];
vpS.DefaultElement.Annotation.Background.ShadingEffectMode = ShadingEffectMode.One;

SeriesCollection scSolo = new SeriesCollection(President,vpS,managers);
return scSolo;
}

</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" %>

<script runat="server">
Dim palette As Color() = ChartPalettes.GetPalette(dotnetCHARTING.Palette.Default)
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' Demonstrates manually creating an organizational chart using label styling.
Chart.TempDirectory = "temp"
Chart.Debug = True

Chart.Type = ChartType.Organizational
Chart.Size = "800x440"
Chart.TitleBox.Position = TitleBoxPosition.Full

Chart.ChartArea.Background.ShadingEffectMode = ShadingEffectMode.Five
Chart.ChartArea.Background.Color = Color.FromArgb(250, Color.FromArgb(180,200,224))

' Connecting line styling.
Chart.DefaultSeries.Line.Width = 5
Chart.DefaultSeries.Line.Color = Color.LightSlateGray

Chart.DefaultElement.Annotation = New Annotation()
Chart.DefaultElement.Annotation.Label.Alignment = StringAlignment.Center
Chart.DefaultElement.Annotation.Background.ShadingEffectMode = ShadingEffectMode.One
Chart.DefaultElement.Annotation.Background.Color = palette(2)
Chart.DefaultElement.Annotation.Padding = 5
Chart.ChartArea.Padding = 30

Dim mySC As SeriesCollection = getData()

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

Function getData() As SeriesCollection
' When no text is specified for the annotations, they will be populated with the element names.

Dim p1 As Element = New Element("<block hAlign='right' fStyle='bold' fSize='11'>Margret Swanson<row><img:../../images/Org7.png>President")

Dim vp1 As Element = New Element("<block hAlign='right' fStyle='bold' fSize='11'>Mark Hudson<row><img:../../images/Org1.png>Vice President<br>Marketing")
Dim vp2 As Element = New Element("<block hAlign='right' fStyle='bold' fSize='11'>Chris Lysek<row><img:../../images/Org2.png>Vice President<br>Sales")

Dim mm1 As Element = New Element("<block hAlign='right' fStyle='bold' fSize='11'>Karyn Borbas<row><img:../../images/Org4.png>Marketing")
Dim mm2 As Element = New Element("<block hAlign='right' fStyle='bold' fSize='11'>Chris Rup<row><img:../../images/Org6.png>Manager 2<br>Marketing")

Dim ms1 As Element = New Element("<block hAlign='right' fStyle='bold' fSize='11'>Jenny Powers<row><img:../../images/Org8.png>Manager 1<br>Sales")
Dim ms2 As Element = New Element("<block hAlign='right' fStyle='bold' fSize='11'>Katie Swift<row><img:../../images/Org9.png>Manager 2<br>Sales")

vp1.Parent = p1
vp2.Parent = p1

mm1.Parent = vp1
mm2.Parent = vp1

ms1.Parent = vp2
ms2.Parent = vp2

Dim vpS As Series = New Series("", vp1, vp2)
Dim managers As Series = New Series("", mm1, mm2, ms1, ms2)
Dim President As Series = New Series("",p1)

managers.DefaultElement.Annotation = New Annotation()
managers.DefaultElement.Annotation.Background.Color = palette(1)
managers.DefaultElement.Annotation.Background.ShadingEffectMode = ShadingEffectMode.One

vpS.DefaultElement.Annotation = New Annotation()
vpS.DefaultElement.Annotation.Background.Color = palette(0)
vpS.DefaultElement.Annotation.Background.ShadingEffectMode = ShadingEffectMode.One

Dim scSolo As SeriesCollection = New SeriesCollection(President,vpS,managers)
Return scSolo
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 FilenameOrgLabelLayout.aspx
Version5.1
Uses DatabaseNo

JS Charting

Gallery

Org Label Layout