Gallery

Gallery > Organizational Charts

JS Org Simple Styling

Demonstrates an organizational chart with minimal 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" %>
<%@ Import Namespace="System.Drawing.Drawing2D" %>
<script runat="server">

void Page_Load(Object sender, EventArgs e)
{
// Demonstrates an organizational chart with minimal styling.

Chart.TempDirectory = "temp";
Chart.Debug = false;
Chart.JS.Enabled = true;
Chart.Type = ChartType.Organizational;
Chart.Size = "750x430";
Chart.LegendBox.Visible = false;
Chart.JS.Buttons.EnableExportButton = false;
Chart.JS.Buttons.EnablePrintButton = false;

Chart.JS.Settings.Add("defaultPoint.annotation.margin", "[5]");
Chart.JS.Settings.Add("defaultTooltip_enabled", "false");

Chart.DefaultElement.Annotation = new Annotation();
Chart.DefaultElement.Annotation.Label.AutoWrap = false;
Chart.DefaultElement.Annotation.Padding = 5;
Chart.DefaultElement.Annotation.Label.Alignment = StringAlignment.Center;
Chart.DefaultElement.Annotation.Label.LineAlignment = StringAlignment.Center;
Chart.DefaultElement.Annotation.Size = new Size(70, 30);

Chart.DefaultSeries.DefaultElement.Color = Color.FromArgb(255, 255, 246);
Chart.DefaultSeries.DefaultElement.Outline.Color = Color.Transparent;
Chart.DefaultSeries.Line.Transparency = 70;
Chart.DefaultSeries.Line.Width = 2;
Chart.DefaultSeries.Line.Color = Color.Gray;

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

Element aida = new Element("Aida");
Element ain = new Element("Ain");
Element john = new Element("John");
Element william = new Element("William");
Element frank = new Element("Frank");
Element eric = new Element("Eric");
Element david = new Element("David");
Element stephen = new Element("Stephen");
Element george = new Element("George");
Element lori = new Element("Lori");
Element walt = new Element("Walt");
Element thomas = new Element("Thomas");
Element james = new Element("James");
Element tim = new Element("Tim");
Element jack = new Element("Jack");
Element robert = new Element("Robert");
Element jose = new Element("Jose");
Element joe = new Element("Joe");
Element mark = new Element("Mark");

ain.Parent = aida;
john.Parent = aida;
william.Parent = aida;
frank.Parent = ain;
eric.Parent = ain;
david.Parent = john;
stephen.Parent = john;
george.Parent = john;
lori.Parent = george;
walt.Parent = george;
thomas.Parent = lori;
james.Parent = lori;
tim.Parent = lori;
jack.Parent = lori;
robert.Parent = william;
jose.Parent = william;
joe.Parent = robert;
mark.Parent = robert;

return new SeriesCollection(new Series("", aida, ain, john, william, frank, eric, david, stephen, george, lori, walt, thomas, james, tim, jack, robert, jose, joe, mark));

}
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 an organizational chart with minimal styling.

Chart.TempDirectory = "temp"
Chart.Debug = False
Chart.JS.Enabled = True
Chart.Type = ChartType.Organizational
Chart.Size = "750x430"
Chart.LegendBox.Visible = False
Chart.JS.Buttons.EnableExportButton = False
Chart.JS.Buttons.EnablePrintButton = False

Chart.JS.Settings.Add("defaultPoint.annotation.margin", "[5]")
Chart.JS.Settings.Add("defaultTooltip_enabled", "false")

Chart.DefaultElement.Annotation = New Annotation()
Chart.DefaultElement.Annotation.Label.AutoWrap = False
Chart.DefaultElement.Annotation.Padding = 5
Chart.DefaultElement.Annotation.Label.Alignment = StringAlignment.Center
Chart.DefaultElement.Annotation.Label.LineAlignment = StringAlignment.Center
Chart.DefaultElement.Annotation.Size = New Size(70, 30)

Chart.DefaultSeries.DefaultElement.Color = Color.FromArgb(255, 255, 246)
Chart.DefaultSeries.DefaultElement.Outline.Color = Color.Transparent
Chart.DefaultSeries.Line.Transparency = 70
Chart.DefaultSeries.Line.Width = 2
Chart.DefaultSeries.Line.Color = Color.Gray

' *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 aida As Element = New Element("Aida")
Dim ain As Element = New Element("Ain")
Dim john As Element = New Element("John")
Dim william As Element = New Element("William")
Dim frank As Element = New Element("Frank")
Dim eric As Element = New Element("Eric")
Dim david As Element = New Element("David")
Dim stephen As Element = New Element("Stephen")
Dim george As Element = New Element("George")
Dim lori As Element = New Element("Lori")
Dim walt As Element = New Element("Walt")
Dim thomas As Element = New Element("Thomas")
Dim james As Element = New Element("James")
Dim tim As Element = New Element("Tim")
Dim jack As Element = New Element("Jack")
Dim robert As Element = New Element("Robert")
Dim jose As Element = New Element("Jose")
Dim joe As Element = New Element("Joe")
Dim mark As Element = New Element("Mark")

ain.Parent = aida
john.Parent = aida
william.Parent = aida
frank.Parent = ain
eric.Parent = ain
david.Parent = john
stephen.Parent = john
george.Parent = john
lori.Parent = george
walt.Parent = george
thomas.Parent = lori
james.Parent = lori
tim.Parent = lori
jack.Parent = lori
robert.Parent = william
jose.Parent = william
joe.Parent = robert
mark.Parent = robert

Return New SeriesCollection(New Series("", aida, ain, john, william, frank, eric, david, stephen, george, lori, walt, thomas, james, tim, jack, robert, jose, joe, mark))

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 FilenameJsOrgSimpleStyling.aspx
Version9.0
Uses DatabaseNo

JS Charting

Gallery

JS Org Simple Styling