<%@ 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 styled to look like a flow chart with interactive hierarchical path highlighting.

Chart.TempDirectory = "temp";
Chart.Debug = true;
Chart.JS.Enabled = true;
Chart.JS.ControlID = "jsChart";
Chart.Size = "500x1050";

Chart.TitleBox.Label.Text = "Find roots of a quadratic equation ax²+bx+c=0";
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 = 8;
// Alternatively, set CSS style px margin array values with with different horizontal and vertical spacing between nodes:
// Chart.JS.Settings.Add("defaultPoint.annotation.margin", "[15,5]");

// Connector line style
Chart.DefaultSeries.Line.Width = 1;
Chart.DefaultSeries.Line.Color = ColorTranslator.FromHtml("#c9c9c9");
Chart.DefaultSeries.Line.EndCap = LineCap.ArrowAnchor;
Chart.DefaultSeries.Line.AnchorCapScale = 6;

// Node styling

Chart.DefaultElement.Annotation.Padding = 5;
Chart.DefaultElement.Annotation.Label.Width = 100;
Chart.DefaultElement.Annotation.SyncHeight = SyncDimention.All;
Chart.DefaultElement.Annotation.Label.Color = Color.White;
Chart.DefaultElement.Annotation.Line.Width = 2;
Chart.DefaultElement.Annotation.Line.Color = Color.Red;

Chart.DefaultElement.FocusGlow.Color = ColorTranslator.FromHtml("#424242");

// Wire up interactivity.
Chart.JS.Settings.Add("defaultPoint.events.mouseOver", "JS:pointOver");
Chart.JS.Settings.Add("defaultPoint.events.mouseOut", "JS:pointOut");
Chart.JS.Settings.Add("defaultPoint.states.mute", "{ enabled: true, opacity: 1, outline: { color: '#424242' } }");


SeriesCollection mySC = getData();

// Tweak some node type label offsets.
int index = 0;
foreach (Element el in mySC[0].Elements)
{
if (el.Annotation.DefaultCorner == BoxCorner.Round)
{
el.Annotation.Label.Offset = new Point(-5, 0);
}
else if (el.Annotation.DefaultCorner == BoxCorner.Cut)
{
el.Annotation.Label.Offset = new Point(-10, -4);
}
index++;
}


// *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



// Add the random data.
Chart.SeriesCollection.Add(mySC);
}

void styleElement(Element el, string type)
{
Color main = ColorTranslator.FromHtml("#009688");

if (type == "start/end")
{
el.Annotation.Background.Color = ColorTranslator.FromHtml("#009688");
el.Annotation.DefaultCorner = BoxCorner.Round;
el.Annotation.CornerSize = 40;
}
else if (type == "decision")
{
//el.Annotation.Label.Color = Color.White;
el.Annotation.DefaultCorner = BoxCorner.Cut;
el.Annotation.CornerSize = 40;

}
else if (type == "process")
{
//el.Annotation.Label.Color = ColorTranslator.FromHtml("#424242"); ;
el.Annotation.DefaultCorner = BoxCorner.Square;
el.Annotation.CornerSize = 40;
}
else if (type == "option")
{
el.Annotation.Label.Color = ColorTranslator.FromHtml("#424242");
el.Annotation.Size = new Size(80, 20);
Chart.DefaultElement.Annotation.Label.Width = 80;
el.Outline.Width = 0;
el.Annotation.Padding = 0;
}
}

