Gallery

Gallery > Organizational Charts

JS Organizational

Demonstrates an organizational chart with direction option.

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 an organizational chart with direction option.
Chart.TempDirectory = "temp";
Chart.Debug = false;
Chart.JS.Enabled = true;
Chart.JS.ControlID = "myJSC";
Chart.Type = ChartType.Organizational;
Chart.OrganizationalConnectorType = OrganizationalConnectorType.Straight;

Chart.Size = "750x450";
Chart.LegendBox.Visible = false;
Chart.ChartArea.Line.Color = Color.LightGray;

Chart.DefaultElement.ToolTip = "<b>%Name</b><br/>%position<br/>%phone";
Chart.DefaultSeries.DefaultElement.Color = Color.FromArgb(220, 234, 215);
Chart.DefaultElement.Outline.Color = Color.FromArgb(115, 188, 110);
Chart.DefaultElement.Outline.Width = 2;

Chart.DefaultSeries.Line.Width = 3;
Chart.DefaultSeries.Line.Color = Color.Gray;

Chart.DefaultElement.Annotation = new Annotation("<b>%Name</b><br/>%position");
Chart.DefaultElement.Annotation.Label.AutoWrap = false;
Chart.DefaultElement.Annotation.Padding = 9;
Chart.DefaultElement.Annotation.Size = new Size(160, 60);
Chart.DefaultElement.Annotation.CornerTopLeft = BoxCorner.Cut;
Chart.DefaultElement.Annotation.CornerTopRight = BoxCorner.Square;
Chart.DefaultElement.Annotation.CornerBottomRight = BoxCorner.Cut;
Chart.DefaultElement.Annotation.CornerBottomLeft = BoxCorner.Square;

Chart.JS.Settings.Add("defaultPoint.annotation.margin", "[15,5,10,0]");
//Chart.JS.Settings.Add("series.0.points.0.label.color", "rgb(255,255,255)");
Chart.JS.Settings.Add("toolbar.defaultItem.margin", "5");
Chart.JS.Settings.Add("toolbar.defaultItem.events_click", "js:orientChart");
Chart.JS.Settings.Add("toolbar.items.Left_icon", "system/default/zoom/arrow-left");
Chart.JS.Settings.Add("toolbar.items.Right_icon", "system/default/zoom/arrow-right");
Chart.JS.Settings.Add("toolbar.items.Down_icon", "system/default/zoom/arrow-down");
Chart.JS.Settings.Add("toolbar.items.Up_icon", "system/default/zoom/arrow-up");

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

mySC[0].Elements[0].Annotation.Label.Color = Color.White;

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

SeriesCollection getData()
{

Element e1 = new Element("Margret Swanson");
e1.Color = Color.Red;

Element e2 = new Element("Mark Hudson");
Element e3 = new Element("Chris Lysek");
Element e4 = new Element("Karyn Borbas");
Element e5 = new Element("Chris Rup");
Element e6 = new Element("Jenny Powers");
Element e7 = new Element("Katie Swift");

e1.CustomAttributes.Add("position", "President");
e2.CustomAttributes.Add("position", "Vice President Marketing");
e3.CustomAttributes.Add("position", "Vice President Sales");
e4.CustomAttributes.Add("position", "Marketing Manager");
e5.CustomAttributes.Add("position", "Marketing Manager");
e6.CustomAttributes.Add("position", "Sales Manager");
e7.CustomAttributes.Add("position", "Sales Manager");

e1.CustomAttributes.Add("phone", "630-555-1110");
e2.CustomAttributes.Add("phone", "630-555-1111");
e3.CustomAttributes.Add("phone", "630-555-2222");
e4.CustomAttributes.Add("phone", "630-555-2224");
e5.CustomAttributes.Add("phone", "630-555-2226");
e6.CustomAttributes.Add("phone", "630-555-2228");
e7.CustomAttributes.Add("phone", "630-555-2229");

e2.Parent = e1;
e3.Parent = e1;
e4.Parent = e2;
e5.Parent = e2;
e6.Parent = e3;
e7.Parent = e3;

return new SeriesCollection(new Series("", e1, e2, e3, e4, e5, e6, e7));

}

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 direction option.
Chart.TempDirectory = "temp"
Chart.Debug = False
Chart.JS.Enabled = True
Chart.JS.ControlID = "myJSC"
Chart.Type = ChartType.Organizational
Chart.OrganizationalConnectorType = OrganizationalConnectorType.Straight

