Gallery

Gallery > Organizational Charts

JS Org Sync Width Height

Demonstrates an organizational chart with different node width and height sync modes.

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 different node width/height sync modes.

Chart.TempDirectory = "temp";
Chart.Debug = true;
Chart.JS.Enabled = true;
Chart.JS.ControlID = "myJSC";
Chart.Size = "700x350";

Chart.Type = ChartType.Organizational;

// Default Mode:
Chart.OrganizationalConnectorType = OrganizationalConnectorType.RightAngle;

//Disable tooltip
Chart.DefaultElement.ToolTip = "";

// Spacing between nodes:
Chart.ChartArea.Padding = 5;
// Alternatively, set CSS style px margin array values with:
// Chart.JS.Settings.Add("defaultPoint.annotation.margin", "[15,5]");

// Connector line radius used with right-angle connector types and styling
Chart.DefaultElement.CornerRadius = 3;
Chart.DefaultSeries.Line.Width = 1;
Chart.DefaultSeries.Line.Color = Color.Gray;

// Node styling
Chart.DefaultElement.Outline.Width = 1;
Chart.DefaultElement.Outline.Color = Color.LightGray;
Chart.DefaultSeries.DefaultElement.Color = Color.White;

// Initial node dimention sync.
Chart.DefaultElement.Annotation.SyncHeight = SyncDimention.All;
Chart.DefaultElement.Annotation.SyncWidth = SyncDimention.All;

Chart.DefaultElement.Annotation.Padding = 5;
Chart.DefaultElement.Annotation.DefaultCorner = BoxCorner.Round;
Chart.DefaultElement.Annotation.CornerSize = 3;

// *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()
{
Series ser = new Series("");
Element el1 = new Element();
el1.Name = "President";
ser.Elements.Add(el1);
Element el2 = new Element();
el2.Name = "Vice President Account Services";
el2.Parent = el1;
ser.Elements.Add(el2);
Element el3 = new Element();
el3.Name = "Vice President Creative Services";
el3.Parent = el1;
ser.Elements.Add(el3);
Element el4 = new Element();
el4.Name = "Vice President Marketing Services";
el4.Parent = el1;
ser.Elements.Add(el4);
Element el5 = new Element();
el5.Name = "Account Supervisor";
el5.Parent = el2;
ser.Elements.Add(el5);
Element el6 = new Element();
el6.Name = "Account Supervisor";
el6.Parent = el2;
ser.Elements.Add(el6);
Element el7 = new Element();
el7.Name = "Account Executive";
el7.Parent = el5;
ser.Elements.Add(el7);
Element el8 = new Element();
el8.Name = "Account Executive";
el8.Parent = el5;
ser.Elements.Add(el8);
Element el9 = new Element();
el9.Name = "Art/Copy";
el9.Parent = el3;
ser.Elements.Add(el9);
Element el10 = new Element();
el10.Name = "Production";
el10.Parent = el3;
ser.Elements.Add(el10);
Element el11 = new Element();
el11.Name = "Media";
el11.Parent = el4;
ser.Elements.Add(el11);
Element el12 = new Element();
el12.Name = "Research";
el12.Parent = el4;
ser.Elements.Add(el12);

return new SeriesCollection(ser);

}

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 syncSize() {
var syncWidth = document.getElementById('syncWidth').selectedOptions[0].value;
var syncHeight = document.getElementById('syncHeight').selectedOptions[0].value;
myJSC
.series()
.points()
.options({
annotation: {
syncWidth: syncWidth === 'none' ? false : syncWidth,
syncHeight: syncHeight === 'none' ? false : syncHeight
}
});
}
</script>
<style type="text/css">
html
{
font-family:"Lucida Grande","Lucida Sans Unicode","Bitstream Vera Sans","Trebuchet MS",Verdana,sans-serif
}
</style>
</head>

<body>
<div align="center">
Sync Width: <select id="syncWidth" name="syncWidth" onchange="syncSize();">
<option value="all" selected>All</option>
<option value="level">Level</option>
<option value="none" >None</option>
</select>
Sync Height: <select id="syncHeight" name="syncHeight" onchange="syncSize();">
<option value="all" selected>All</option>
<option value="level">Level</option>
<option value="none" >None</option>
</select>
<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 different node width/height sync modes.

