Gallery

Gallery > Organizational Charts

JS Org Images

Demonstrates an organization chart with image.

Download Show C# Code Show VB Code

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

<script runat="server">

void Page_Load(Object sender, EventArgs e)
{
// Demonstrates an organization chart with image.
Chart.TempDirectory = "temp";
Chart.Debug = false;
Chart.JS.Enabled = true;
Chart.Type = ChartType.Organizational;
Chart.Size = "750x450";
Chart.LegendBox.Visible = false;

Chart.DefaultElement.ToolTip = "Tasks: %tasks";
Chart.DefaultSeries.DefaultElement.Color = Color.FromArgb(179,217,255);
Chart.DefaultElement.Outline.Width = 0;

Chart.DefaultElement.Annotation = new Annotation("%name %data<img margin_left=-60 margin_top=-64 width=64 height=64 src=%img>");
Chart.DefaultElement.Annotation.Label.AutoWrap = false;
Chart.DefaultElement.Annotation.Label.Color = Color.FromArgb(0,64,128);
Chart.DefaultElement.Annotation.Padding = 9;
Chart.DefaultElement.Annotation.Size = new Size(240, 80);
Chart.DefaultElement.Annotation.Label.Offset = new Point(60, 0);
Chart.DefaultElement.Annotation.Label.Alignment = StringAlignment.Near;

Chart.JS.Settings.Add("defaultPoint.annotation.margin", "10");
Chart.JS.Settings.Add("series.0.points.0.label.color", "White");
Chart.Palette = new Color[] { };

// *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 e1 = new Element("Margret Swanson");
e1.Color = Color.FromArgb(0, 64, 128);
e1.CustomAttributes.Add("img", "../../images/Org4.png");

Element e2 = new Element("Mark Hudson");
Element e3 = new Element("Chris Lysek");
Element e4 = new Element("Karyn Borbas");
Element e5 = new Element("Chris Rup");

e2.CustomAttributes.Add("img", "../../images/Org2.png");
e3.CustomAttributes.Add("img", "../../images/Org5.png");
e4.CustomAttributes.Add("img", "../../images/Org7.png");
e5.CustomAttributes.Add("img", "../../images/Org3.png");

e1.CustomAttributes.Add("data", "<ul><li>President</li><li>630-555-1111</li><li>Batavia, IL</li></ul>");
e2.CustomAttributes.Add("data", "<ul><li>Vice President Marketing</li><li>630-555-1111</li><li>Hanover Park, IL</li></ul>");
e3.CustomAttributes.Add("data", "<ul><li>Vice President Sales</li><li>630-555-2222</li><li>West Chicago, IL</li></ul>");
e4.CustomAttributes.Add("data", "<ul><li>Marketing Manager</li><li>312-555-3333</li><li>Chicago, IL</li></ul>");
e5.CustomAttributes.Add("data", "<ul><li>Marketing Manager</li><li>773-555-4444</li><li>Chicago, IL</li></ul>");

e1.CustomAttributes.Add("tasks", "<ul><li>Operations</li><li>Bookkeeping</li><li>Strategy</li></ul>");
e2.CustomAttributes.Add("tasks", "<ul><li>Product Strategy</li><li>Artistic Direction</li><li>Product Design</li></ul>");
e3.CustomAttributes.Add("tasks", "<ul><li>Sales HR</li><li>Market Development</li></ul>");
e4.CustomAttributes.Add("tasks", "<ul><li>Purchasing</li><li>Review</li></ul>");
e5.CustomAttributes.Add("tasks", "<ul><li>Marketing HR</li><li>Market Research</li></ul>");

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

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

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>
<dnc:Chart ID="Chart" runat="server" style="max-width:750px;max-height:500px;margin:0px auto;"/>
</body>
</html>

<%@ Page Language="vb" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dnc" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>

<script runat="server">

Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' Demonstrates an organization chart with image.
Chart.TempDirectory = "temp"
Chart.Debug = False
Chart.JS.Enabled = True
Chart.Type = ChartType.Organizational
Chart.Size = "750x450"
Chart.LegendBox.Visible = False

Chart.DefaultElement.ToolTip = "Tasks: %tasks"
Chart.DefaultSeries.DefaultElement.Color = Color.FromArgb(179,217,255)
Chart.DefaultElement.Outline.Width = 0

Chart.DefaultElement.Annotation = New Annotation("%name %data<img margin_left=-60 margin_top=-64 width=64 height=64 src=%img>")
Chart.DefaultElement.Annotation.Label.AutoWrap = False
Chart.DefaultElement.Annotation.Label.Color = Color.FromArgb(0,64,128)
Chart.DefaultElement.Annotation.Padding = 9
Chart.DefaultElement.Annotation.Size = New Size(240, 80)
Chart.DefaultElement.Annotation.Label.Offset = New Point(60, 0)
Chart.DefaultElement.Annotation.Label.Alignment = StringAlignment.Near

Chart.JS.Settings.Add("defaultPoint.annotation.margin", "10")
Chart.JS.Settings.Add("series.0.points.0.label.color", "White")
Chart.Palette = New Color() { }

' *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 e1 As Element = New Element("Margret Swanson")
e1.Color = Color.FromArgb(0, 64, 128)
e1.CustomAttributes.Add("img", "../../images/Org4.png")

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")

e2.CustomAttributes.Add("img", "../../images/Org2.png")
e3.CustomAttributes.Add("img", "../../images/Org5.png")
e4.CustomAttributes.Add("img", "../../images/Org7.png")
e5.CustomAttributes.Add("img", "../../images/Org3.png")

e1.CustomAttributes.Add("data", "<ul><li>President</li><li>630-555-1111</li><li>Batavia, IL</li></ul>")
e2.CustomAttributes.Add("data", "<ul><li>Vice President Marketing</li><li>630-555-1111</li><li>Hanover Park, IL</li></ul>")
e3.CustomAttributes.Add("data", "<ul><li>Vice President Sales</li><li>630-555-2222</li><li>West Chicago, IL</li></ul>")
e4.CustomAttributes.Add("data", "<ul><li>Marketing Manager</li><li>312-555-3333</li><li>Chicago, IL</li></ul>")
e5.CustomAttributes.Add("data", "<ul><li>Marketing Manager</li><li>773-555-4444</li><li>Chicago, IL</li></ul>")

e1.CustomAttributes.Add("tasks", "<ul><li>Operations</li><li>Bookkeeping</li><li>Strategy</li></ul>")
e2.CustomAttributes.Add("tasks", "<ul><li>Product Strategy</li><li>Artistic Direction</li><li>Product Design</li></ul>")
e3.CustomAttributes.Add("tasks", "<ul><li>Sales HR</li><li>Market Development</li></ul>")
e4.CustomAttributes.Add("tasks", "<ul><li>Purchasing</li><li>Review</li></ul>")
e5.CustomAttributes.Add("tasks", "<ul><li>Marketing HR</li><li>Market Research</li></ul>")

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

Return New SeriesCollection(New Series("", e1, e2, e3, e4, e5))
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>
<dnc:Chart ID="Chart" runat="server" style="max-width:750px;max-height:500px;margin:0px auto;"/>
</body>
</html>

Sample FilenameJsOrgImages.aspx
Version9.2
Uses DatabaseNo

JS Charting

Gallery

JS Org Images