SeriesCollection getData()
{
Series ser1 = new Series("");
Element el1 = new Element();
el1.Name = "Start";
el1.Color = ColorTranslator.FromHtml("#424242");
el1.CustomAttributes["element"] = "start/end";
styleElement(el1, "start/end");
ser1.Elements.Add(el1);
Element el2 = new Element();
el2.Name = "Landing Page";
el2.Color = ColorTranslator.FromHtml("#90A4AE");
el2.Parent = el1;
el2.CustomAttributes["element"] = "process";
styleElement(el2, "process");
ser1.Elements.Add(el2);
Element el3 = new Element();
el3.Name = "Have an account?";
el3.Color = ColorTranslator.FromHtml("#039BE5");
el3.Parent = el2;
el3.CustomAttributes["element"] = "decision";
styleElement(el3, "decision");
ser1.Elements.Add(el3);
Element el4 = new Element();
el4.Name = "Yes";
el4.Color = ColorTranslator.FromHtml("white");
el4.Parent = el3;
el4.CustomAttributes["element"] = "option";
styleElement(el4, "option");
ser1.Elements.Add(el4);
Element el5 = new Element();
el5.Name = "No";
el5.Color = ColorTranslator.FromHtml("white");
el5.Parent = el3;
el5.CustomAttributes["element"] = "option";
styleElement(el5, "option");
ser1.Elements.Add(el5);
Element el6 = new Element();
el6.Name = "Login";
el6.Color = ColorTranslator.FromHtml("#90A4AE");
el6.Parent = el4;
el6.CustomAttributes["element"] = "process";
styleElement(el6, "process");
ser1.Elements.Add(el6);
Element el7 = new Element();
el7.Name = "Valid?";
el7.Color = ColorTranslator.FromHtml("#039BE5");
el7.Parent = el6;
el7.CustomAttributes["element"] = "decision";
styleElement(el7, "decision");
ser1.Elements.Add(el7);
Element el8 = new Element();
el8.Name = "No";
el8.Color = ColorTranslator.FromHtml("white");
el8.Parent = el7;
el8.CustomAttributes["element"] = "option";
styleElement(el8, "option");
ser1.Elements.Add(el8);
Element el9 = new Element();
el9.Name = "Yes";
el9.Color = ColorTranslator.FromHtml("white");
el9.Parent = el7;
el9.CustomAttributes["element"] = "option";
styleElement(el9, "option");
ser1.Elements.Add(el9);
Element el10 = new Element();
el10.Name = "Forgot your password?";
el10.Color = ColorTranslator.FromHtml("#039BE5");
el10.Parent = el8;
el10.CustomAttributes["element"] = "decision";
styleElement(el10, "decision");
ser1.Elements.Add(el10);
Element el11 = new Element();
el11.Name = "No";
el11.Color = ColorTranslator.FromHtml("white");
el11.Parent = el10;
el11.CustomAttributes["element"] = "option";
styleElement(el11, "option");
ser1.Elements.Add(el11);
Element el12 = new Element();
el12.Name = "Yes";
el12.Color = ColorTranslator.FromHtml("white");
el12.Parent = el10;
el12.CustomAttributes["element"] = "option";
styleElement(el12, "option");
ser1.Elements.Add(el12);
Element el13 = new Element();
el13.Name = "Mail with password reset";
el13.Color = ColorTranslator.FromHtml("#90A4AE");
el13.Parent = el12;
el13.CustomAttributes["element"] = "process";
styleElement(el13, "process");
ser1.Elements.Add(el13);
Element el14 = new Element();
el14.Name = "User chooses new password";
el14.Color = ColorTranslator.FromHtml("#90A4AE");
el14.Parent = el13;
el14.CustomAttributes["element"] = "process";
styleElement(el14, "process");
ser1.Elements.Add(el14);
Element el15 = new Element();
el15.Name = "Sign up";
el15.Color = ColorTranslator.FromHtml("#90A4AE");
el15.Parent = el5;
el15.CustomAttributes["element"] = "process";
styleElement(el15, "process");
ser1.Elements.Add(el15);
Element el16 = new Element();
el16.Name = "User fills form";
el16.Color = ColorTranslator.FromHtml("#90A4AE");
el16.Parent = el15;
el16.CustomAttributes["element"] = "process";
styleElement(el16, "process");
ser1.Elements.Add(el16);
Element el17 = new Element();
el17.Name = "Data valid?";
el17.Color = ColorTranslator.FromHtml("#039BE5");
el17.Parent = el16;
el17.CustomAttributes["element"] = "decision";
styleElement(el17, "decision");
ser1.Elements.Add(el17);
Element el18 = new Element();
el18.Name = "Yes";
el18.Color = ColorTranslator.FromHtml("white");
el18.Parent = el17;
el18.CustomAttributes["element"] = "option";
styleElement(el18, "option");
ser1.Elements.Add(el18);
Element el19 = new Element();
el19.Name = "No";
el19.Color = ColorTranslator.FromHtml("white");
el19.Parent = el17;
el19.CustomAttributes["element"] = "option";
styleElement(el19, "option");
ser1.Elements.Add(el19);
Element el20 = new Element();
el20.Name = "Data is invalid";
el20.Color = ColorTranslator.FromHtml("#90A4AE");
el20.Parent = el19;
el20.CustomAttributes["element"] = "process";
styleElement(el20, "process");
ser1.Elements.Add(el20);
Element el21 = new Element();
el21.Name = "Mail with activation link";
el21.Color = ColorTranslator.FromHtml("#90A4AE");
el21.Parent = el18;
el21.CustomAttributes["element"] = "process";
styleElement(el21, "process");
ser1.Elements.Add(el21);
Element el22 = new Element();
el22.Name = "User activates account";
el22.Color = ColorTranslator.FromHtml("#90A4AE");
el22.Parent = el21;
el22.CustomAttributes["element"] = "process";
styleElement(el22, "process");
ser1.Elements.Add(el22);
Element el23 = new Element();
el23.Name = "Logged in";
el23.Color = ColorTranslator.FromHtml("#90A4AE");
el23.Parent = el22;
el23.CustomAttributes["element"] = "process";
styleElement(el23, "process");
ser1.Elements.Add(el23);
Element el24 = new Element();
el24.Name = "End";
el24.Color = ColorTranslator.FromHtml("#424242");
el24.Parent = el23;
el24.CustomAttributes["element"] = "start/end";
styleElement(el24, "start/end");
ser1.Elements.Add(el24);
return new SeriesCollection(ser1);

}

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 selectedPoint;
var highlightColor = '#424242';
function styleSelectedPoints(c) {
// Clear styling
c.connectors();
c.series().points().options({ muted: false });
if (selectedPoint) {
var path = [selectedPoint, 'up'];
c.connectors(path, { color: highlightColor, width: 2 });
c.series().points(path).options({ muted: true });
}
}
// Returning false from these events handlers prevents mute state changes (unmuting) the chart does automatically.
function pointOver() {
this.chart.connectors([this.id, 'up'], { color: highlightColor });
this.chart.series().points([this.id, 'up']).options({ muted: true });
return false;
}
function pointOut() {
styleSelectedPoints(this.chart);
return false;
}
</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 styled to look like a flow chart with interactive hierarchical path highlighting.

