<%@ 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 interactive connector path highlighting modes.

Chart.TempDirectory = "temp";
Chart.Debug = true;
Chart.JS.Enabled = true;
Chart.JS.ControlID = "jsChart";
Chart.Size = "700x400";

Chart.TitleBox.Label.Text = "View the paths emanating from points on hover in the selected direction.";
Chart.TitleBox.Position = TitleBoxPosition.Center;

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 style
Chart.DefaultSeries.Line.Width = 1;

// Node styling
Chart.DefaultElement.Outline.Width = 1;
Chart.DefaultElement.Outline.Color = Color.LightGray;
Chart.DefaultElement.Outline.DashStyle = DashStyle.Dash;
Chart.DefaultElement.Color = Color.FromArgb(243,247,255);
Chart.DefaultElement.FocusGlow.Visible = false;

Chart.DefaultElement.Annotation.Padding = 9;
Chart.DefaultElement.Annotation.SyncHeight = SyncDimention.Level;
Chart.DefaultElement.Annotation.DefaultCorner = BoxCorner.Round;
Chart.DefaultElement.Annotation.CornerSize = 3;

// Wire up interactive functionality:

Chart.JS.Settings.Add("defaultPoint.events.mouseOver", "JS:pointOver");
Chart.JS.Settings.Add("defaultPoint.events.mouseOut", "JS:pointOut");

/* Muted state is used to highlight points down the tree. */
Chart.JS.Settings.Add("defaultPoint.states.mute", "JS:{ enabled: true, opacity: 1, outline: { color: '#006e98', width: 2}}");
/* Ensure select styles are created despite being disabled with point clicks. (defaultSeries.pointSelection) */
Chart.JS.Settings.Add("defaultPoint.states.select", "JS:{enabled: true, opacity: 1, outline: { color: '#1aa8ff' } }");


// *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 = "Eliott Nieves";
el1.CustomAttributes["role"] = "CEO";
ser.Elements.Add(el1);
Element el2 = new Element();
el2.Name = "Harvey-Lee Travis";
el2.Parent = el1;
el2.CustomAttributes["role"] = "Vice President";
ser.Elements.Add(el2);
Element el3 = new Element();
el3.Name = "Gethin Morley";
el3.Parent = el1;
el3.CustomAttributes["role"] = "Vice President";
ser.Elements.Add(el3);
Element el4 = new Element();
el4.Name = "Sonnie Kim";
el4.Parent = el1;
el4.CustomAttributes["role"] = "Vice President";
ser.Elements.Add(el4);
Element el5 = new Element();
el5.Name = "Dante Curtis";
el5.Parent = el2;
el5.CustomAttributes["role"] = "Manager";
ser.Elements.Add(el5);
Element el6 = new Element();
el6.Name = "Honey Mullen";
el6.Parent = el2;
el6.CustomAttributes["role"] = "Manager";
ser.Elements.Add(el6);
Element el7 = new Element();
el7.Name = "Steffan Taylor";
el7.Parent = el3;
el7.CustomAttributes["role"] = "Manager";
ser.Elements.Add(el7);
Element el8 = new Element();
el8.Name = "Charlton Hester";
el8.Parent = el3;
el8.CustomAttributes["role"] = "Manager";
ser.Elements.Add(el8);
Element el9 = new Element();
el9.Name = "Ishmael Orr";
el9.Parent = el3;
el9.CustomAttributes["role"] = "Manager";
ser.Elements.Add(el9);
Element el10 = new Element();
el10.Name = "Dua Frost";
el10.Parent = el9;
el10.CustomAttributes["role"] = "Manager";
ser.Elements.Add(el10);
Element el11 = new Element();
el11.Name = "Salahuddin Eastwood";
el11.Parent = el9;
el11.CustomAttributes["role"] = "Manager";
ser.Elements.Add(el11);
Element el12 = new Element();
el12.Name = "Nicole Tapia";
el12.Parent = el10;
el12.CustomAttributes["role"] = "Employee";
ser.Elements.Add(el12);
Element el13 = new Element();
el13.Name = "Arisha Hinton";
el13.Parent = el10;
el13.CustomAttributes["role"] = "Employee";
ser.Elements.Add(el13);
Element el14 = new Element();
el14.Name = "Martha Morley";
el14.Parent = el10;
el14.CustomAttributes["role"] = "Employee";
ser.Elements.Add(el14);
Element el15 = new Element();
el15.Name = "Cathy Mcpherson";
el15.Parent = el10;
el15.CustomAttributes["role"] = "Employee";
ser.Elements.Add(el15);
Element el16 = new Element();
el16.Name = "Kiara Johns";
el16.Parent = el4;
el16.CustomAttributes["role"] = "Manager";
ser.Elements.Add(el16);
Element el17 = new Element();
el17.Name = "Grant Cash";
el17.Parent = el4;
el17.CustomAttributes["role"] = "Manager";
ser.Elements.Add(el17);
Element el18 = new Element();
el18.Name = "Juanita Cottrell";
el18.Parent = el16;
el18.CustomAttributes["role"] = "Employee";
ser.Elements.Add(el18);
Element el19 = new Element();
el19.Name = "Allana Frey";
el19.Parent = el16;
el19.CustomAttributes["role"] = "Employee";
ser.Elements.Add(el19);

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">
var highlightDirection = 'Both',
highlightUpColor = '#1aa8ff',
highlightDownColor = '#006e98';

