Gallery
JS Organizational
<%@ 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