Chart.TempDirectory = "temp"
Chart.Debug = True
Chart.JS.Enabled = True
Chart.JS.ControlID = "jsChart"
Chart.Size = "500x1050"

Chart.TitleBox.Label.Text = "Find roots of a quadratic equation ax²+bx+c=0"
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 = 8
' Alternatively, set CSS style px margin array values with with different horizontal and vertical spacing between nodes:
' Chart.JS.Settings.Add("defaultPoint.annotation.margin", "[15,5]");

' Connector line style
Chart.DefaultSeries.Line.Width = 1
Chart.DefaultSeries.Line.Color = ColorTranslator.FromHtml("#c9c9c9")
Chart.DefaultSeries.Line.EndCap = LineCap.ArrowAnchor
Chart.DefaultSeries.Line.AnchorCapScale = 6

' Node styling

Chart.DefaultElement.Annotation.Padding = 5
Chart.DefaultElement.Annotation.Label.Width = 100
Chart.DefaultElement.Annotation.SyncHeight = SyncDimention.All
Chart.DefaultElement.Annotation.Label.Color = Color.White
Chart.DefaultElement.Annotation.Line.Width = 2
Chart.DefaultElement.Annotation.Line.Color = Color.Red

Chart.DefaultElement.FocusGlow.Color = ColorTranslator.FromHtml("#424242")

' Wire up interactivity.
Chart.JS.Settings.Add("defaultPoint.events.mouseOver", "JS:pointOver")
Chart.JS.Settings.Add("defaultPoint.events.mouseOut", "JS:pointOut")
Chart.JS.Settings.Add("defaultPoint.states.mute", "{ enabled: true, opacity: 1, outline: { color: '#424242' } }")


Dim mySC As SeriesCollection = getData()

' Tweak some node type label offsets.
Dim index As Integer = 0
For Each el As Element In mySC(0).Elements
If el.Annotation.DefaultCorner = BoxCorner.Round Then
el.Annotation.Label.Offset = New Point(-5, 0)
ElseIf el.Annotation.DefaultCorner = BoxCorner.Cut Then
el.Annotation.Label.Offset = New Point(-10, -4)
End If
index += 1
Next el