Chart.Size = "750x450"
Chart.LegendBox.Visible = False
Chart.ChartArea.Line.Color = Color.LightGray

Chart.DefaultElement.ToolTip = "<b>%Name</b><br/>%position<br/>%phone"
Chart.DefaultSeries.DefaultElement.Color = Color.FromArgb(220, 234, 215)
Chart.DefaultElement.Outline.Color = Color.FromArgb(115, 188, 110)
Chart.DefaultElement.Outline.Width = 2

Chart.DefaultSeries.Line.Width = 3
Chart.DefaultSeries.Line.Color = Color.Gray

Chart.DefaultElement.Annotation = New Annotation("<b>%Name</b><br/>%position")
Chart.DefaultElement.Annotation.Label.AutoWrap = False
Chart.DefaultElement.Annotation.Padding = 9
Chart.DefaultElement.Annotation.Size = New Size(160, 60)
Chart.DefaultElement.Annotation.CornerTopLeft = BoxCorner.Cut
Chart.DefaultElement.Annotation.CornerTopRight = BoxCorner.Square
Chart.DefaultElement.Annotation.CornerBottomRight = BoxCorner.Cut
Chart.DefaultElement.Annotation.CornerBottomLeft = BoxCorner.Square

Chart.JS.Settings.Add("defaultPoint.annotation.margin", "[15,5,10,0]")
'Chart.JS.Settings.Add("series.0.points.0.label.color", "rgb(255,255,255)");
Chart.JS.Settings.Add("toolbar.defaultItem.margin", "5")
Chart.JS.Settings.Add("toolbar.defaultItem.events_click", "js:orientChart")
Chart.JS.Settings.Add("toolbar.items.Left_icon", "system/default/zoom/arrow-left")
Chart.JS.Settings.Add("toolbar.items.Right_icon", "system/default/zoom/arrow-right")
Chart.JS.Settings.Add("toolbar.items.Down_icon", "system/default/zoom/arrow-down")
Chart.JS.Settings.Add("toolbar.items.Up_icon", "system/default/zoom/arrow-up")

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

mySC(0).Elements(0).Annotation.Label.Color = Color.White

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

Function getData() As SeriesCollection

Dim e1 As Element = New Element("Margret Swanson")
e1.Color = Color.Red

Dim e2 As Element = New Element("Mark Hudson")
Dim e3 As Element = New Element("Chris Lysek")
Dim e4 As Element = New Element("Karyn Borbas")
Dim e5 As Element = New Element("Chris Rup")
Dim e6 As Element = New Element("Jenny Powers")
Dim e7 As Element = New Element("Katie Swift")

e1.CustomAttributes.Add("position", "President")
e2.CustomAttributes.Add("position", "Vice President Marketing")
e3.CustomAttributes.Add("position", "Vice President Sales")
e4.CustomAttributes.Add("position", "Marketing Manager")
e5.CustomAttributes.Add("position", "Marketing Manager")
e6.CustomAttributes.Add("position", "Sales Manager")
e7.CustomAttributes.Add("position", "Sales Manager")

e1.CustomAttributes.Add("phone", "630-555-1110")
e2.CustomAttributes.Add("phone", "630-555-1111")
e3.CustomAttributes.Add("phone", "630-555-2222")
e4.CustomAttributes.Add("phone", "630-555-2224")
e5.CustomAttributes.Add("phone", "630-555-2226")
e6.CustomAttributes.Add("phone", "630-555-2228")
e7.CustomAttributes.Add("phone", "630-555-2229")

e2.Parent = e1
e3.Parent = e1
e4.Parent = e2
e5.Parent = e2
e6.Parent = e3
e7.Parent = e3

Return New SeriesCollection(New Series("", e1, e2, e3, e4, e5, e6, e7))

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>

Sample FilenameJsOrganizational.aspx
Version9.0
Uses DatabaseNo

JS Charting

Gallery

JS Organizational