Chart.TempDirectory = "temp"
Chart.Debug = True
Chart.JS.Enabled = True
Chart.JS.ControlID = "myJSC"
Chart.Size = "700x350"

Chart.Type = ChartType.Organizational

' Default Mode:
Chart.OrganizationalConnectorType = OrganizationalConnectorType.RightAngle

'Disable tooltip
Chart.DefaultElement.ToolTip = ""

' Spacing between nodes:
Chart.ChartArea.Padding = 5
' Alternatively, set CSS style px margin array values with:
' Chart.JS.Settings.Add("defaultPoint.annotation.margin", "[15,5]");

' Connector line radius used with right-angle connector types and styling
Chart.DefaultElement.CornerRadius = 3
Chart.DefaultSeries.Line.Width = 1
Chart.DefaultSeries.Line.Color = Color.Gray

' Node styling
Chart.DefaultElement.Outline.Width = 1
Chart.DefaultElement.Outline.Color = Color.LightGray
Chart.DefaultSeries.DefaultElement.Color = Color.White

' Initial node dimention sync.
Chart.DefaultElement.Annotation.SyncHeight = SyncDimention.All
Chart.DefaultElement.Annotation.SyncWidth = SyncDimention.All

Chart.DefaultElement.Annotation.Padding = 5
Chart.DefaultElement.Annotation.DefaultCorner = BoxCorner.Round
Chart.DefaultElement.Annotation.CornerSize = 3

' *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 ser As Series = New Series("")
Dim el1 As Element = New Element()
el1.Name = "President"
ser.Elements.Add(el1)
Dim el2 As Element = New Element()
el2.Name = "Vice President Account Services"
el2.Parent = el1
ser.Elements.Add(el2)
Dim el3 As Element = New Element()
el3.Name = "Vice President Creative Services"
el3.Parent = el1
ser.Elements.Add(el3)
Dim el4 As Element = New Element()
el4.Name = "Vice President Marketing Services"
el4.Parent = el1
ser.Elements.Add(el4)
Dim el5 As Element = New Element()
el5.Name = "Account Supervisor"
el5.Parent = el2
ser.Elements.Add(el5)
Dim el6 As Element = New Element()
el6.Name = "Account Supervisor"
el6.Parent = el2
ser.Elements.Add(el6)
Dim el7 As Element = New Element()
el7.Name = "Account Executive"
el7.Parent = el5
ser.Elements.Add(el7)
Dim el8 As Element = New Element()
el8.Name = "Account Executive"
el8.Parent = el5
ser.Elements.Add(el8)
Dim el9 As Element = New Element()
el9.Name = "Art/Copy"
el9.Parent = el3
ser.Elements.Add(el9)
Dim el10 As Element = New Element()
el10.Name = "Production"
el10.Parent = el3
ser.Elements.Add(el10)
Dim el11 As Element = New Element()
el11.Name = "Media"
el11.Parent = el4
ser.Elements.Add(el11)
Dim el12 As Element = New Element()
el12.Name = "Research"
el12.Parent = el4
ser.Elements.Add(el12)

Return New SeriesCollection(ser)

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 syncSize() {
var syncWidth = document.getElementById('syncWidth').selectedOptions[0].value;
var syncHeight = document.getElementById('syncHeight').selectedOptions[0].value;
myJSC
.series()
.points()
.options({
annotation: {
syncWidth: syncWidth === 'none' ? false : syncWidth,
syncHeight: syncHeight === 'none' ? false : syncHeight
}
});
}
</script>
<style type="text/css">
html
{
font-family:"Lucida Grande","Lucida Sans Unicode","Bitstream Vera Sans","Trebuchet MS",Verdana,sans-serif
}
</style>
</head>

<body>
<div align="center">
Sync Width: <select id="syncWidth" name="syncWidth" onchange="syncSize();">
<option value="all" selected>All</option>
<option value="level">Level</option>
<option value="none" >None</option>
</select>
Sync Height: <select id="syncHeight" name="syncHeight" onchange="syncSize();">
<option value="all" selected>All</option>
<option value="level">Level</option>
<option value="none" >None</option>
</select>
<dotnet:Chart ID="Chart" runat="server" />
</div>
</body>
</html>

Sample FilenameJsOrgSyncWidthHeight.aspx
Version10.5
Uses DatabaseNo

JS Charting

Gallery

JS Org Sync Width Height