function pointOver() {
var point = this,
chart = point.chart;

highlightDirection = document.querySelector('input[name="direction"]:checked').value;

switch (highlightDirection) {
case 'Up':
highlightUp(point.id);
break;
case 'Down':
highlightDown(point.id);
break;
case 'Both':
highlightUp(point.id);
highlightDown(point.id);
}

chart
.series()
.points(point.id)
.options({ selected: true, muted: false });

updateInfo(point);

// Use the selected state to highlight up the tree.
function highlightUp(id) {
chart.connectors([id, 'up'], { color: highlightUpColor, width: 2 });
chart
.series()
.points([id, 'up'])
.options({ selected: true, muted: false });
}

// Use the muted state to highlight points down the tree.
function highlightDown(id) {
chart.connectors([id, 'down'], { color: highlightDownColor, width: 2 });
chart
.series()
.points([id, 'down'])
.options({ selected: false, muted: true });
}
}

function pointOut() {
var point = this;
reset(point.chart);
}

function reset(c) {
c.connectors();
c.series()
.points()
.options({ selected: false });
var el = document.getElementById('hoverInfo');
el.innerHTML = '';
}

function updateInfo(point) {
var chart = point.chart,
pathSelection = [point.id, highlightDirection],
paths = chart.connectors(pathSelection, {});

var html = ' Showing ' + paths.length + ' path' + (paths.length > 1 ? 's' : '') + ' top down.<br/>';

var pathList = paths.map(function (path) {
// Reverse so it lists top down.
path.reverse();

var result = '<li>' + path.map(idToPointName).join(' > ') + '</li>';
// Bold the hovered point name.
result = result.replace(point.x, '<b>' + point.x + '</b>');
return result;
});

html += '<ul>' + pathList.join('') + '</ul>';

var el = document.getElementById('hoverInfo');
el.innerHTML = html;

function idToPointName(id) {
var point = chart.series().points(id);
return point.x || point.name;
}
}
</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 style="margin: 8px auto;max-width: 750px;">
Highlight Direction: <input type="radio" id="up" name="direction" value="Up"><label for="up">Up</label>
� <input type="radio" id="down" name="direction" value="Down"><label for="down">Down</label>
� <input type="radio" id="both" name="direction" value="Both" checked><label for="both">Both</label>
<dotnet:Chart ID="Chart" runat="server" />

<div id="hoverInfo" style="min-height:200px;text-align: left;"></div>
</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 interactive connector path highlighting modes.