' *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



' Add the random data.
Chart.SeriesCollection.Add(mySC)
End Sub

Sub styleElement(ByVal el As Element, ByVal type As String)
Dim main As Color = ColorTranslator.FromHtml("#009688")

If type = "start/end" Then
el.Annotation.Background.Color = ColorTranslator.FromHtml("#009688")
el.Annotation.DefaultCorner = BoxCorner.Round
el.Annotation.CornerSize = 40
ElseIf type = "decision" Then
'el.Annotation.Label.Color = Color.White;
el.Annotation.DefaultCorner = BoxCorner.Cut
el.Annotation.CornerSize = 40

ElseIf type = "process" Then
'el.Annotation.Label.Color = ColorTranslator.FromHtml("#424242"); ;
el.Annotation.DefaultCorner = BoxCorner.Square
el.Annotation.CornerSize = 40
ElseIf type = "option" Then
el.Annotation.Label.Color = ColorTranslator.FromHtml("#424242")
el.Annotation.Size = New Size(80, 20)
Chart.DefaultElement.Annotation.Label.Width = 80
el.Outline.Width = 0
el.Annotation.Padding = 0
End If
End Sub

Function getData() As SeriesCollection
Dim ser1 As Series = New Series("")
Dim el1 As Element = New Element()
el1.Name = "Start"
el1.Color = ColorTranslator.FromHtml("#424242")
el1.CustomAttributes("element") = "start/end"
styleElement(el1, "start/end")
ser1.Elements.Add(el1)
Dim el2 As Element = New Element()
el2.Name = "Landing Page"
el2.Color = ColorTranslator.FromHtml("#90A4AE")
el2.Parent = el1
el2.CustomAttributes("element") = "process"
styleElement(el2, "process")
ser1.Elements.Add(el2)
Dim el3 As Element = New Element()
el3.Name = "Have an account?"
el3.Color = ColorTranslator.FromHtml("#039BE5")
el3.Parent = el2
el3.CustomAttributes("element") = "decision"
styleElement(el3, "decision")
ser1.Elements.Add(el3)
Dim el4 As Element = New Element()
el4.Name = "Yes"
el4.Color = ColorTranslator.FromHtml("white")
el4.Parent = el3
el4.CustomAttributes("element") = "option"
styleElement(el4, "option")
ser1.Elements.Add(el4)
Dim el5 As Element = New Element()
el5.Name = "No"
el5.Color = ColorTranslator.FromHtml("white")
el5.Parent = el3
el5.CustomAttributes("element") = "option"
styleElement(el5, "option")
ser1.Elements.Add(el5)
Dim el6 As Element = New Element()
el6.Name = "Login"
el6.Color = ColorTranslator.FromHtml("#90A4AE")
el6.Parent = el4
el6.CustomAttributes("element") = "process"
styleElement(el6, "process")
ser1.Elements.Add(el6)
Dim el7 As Element = New Element()
el7.Name = "Valid?"
el7.Color = ColorTranslator.FromHtml("#039BE5")
el7.Parent = el6
el7.CustomAttributes("element") = "decision"
styleElement(el7, "decision")
ser1.Elements.Add(el7)
Dim el8 As Element = New Element()
el8.Name = "No"
el8.Color = ColorTranslator.FromHtml("white")
el8.Parent = el7
el8.CustomAttributes("element") = "option"
styleElement(el8, "option")
ser1.Elements.Add(el8)
Dim el9 As Element = New Element()
el9.Name = "Yes"
el9.Color = ColorTranslator.FromHtml("white")
el9.Parent = el7
el9.CustomAttributes("element") = "option"
styleElement(el9, "option")
ser1.Elements.Add(el9)
Dim el10 As Element = New Element()
el10.Name = "Forgot your password?"
el10.Color = ColorTranslator.FromHtml("#039BE5")
el10.Parent = el8
el10.CustomAttributes("element") = "decision"
styleElement(el10, "decision")
ser1.Elements.Add(el10)
Dim el11 As Element = New Element()
el11.Name = "No"
el11.Color = ColorTranslator.FromHtml("white")
el11.Parent = el10
el11.CustomAttributes("element") = "option"
styleElement(el11, "option")
ser1.Elements.Add(el11)
Dim el12 As Element = New Element()
el12.Name = "Yes"
el12.Color = ColorTranslator.FromHtml("white")
el12.Parent = el10
el12.CustomAttributes("element") = "option"
styleElement(el12, "option")
ser1.Elements.Add(el12)
Dim el13 As Element = New Element()
el13.Name = "Mail with password reset"
el13.Color = ColorTranslator.FromHtml("#90A4AE")
el13.Parent = el12
el13.CustomAttributes("element") = "process"
styleElement(el13, "process")
ser1.Elements.Add(el13)
Dim el14 As Element = New Element()
el14.Name = "User chooses new password"
el14.Color = ColorTranslator.FromHtml("#90A4AE")
el14.Parent = el13
el14.CustomAttributes("element") = "process"
styleElement(el14, "process")
ser1.Elements.Add(el14)
Dim el15 As Element = New Element()
el15.Name = "Sign up"
el15.Color = ColorTranslator.FromHtml("#90A4AE")
el15.Parent = el5
el15.CustomAttributes("element") = "process"
styleElement(el15, "process")
ser1.Elements.Add(el15)
Dim el16 As Element = New Element()
el16.Name = "User fills form"
el16.Color = ColorTranslator.FromHtml("#90A4AE")
el16.Parent = el15
el16.CustomAttributes("element") = "process"
styleElement(el16, "process")
ser1.Elements.Add(el16)
Dim el17 As Element = New Element()
el17.Name = "Data valid?"
el17.Color = ColorTranslator.FromHtml("#039BE5")
el17.Parent = el16
el17.CustomAttributes("element") = "decision"
styleElement(el17, "decision")
ser1.Elements.Add(el17)
Dim el18 As Element = New Element()
el18.Name = "Yes"
el18.Color = ColorTranslator.FromHtml("white")
el18.Parent = el17
el18.CustomAttributes("element") = "option"
styleElement(el18, "option")
ser1.Elements.Add(el18)
Dim el19 As Element = New Element()
el19.Name = "No"
el19.Color = ColorTranslator.FromHtml("white")
el19.Parent = el17
el19.CustomAttributes("element") = "option"
styleElement(el19, "option")
ser1.Elements.Add(el19)
Dim el20 As Element = New Element()
el20.Name = "Data is invalid"
el20.Color = ColorTranslator.FromHtml("#90A4AE")
el20.Parent = el19
el20.CustomAttributes("element") = "process"
styleElement(el20, "process")
ser1.Elements.Add(el20)
Dim el21 As Element = New Element()
el21.Name = "Mail with activation link"
el21.Color = ColorTranslator.FromHtml("#90A4AE")
el21.Parent = el18
el21.CustomAttributes("element") = "process"
styleElement(el21, "process")
ser1.Elements.Add(el21)
Dim el22 As Element = New Element()
el22.Name = "User activates account"
el22.Color = ColorTranslator.FromHtml("#90A4AE")
el22.Parent = el21
el22.CustomAttributes("element") = "process"
styleElement(el22, "process")
ser1.Elements.Add(el22)
Dim el23 As Element = New Element()
el23.Name = "Logged in"
el23.Color = ColorTranslator.FromHtml("#90A4AE")
el23.Parent = el22
el23.CustomAttributes("element") = "process"
styleElement(el23, "process")
ser1.Elements.Add(el23)
Dim el24 As Element = New Element()
el24.Name = "End"
el24.Color = ColorTranslator.FromHtml("#424242")
el24.Parent = el23
el24.CustomAttributes("element") = "start/end"
styleElement(el24, "start/end")
ser1.Elements.Add(el24)
Return New SeriesCollection(ser1)

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 selectedPoint;
var highlightColor = '#424242';
function styleSelectedPoints(c) {
// Clear styling
c.connectors();
c.series().points().options({ muted: false });
if (selectedPoint) {
var path = [selectedPoint, 'up'];
c.connectors(path, { color: highlightColor, width: 2 });
c.series().points(path).options({ muted: true });
}
}
// Returning false from these events handlers prevents mute state changes (unmuting) the chart does automatically.
function pointOver() {
this.chart.connectors([this.id, 'up'], { color: highlightColor });
this.chart.series().points([this.id, 'up']).options({ muted: true });
return false;
}
function pointOut() {
styleSelectedPoints(this.chart);
return false;
}
</script>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" />
</div>
</body>
</html>