<%@ 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 an organizational chart with vertical leaf point layout and images in nodes.
Chart.TempDirectory = "temp";
Chart.Debug = false;
Chart.JS.Enabled = true;
Chart.JS.ControlID = "myJSC";
Chart.Type = ChartType.Organizational;

Chart.Size = "750x450";

// Some node layout adjustments.
Chart.JS.Settings.Add("defaultSeries.defaultPoint.annotation.label.margin_left", "60");
Chart.JS.Settings.Add("defaultSeries.defaultPoint.annotation.label.margin_bottom", "-4");
Chart.JS.Settings.Add("defaultSeries.defaultPoint.annotation.padding", "[4, 16, 4, 0]");
Chart.JS.Settings.Add("defaultSeries.defaultPoint.annotation.margin", "[4, 20, 4, 4]");
Chart.JS.Settings.Add("defaultSeries.defaultPoint.annotation.height", "52");

Chart.DefaultElement.ToolTip = "";

Chart.DefaultElement.Color = Color.White;
Chart.DefaultElement.Annotation.Label.Text = "<b>%position</b><br>%name<br><img margin_left=-60 margin_top=-35 width=51 height=51 src=../../images/%photo>";
Chart.DefaultElement.Annotation.Label.Alignment = StringAlignment.Near;
Chart.DefaultElement.Annotation.Label.AutoWrap = false;
Chart.DefaultElement.Annotation.Label.LineAlignment = StringAlignment.Far;

Chart.DefaultElement.Annotation.SyncWidth = SyncDimention.All;
Chart.DefaultElement.Annotation.DefaultCorner = BoxCorner.Square;

Chart.DefaultSeries.Line.Width = 1;
Chart.DefaultSeries.Line.Color = ColorTranslator.FromHtml("#e0e0e0"); ;

// *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 = getData();

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

