<%@ 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 how to compute point hierarchy breadcrumbs in organization chart.

Chart.TempDirectory = "temp";
Chart.Debug = false;
Chart.Type = ChartType.Organizational;
Chart.Size = "750x430";

Chart.JS.Enabled = true;
Chart.JS.EnableElementSelection = true;
Chart.JS.ControlID = "myJSC";

Chart.JS.Buttons.EnableExportButton = false;
Chart.JS.Buttons.EnablePrintButton = false;

Chart.LegendBox.Visible = false;

Chart.ChartArea.Background.Color = Color.FromArgb(255, 184, 77);
Chart.ChartArea.Background.SecondaryColor = Color.FromArgb(255, 255, 204);
Chart.ChartArea.Background.GradientAngle = 90;
Chart.ChartArea.Background.Mode = BackgroundMode.Gradient;

Chart.JS.Settings.Add("defaultTooltip_enabled", "false");

Chart.JS.Settings.Add("series.0.defaultPoint.events_click", "js:pointClick");
Chart.JS.Settings.Add("series.0.defaultPoint.states.select.outline.dashStyle", "solid");
Chart.JS.Settings.Add("series.0.defaultPoint.states.select.outline.width", "3");

Annotation an = new Annotation("Click on a node to view the breadcrumbs leading up to it");
an.ClearColors();
an.Position = new Point(220, 380);
Chart.Annotations.Add(an);

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.Line.Transparency = 70;
Chart.DefaultSeries.DefaultElement.Outline.Color = Color.Gray;
Chart.DefaultSeries.DefaultElement.Outline.Width = 1;
Chart.DefaultSeries.DefaultElement.Outline.DashStyle = DashStyle.Dash;

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>
<script type="text/javascript">
function pointClick(point, e) {
var chart = myJSC,
point = this,
annotation = chart.annotations('crumbs'),
text;

var path = chart.connectors([this.id, 'up'], {});
if (path) {
text = path[0].map(idToPointName).join(' > ');
}

if (!annotation) {
chart.annotations.add({ id: 'crumbs', boxVisible: false, position: 'inside top left', label: { text: text, style_fontWeight: 'bold'} });
} else {
annotation.options({ 'label_text': text });
}

function idToPointName(id) {
return chart.series().points(id).name;
}
}
</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 how to compute point hierarchy breadcrumbs in organization chart.

Chart.TempDirectory = "temp"
Chart.Debug = False
Chart.Type = ChartType.Organizational
Chart.Size = "750x430"

Chart.JS.Enabled = True
Chart.JS.EnableElementSelection = True
Chart.JS.ControlID = "myJSC"

Chart.JS.Buttons.EnableExportButton = False
Chart.JS.Buttons.EnablePrintButton = False

Chart.LegendBox.Visible = False

Chart.ChartArea.Background.Color = Color.FromArgb(255, 184, 77)
Chart.ChartArea.Background.SecondaryColor = Color.FromArgb(255, 255, 204)
Chart.ChartArea.Background.GradientAngle = 90
Chart.ChartArea.Background.Mode = BackgroundMode.Gradient

Chart.JS.Settings.Add("defaultTooltip_enabled", "false")

Chart.JS.Settings.Add("series.0.defaultPoint.events_click", "js:pointClick")
Chart.JS.Settings.Add("series.0.defaultPoint.states.select.outline.dashStyle", "solid")
Chart.JS.Settings.Add("series.0.defaultPoint.states.select.outline.width", "3")

Dim an As Annotation = New Annotation("Click on a node to view the breadcrumbs leading up to it")
an.ClearColors()
an.Position = New Point(220, 380)
Chart.Annotations.Add(an)

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.Line.Transparency = 70
Chart.DefaultSeries.DefaultElement.Outline.Color = Color.Gray
Chart.DefaultSeries.DefaultElement.Outline.Width = 1
Chart.DefaultSeries.DefaultElement.Outline.DashStyle = DashStyle.Dash

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>
<script type="text/javascript">
function pointClick(point, e) {
var chart = myJSC,
point = this,
annotation = chart.annotations('crumbs'),
text;

var path = chart.connectors([this.id, 'up'], {});
if (path) {
text = path[0].map(idToPointName).join(' > ');
}

if (!annotation) {
chart.annotations.add({ id: 'crumbs', boxVisible: false, position: 'inside top left', label: { text: text, style_fontWeight: 'bold'} });
} else {
annotation.options({ 'label_text': text });
}

function idToPointName(id) {
return chart.series().points(id).name;
}
}
</script>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" />
</div>
</body>
</html>