Chart.TempDirectory = "temp"
Chart.Debug = True
Chart.JS.Enabled = True
Chart.JS.ControlID = "jsChart"
Chart.Size = "700x400"

Chart.TitleBox.Label.Text = "View the paths emanating from points on hover in the selected direction."
Chart.TitleBox.Position = TitleBoxPosition.Center

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 style
Chart.DefaultSeries.Line.Width = 1

' Node styling
Chart.DefaultElement.Outline.Width = 1
Chart.DefaultElement.Outline.Color = Color.LightGray
Chart.DefaultElement.Outline.DashStyle = DashStyle.Dash
Chart.DefaultElement.Color = Color.FromArgb(243,247,255)
Chart.DefaultElement.FocusGlow.Visible = False

Chart.DefaultElement.Annotation.Padding = 9
Chart.DefaultElement.Annotation.SyncHeight = SyncDimention.Level
Chart.DefaultElement.Annotation.DefaultCorner = BoxCorner.Round
Chart.DefaultElement.Annotation.CornerSize = 3

' Wire up interactive functionality:

Chart.JS.Settings.Add("defaultPoint.events.mouseOver", "JS:pointOver")
Chart.JS.Settings.Add("defaultPoint.events.mouseOut", "JS:pointOut")

' Muted state is used to highlight points down the tree.
Chart.JS.Settings.Add("defaultPoint.states.mute", "JS:{ enabled: true, opacity: 1, outline: { color: '#006e98', width: 2}}")
' Ensure select styles are created despite being disabled with point clicks. (defaultSeries.pointSelection)
Chart.JS.Settings.Add("defaultPoint.states.select", "JS:{enabled: true, opacity: 1, outline: { color: '#1aa8ff' } }")


' *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 = "Eliott Nieves"
el1.CustomAttributes("role") = "CEO"
ser.Elements.Add(el1)
Dim el2 As Element = New Element()
el2.Name = "Harvey-Lee Travis"
el2.Parent = el1
el2.CustomAttributes("role") = "Vice President"
ser.Elements.Add(el2)
Dim el3 As Element = New Element()
el3.Name = "Gethin Morley"
el3.Parent = el1
el3.CustomAttributes("role") = "Vice President"
ser.Elements.Add(el3)
Dim el4 As Element = New Element()
el4.Name = "Sonnie Kim"
el4.Parent = el1
el4.CustomAttributes("role") = "Vice President"
ser.Elements.Add(el4)
Dim el5 As Element = New Element()
el5.Name = "Dante Curtis"
el5.Parent = el2
el5.CustomAttributes("role") = "Manager"
ser.Elements.Add(el5)
Dim el6 As Element = New Element()
el6.Name = "Honey Mullen"
el6.Parent = el2
el6.CustomAttributes("role") = "Manager"
ser.Elements.Add(el6)
Dim el7 As Element = New Element()
el7.Name = "Steffan Taylor"
el7.Parent = el3
el7.CustomAttributes("role") = "Manager"
ser.Elements.Add(el7)
Dim el8 As Element = New Element()
el8.Name = "Charlton Hester"
el8.Parent = el3
el8.CustomAttributes("role") = "Manager"
ser.Elements.Add(el8)
Dim el9 As Element = New Element()
el9.Name = "Ishmael Orr"
el9.Parent = el3
el9.CustomAttributes("role") = "Manager"
ser.Elements.Add(el9)
Dim el10 As Element = New Element()
el10.Name = "Dua Frost"
el10.Parent = el9
el10.CustomAttributes("role") = "Manager"
ser.Elements.Add(el10)
Dim el11 As Element = New Element()
el11.Name = "Salahuddin Eastwood"
el11.Parent = el9
el11.CustomAttributes("role") = "Manager"
ser.Elements.Add(el11)
Dim el12 As Element = New Element()
el12.Name = "Nicole Tapia"
el12.Parent = el10
el12.CustomAttributes("role") = "Employee"
ser.Elements.Add(el12)
Dim el13 As Element = New Element()
el13.Name = "Arisha Hinton"
el13.Parent = el10
el13.CustomAttributes("role") = "Employee"
ser.Elements.Add(el13)
Dim el14 As Element = New Element()
el14.Name = "Martha Morley"
el14.Parent = el10
el14.CustomAttributes("role") = "Employee"
ser.Elements.Add(el14)
Dim el15 As Element = New Element()
el15.Name = "Cathy Mcpherson"
el15.Parent = el10
el15.CustomAttributes("role") = "Employee"
ser.Elements.Add(el15)
Dim el16 As Element = New Element()
el16.Name = "Kiara Johns"
el16.Parent = el4
el16.CustomAttributes("role") = "Manager"
ser.Elements.Add(el16)
Dim el17 As Element = New Element()
el17.Name = "Grant Cash"
el17.Parent = el4
el17.CustomAttributes("role") = "Manager"
ser.Elements.Add(el17)
Dim el18 As Element = New Element()
el18.Name = "Juanita Cottrell"
el18.Parent = el16
el18.CustomAttributes("role") = "Employee"
ser.Elements.Add(el18)
Dim el19 As Element = New Element()
el19.Name = "Allana Frey"
el19.Parent = el16
el19.CustomAttributes("role") = "Employee"
ser.Elements.Add(el19)

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">
var highlightDirection = 'Both',
highlightUpColor = '#1aa8ff',
highlightDownColor = '#006e98';

