Gallery
JS Org Label Overflow Ellipsis
<%@ 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 leaf element label overflow truncation and laid out vertically .
Chart.TempDirectory = "temp";
Chart.Debug = false;
Chart.JS.Enabled = true;
Chart.JS.ControlID = "myJSC";
Chart.Type = ChartType.Organizational;
Chart.Size = "750x380";
//Disable tooltip
Chart.DefaultElement.ToolTip = "";
Chart.DefaultSeries.Line.Width = 1;
Chart.DefaultSeries.Line.Color = ColorTranslator.FromHtml("#e0e0e0");
Chart.DefaultElement.Annotation.SyncWidth = SyncDimention.All;
Chart.DefaultElement.Annotation.CornerSize = 3;
Chart.DefaultElement.Annotation.Padding = 10;
Chart.DefaultElement.FocusGlow.Width = 0;
Chart.DefaultSeries.DefaultLeafElement.Annotation.Label.Alignment = StringAlignment.Near;
// Label Overflow Ellipsis
Chart.DefaultSeries.DefaultLeafElement.Annotation.Label.MaxWidth = 100;
Chart.DefaultSeries.DefaultLeafElement.Annotation.Label.AutoWrap = false;
Chart.DefaultSeries.DefaultLeafElement.Color = Color.White;
Chart.DefaultSeries.DefaultLeafElement.Outline.Width = 0;
// Vertical leaf element layout can be set manually with:
//Chart.JS.Settings.Add("defaultSeries.defaultPoint.leafPointLayout", "vertical");
// *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()
{
SeriesCollection sc = new SeriesCollection();
Series ser1 = new Series("");
Element el1 = new Element();
el1.Name = "Office of the Director";
el1.Annotation.Label.Color = Color.White;
el1.Color = ColorTranslator.FromHtml("#00796B");
ser1.Elements.Add(el1);
Element el2 = new Element();
el2.Name = "Six Regions Nationwide";
el2.Color = ColorTranslator.FromHtml("#80CBC4");
el2.Parent = el1;
ser1.Elements.Add(el2);
Element el3 = new Element();
el3.Name = "Mid-Atlantic";
el3.Parent = el2;
ser1.Elements.Add(el3);
Element el4 = new Element();
el4.Name = "Midwest";
el4.Parent = el2;
ser1.Elements.Add(el4);
Element el5 = new Element();
el5.Name = "Northeast";
el5.Parent = el2;
ser1.Elements.Add(el5);
Element el6 = new Element();
el6.Name = "Pacific";
el6.Parent = el2;
ser1.Elements.Add(el6);
Element el7 = new Element();
el7.Name = "Southeast";
el7.Parent = el2;
ser1.Elements.Add(el7);
Element el8 = new Element();
el8.Name = "Southwest and Rocky Mountain Region";
el8.Parent = el2;
ser1.Elements.Add(el8);
Element el9 = new Element();
el9.Name = "Office of the Enforcement Director";
el9.Color = ColorTranslator.FromHtml("#80CBC4");
el9.Parent = el1;
ser1.Elements.Add(el9);
Element el10 = new Element();
el10.Name = "Expert Services";
el10.Parent = el9;
ser1.Elements.Add(el10);
Element el11 = new Element();
el11.Name = "Validation and Analytics";
el11.Parent = el9;
ser1.Elements.Add(el11);
Element el12 = new Element();
el12.Name = "Division of Program Operations ";
el12.Color = ColorTranslator.FromHtml("#80CBC4");
el12.Parent = el1;
ser1.Elements.Add(el12);
Element el13 = new Element();
el13.Name = "Scheduling and Jurisdiction";
el13.Parent = el12;
ser1.Elements.Add(el13);
Element el14 = new Element();
el14.Name = "Performance Management";
el14.Parent = el12;
ser1.Elements.Add(el14);
Element el15 = new Element();
el15.Name = "Quality Assurance";
el15.Parent = el12;
ser1.Elements.Add(el15);
Element el16 = new Element();
el16.Name = "National Programs";
el16.Parent = el12;
ser1.Elements.Add(el16);
Element el17 = new Element();
el17.Name = "Data Systems";
el17.Parent = el12;
ser1.Elements.Add(el17);
Element el18 = new Element();
el18.Name = "Division of Policy and Program Development";
el18.Color = ColorTranslator.FromHtml("#80CBC4");
el18.Parent = el1;
ser1.Elements.Add(el18);
Element el19 = new Element();
el19.Name = "Regulatory and Legislative Development";
el19.Parent = el18;
ser1.Elements.Add(el19);
Element el20 = new Element();
el20.Name = "Policy Development";
el20.Parent = el18;
ser1.Elements.Add(el20);
Element el21 = new Element();
el21.Name = "Training, Education, and Program Development";
el21.Parent = el18;
ser1.Elements.Add(el21);
Element el22 = new Element();
el22.Name = "Outreach and Public Engagement";
el22.Parent = el18;
ser1.Elements.Add(el22);
Element el23 = new Element();
el23.Name = "Help Desk Branch";
el23.Parent = el18;
ser1.Elements.Add(el23);
Element el24 = new Element();
el24.Name = "Division of Management and Administrative Programs";
el24.Color = ColorTranslator.FromHtml("#80CBC4");
el24.Parent = el1;
ser1.Elements.Add(el24);
Element el25 = new Element();
el25.Name = "Budget and Finance";
el25.Parent = el24;
ser1.Elements.Add(el25);
Element el26 = new Element();
el26.Name = "Human Capital and Workforce Management";
el26.Parent = el24;
ser1.Elements.Add(el26);
Element el27 = new Element();
el27.Name = "Information Services";
el27.Parent = el24;
ser1.Elements.Add(el27);
sc.Add(ser1);
return sc;
}
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 leaf element label overflow truncation and laid out vertically .
Chart.TempDirectory = "temp"
Chart.Debug = False
Chart.JS.Enabled = True
Chart.JS.ControlID = "myJSC"
Chart.Type = ChartType.Organizational
Chart.Size = "750x380"
'Disable tooltip
Chart.DefaultElement.ToolTip = ""
Chart.DefaultSeries.Line.Width = 1
Chart.DefaultSeries.Line.Color = ColorTranslator.FromHtml("#e0e0e0")
Chart.DefaultElement.Annotation.SyncWidth = SyncDimention.All
Chart.DefaultElement.Annotation.CornerSize = 3
Chart.DefaultElement.Annotation.Padding = 10
Chart.DefaultElement.FocusGlow.Width = 0
Chart.DefaultSeries.DefaultLeafElement.Annotation.Label.Alignment = StringAlignment.Near
' Label Overflow Ellipsis
Chart.DefaultSeries.DefaultLeafElement.Annotation.Label.MaxWidth = 100
Chart.DefaultSeries.DefaultLeafElement.Annotation.Label.AutoWrap = False
Chart.DefaultSeries.DefaultLeafElement.Color = Color.White
Chart.DefaultSeries.DefaultLeafElement.Outline.Width = 0
' Vertical leaf element layout can be set manually with:
'Chart.JS.Settings.Add("defaultSeries.defaultPoint.leafPointLayout", "vertical");
' *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 sc As SeriesCollection = New SeriesCollection()
Dim ser1 As Series = New Series("")
Dim el1 As Element = New Element()
el1.Name = "Office of the Director"
el1.Annotation.Label.Color = Color.White
el1.Color = ColorTranslator.FromHtml("#00796B")
ser1.Elements.Add(el1)
Dim el2 As Element = New Element()
el2.Name = "Six Regions Nationwide"
el2.Color = ColorTranslator.FromHtml("#80CBC4")
el2.Parent = el1
ser1.Elements.Add(el2)
Dim el3 As Element = New Element()
el3.Name = "Mid-Atlantic"
el3.Parent = el2
ser1.Elements.Add(el3)
Dim el4 As Element = New Element()
el4.Name = "Midwest"
el4.Parent = el2
ser1.Elements.Add(el4)
Dim el5 As Element = New Element()
el5.Name = "Northeast"
el5.Parent = el2
ser1.Elements.Add(el5)
Dim el6 As Element = New Element()
el6.Name = "Pacific"
el6.Parent = el2
ser1.Elements.Add(el6)
Dim el7 As Element = New Element()
el7.Name = "Southeast"
el7.Parent = el2
ser1.Elements.Add(el7)
Dim el8 As Element = New Element()
el8.Name = "Southwest and Rocky Mountain Region"
el8.Parent = el2
ser1.Elements.Add(el8)
Dim el9 As Element = New Element()
el9.Name = "Office of the Enforcement Director"
el9.Color = ColorTranslator.FromHtml("#80CBC4")
el9.Parent = el1
ser1.Elements.Add(el9)
Dim el10 As Element = New Element()
el10.Name = "Expert Services"
el10.Parent = el9
ser1.Elements.Add(el10)
Dim el11 As Element = New Element()
el11.Name = "Validation and Analytics"
el11.Parent = el9
ser1.Elements.Add(el11)
Dim el12 As Element = New Element()
el12.Name = "Division of Program Operations "
el12.Color = ColorTranslator.FromHtml("#80CBC4")
el12.Parent = el1
ser1.Elements.Add(el12)
Dim el13 As Element = New Element()
el13.Name = "Scheduling and Jurisdiction"
el13.Parent = el12
ser1.Elements.Add(el13)
Dim el14 As Element = New Element()
el14.Name = "Performance Management"
el14.Parent = el12
ser1.Elements.Add(el14)
Dim el15 As Element = New Element()
el15.Name = "Quality Assurance"
el15.Parent = el12
ser1.Elements.Add(el15)
Dim el16 As Element = New Element()
el16.Name = "National Programs"
el16.Parent = el12
ser1.Elements.Add(el16)
Dim el17 As Element = New Element()
el17.Name = "Data Systems"
el17.Parent = el12
ser1.Elements.Add(el17)
Dim el18 As Element = New Element()
el18.Name = "Division of Policy and Program Development"
el18.Color = ColorTranslator.FromHtml("#80CBC4")
el18.Parent = el1
ser1.Elements.Add(el18)
Dim el19 As Element = New Element()
el19.Name = "Regulatory and Legislative Development"
el19.Parent = el18
ser1.Elements.Add(el19)
Dim el20 As Element = New Element()
el20.Name = "Policy Development"
el20.Parent = el18
ser1.Elements.Add(el20)
Dim el21 As Element = New Element()
el21.Name = "Training, Education, and Program Development"
el21.Parent = el18
ser1.Elements.Add(el21)
Dim el22 As Element = New Element()
el22.Name = "Outreach and Public Engagement"
el22.Parent = el18
ser1.Elements.Add(el22)
Dim el23 As Element = New Element()
el23.Name = "Help Desk Branch"
el23.Parent = el18
ser1.Elements.Add(el23)
Dim el24 As Element = New Element()
el24.Name = "Division of Management and Administrative Programs"
el24.Color = ColorTranslator.FromHtml("#80CBC4")
el24.Parent = el1
ser1.Elements.Add(el24)
Dim el25 As Element = New Element()
el25.Name = "Budget and Finance"
el25.Parent = el24
ser1.Elements.Add(el25)
Dim el26 As Element = New Element()
el26.Name = "Human Capital and Workforce Management"
el26.Parent = el24
ser1.Elements.Add(el26)
Dim el27 As Element = New Element()
el27.Name = "Information Services"
el27.Parent = el24
ser1.Elements.Add(el27)
sc.Add(ser1)
Return sc
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 FilenameJsOrgLabelOverflowEllipsis.aspx
- Version10.5
- Uses DatabaseNo