SeriesCollection getData()
{
SeriesCollection sc = new SeriesCollection();

Series ser1 = new Series("");
Element el1 = new Element();
el1.Name = "Aubrey Shepherd";
el1.CustomAttributes["position"] = "General Manager";
el1.CustomAttributes["photo"] = "avatar_1.png";
el1.CustomAttributes["role"] = "";
ser1.Elements.Add(el1);
Element el2 = new Element();
el2.Name = "Blake Simmons";
el2.Parent = el1;
el2.CustomAttributes["position"] = "Product Leader";
el2.CustomAttributes["photo"] = "avatar_2.png";
el2.CustomAttributes["role"] = "leader";
ser1.Elements.Add(el2);
Element el3 = new Element();
el3.Name = "Jade Mills";
el3.Parent = el2;
el3.CustomAttributes["position"] = "Front End Developer";
el3.CustomAttributes["photo"] = "avatar_3.png";
el3.CustomAttributes["role"] = "";
ser1.Elements.Add(el3);
Element el4 = new Element();
el4.Name = "Kerry Eason";
el4.Parent = el2;
el4.CustomAttributes["position"] = "App Developer";
el4.CustomAttributes["photo"] = "avatar_4.png";
el4.CustomAttributes["role"] = "";
ser1.Elements.Add(el4);
Element el5 = new Element();
el5.Name = "Rorie Woodham";
el5.Parent = el2;
el5.CustomAttributes["position"] = "Server Developer";
el5.CustomAttributes["photo"] = "avatar_5.png";
el5.CustomAttributes["role"] = "";
ser1.Elements.Add(el5);
Element el6 = new Element();
el6.Name = "Grier Spear";
el6.Parent = el1;
el6.CustomAttributes["position"] = "Design Team Leader";
el6.CustomAttributes["photo"] = "avatar_6.png";
el6.CustomAttributes["role"] = "leader";
ser1.Elements.Add(el6);
Element el7 = new Element();
el7.Name = "Daly Walsh";
el7.Parent = el6;
el7.CustomAttributes["position"] = "Designer";
el7.CustomAttributes["photo"] = "avatar_7.png";
el7.CustomAttributes["role"] = "";
ser1.Elements.Add(el7);
Element el8 = new Element();
el8.Name = "Ridley Tucker";
el8.Parent = el6;
el8.CustomAttributes["position"] = "Designer";
el8.CustomAttributes["photo"] = "avatar_8.png";
el8.CustomAttributes["role"] = "";
ser1.Elements.Add(el8);
Element el9 = new Element();
el9.Name = "Wisdom Debenham";
el9.Parent = el1;
el9.CustomAttributes["position"] = "Marketing Leader";
el9.CustomAttributes["photo"] = "avatar_9.png";
el9.CustomAttributes["role"] = "leader";
ser1.Elements.Add(el9);
Element el10 = new Element();
el10.Name = "Parker Graves";
el10.Parent = el9;
el10.CustomAttributes["position"] = "Blogger";
el10.CustomAttributes["photo"] = "avatar_10.png";
el10.CustomAttributes["role"] = "";
ser1.Elements.Add(el10);
Element el11 = new Element();
el11.Name = "Lennox Cleveland";
el11.Parent = el9;
el11.CustomAttributes["position"] = "Ads Marketer";
el11.CustomAttributes["photo"] = "avatar_11.png";
el11.CustomAttributes["role"] = "";
ser1.Elements.Add(el11);
Element el12 = new Element();
el12.Name = "Sloan Baldwin";
el12.Parent = el9;
el12.CustomAttributes["position"] = "SNS Marketer";
el12.CustomAttributes["photo"] = "avatar_12.png";
el12.CustomAttributes["role"] = "";
ser1.Elements.Add(el12);
Element el13 = new Element();
el13.Name = "Briar Wootton";
el13.Parent = el9;
el13.CustomAttributes["position"] = "B2B Marketer";
el13.CustomAttributes["photo"] = "avatar_13.png";
el13.CustomAttributes["role"] = "";
ser1.Elements.Add(el13);
sc.Add(ser1);
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>
<script type="text/javascript">
function orientChart(direction) { myJSC.options({ 'type': 'organization ' + direction }) };
</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" %>
<script runat="server">

Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' Demonstrates an organizational chart with vertical leaf point layout and images in nodes.
Chart.TempDirectory = "temp"
Chart.Debug = False
Chart.JS.Enabled = True
Chart.JS.ControlID = "myJSC"
Chart.Type = ChartType.Organizational

Chart.Size = "750x450"

' Some node layout adjustments.
Chart.JS.Settings.Add("defaultSeries.defaultPoint.annotation.label.margin_left", "60")
Chart.JS.Settings.Add("defaultSeries.defaultPoint.annotation.label.margin_bottom", "-4")
Chart.JS.Settings.Add("defaultSeries.defaultPoint.annotation.padding", "[4, 16, 4, 0]")
Chart.JS.Settings.Add("defaultSeries.defaultPoint.annotation.margin", "[4, 20, 4, 4]")
Chart.JS.Settings.Add("defaultSeries.defaultPoint.annotation.height", "52")

Chart.DefaultElement.ToolTip = ""

Chart.DefaultElement.Color = Color.White
Chart.DefaultElement.Annotation.Label.Text = "<b>%position</b><br>%name<br><img margin_left=-60 margin_top=-35 width=51 height=51 src=../../images/%photo>"
Chart.DefaultElement.Annotation.Label.Alignment = StringAlignment.Near
Chart.DefaultElement.Annotation.Label.AutoWrap = False
Chart.DefaultElement.Annotation.Label.LineAlignment = StringAlignment.Far

Chart.DefaultElement.Annotation.SyncWidth = SyncDimention.All
Chart.DefaultElement.Annotation.DefaultCorner = BoxCorner.Square

Chart.DefaultSeries.Line.Width = 1
Chart.DefaultSeries.Line.Color = ColorTranslator.FromHtml("#e0e0e0")


' *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 = getData()

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

Function getData() As SeriesCollection
Dim sc As SeriesCollection = New SeriesCollection()

Dim ser1 As Series = New Series("")
Dim el1 As Element = New Element()
el1.Name = "Aubrey Shepherd"
el1.CustomAttributes("position") = "General Manager"
el1.CustomAttributes("photo") = "avatar_1.png"
el1.CustomAttributes("role") = ""
ser1.Elements.Add(el1)
Dim el2 As Element = New Element()
el2.Name = "Blake Simmons"
el2.Parent = el1
el2.CustomAttributes("position") = "Product Leader"
el2.CustomAttributes("photo") = "avatar_2.png"
el2.CustomAttributes("role") = "leader"
ser1.Elements.Add(el2)
Dim el3 As Element = New Element()
el3.Name = "Jade Mills"
el3.Parent = el2
el3.CustomAttributes("position") = "Front End Developer"
el3.CustomAttributes("photo") = "avatar_3.png"
el3.CustomAttributes("role") = ""
ser1.Elements.Add(el3)
Dim el4 As Element = New Element()
el4.Name = "Kerry Eason"
el4.Parent = el2
el4.CustomAttributes("position") = "App Developer"
el4.CustomAttributes("photo") = "avatar_4.png"
el4.CustomAttributes("role") = ""
ser1.Elements.Add(el4)
Dim el5 As Element = New Element()
el5.Name = "Rorie Woodham"
el5.Parent = el2
el5.CustomAttributes("position") = "Server Developer"
el5.CustomAttributes("photo") = "avatar_5.png"
el5.CustomAttributes("role") = ""
ser1.Elements.Add(el5)
Dim el6 As Element = New Element()
el6.Name = "Grier Spear"
el6.Parent = el1
el6.CustomAttributes("position") = "Design Team Leader"
el6.CustomAttributes("photo") = "avatar_6.png"
el6.CustomAttributes("role") = "leader"
ser1.Elements.Add(el6)
Dim el7 As Element = New Element()
el7.Name = "Daly Walsh"
el7.Parent = el6
el7.CustomAttributes("position") = "Designer"
el7.CustomAttributes("photo") = "avatar_7.png"
el7.CustomAttributes("role") = ""
ser1.Elements.Add(el7)
Dim el8 As Element = New Element()
el8.Name = "Ridley Tucker"
el8.Parent = el6
el8.CustomAttributes("position") = "Designer"
el8.CustomAttributes("photo") = "avatar_8.png"
el8.CustomAttributes("role") = ""
ser1.Elements.Add(el8)
Dim el9 As Element = New Element()
el9.Name = "Wisdom Debenham"
el9.Parent = el1
el9.CustomAttributes("position") = "Marketing Leader"
el9.CustomAttributes("photo") = "avatar_9.png"
el9.CustomAttributes("role") = "leader"
ser1.Elements.Add(el9)
Dim el10 As Element = New Element()
el10.Name = "Parker Graves"
el10.Parent = el9
el10.CustomAttributes("position") = "Blogger"
el10.CustomAttributes("photo") = "avatar_10.png"
el10.CustomAttributes("role") = ""
ser1.Elements.Add(el10)
Dim el11 As Element = New Element()
el11.Name = "Lennox Cleveland"
el11.Parent = el9
el11.CustomAttributes("position") = "Ads Marketer"
el11.CustomAttributes("photo") = "avatar_11.png"
el11.CustomAttributes("role") = ""
ser1.Elements.Add(el11)
Dim el12 As Element = New Element()
el12.Name = "Sloan Baldwin"
el12.Parent = el9
el12.CustomAttributes("position") = "SNS Marketer"
el12.CustomAttributes("photo") = "avatar_12.png"
el12.CustomAttributes("role") = ""
ser1.Elements.Add(el12)
Dim el13 As Element = New Element()
el13.Name = "Briar Wootton"
el13.Parent = el9
el13.CustomAttributes("position") = "B2B Marketer"
el13.CustomAttributes("photo") = "avatar_13.png"
el13.CustomAttributes("role") = ""
ser1.Elements.Add(el13)
sc.Add(ser1)
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>
<script type="text/javascript">
function orientChart(direction) { myJSC.options({ 'type': 'organization ' + direction }) };
</script>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" />
</div>
</body>
</html>