function pointOver() {
var point = this,
chart = point.chart;

highlightDirection = document.querySelector('input[name="direction"]:checked').value;

switch (highlightDirection) {
case 'Up':
highlightUp(point.id);
break;
case 'Down':
highlightDown(point.id);
break;
case 'Both':
highlightUp(point.id);
highlightDown(point.id);
}

chart
.series()
.points(point.id)
.options({ selected: true, muted: false });

updateInfo(point);

// Use the selected state to highlight up the tree.
function highlightUp(id) {
chart.connectors([id, 'up'], { color: highlightUpColor, width: 2 });
chart
.series()
.points([id, 'up'])
.options({ selected: true, muted: false });
}

// Use the muted state to highlight points down the tree.
function highlightDown(id) {
chart.connectors([id, 'down'], { color: highlightDownColor, width: 2 });
chart
.series()
.points([id, 'down'])
.options({ selected: false, muted: true });
}
}

function pointOut() {
var point = this;
reset(point.chart);
}

function reset(c) {
c.connectors();
c.series()
.points()
.options({ selected: false });
var el = document.getElementById('hoverInfo');
el.innerHTML = '';
}

function updateInfo(point) {
var chart = point.chart,
pathSelection = [point.id, highlightDirection],
paths = chart.connectors(pathSelection, {});

var html = ' Showing ' + paths.length + ' path' + (paths.length > 1 ? 's' : '') + ' top down.<br/>';

var pathList = paths.map(function (path) {
// Reverse so it lists top down.
path.reverse();

var result = '<li>' + path.map(idToPointName).join(' > ') + '</li>';
// Bold the hovered point name.
result = result.replace(point.x, '<b>' + point.x + '</b>');
return result;
});

html += '<ul>' + pathList.join('') + '</ul>';

var el = document.getElementById('hoverInfo');
el.innerHTML = html;

function idToPointName(id) {
var point = chart.series().points(id);
return point.x || point.name;
}
}
</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 style="margin: 8px auto;max-width: 750px;">
Highlight Direction: <input type="radio" id="up" name="direction" value="Up"><label for="up">Up</label>
� <input type="radio" id="down" name="direction" value="Down"><label for="down">Down</label>
� <input type="radio" id="both" name="direction" value="Both" checked><label for="both">Both</label>
<dotnet:Chart ID="Chart" runat="server" />

<div id="hoverInfo" style="min-height:200px;text-align: left;"></div>
</div>
</body>
</html>