<%@ 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 differing point styles option.

Chart.TempDirectory = "temp";
Chart.Debug = false;
Chart.Type = ChartType.Organizational;
Chart.Size = "750x450";
Chart.LegendBox.Visible = false;
Chart.JS.Enabled = true;
Chart.JS.ControlID = "myJSC";
Chart.ChartArea.Line.Color = Color.LightGray;

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.DefaultElement.ToolTip = "<b>%Name</b><br/>%desc";
Chart.DefaultElement.Annotation = new Annotation("<b>%Name</b><br/>%adm");
Chart.DefaultElement.Annotation.Label.AutoWrap = false;
Chart.DefaultElement.Annotation.Padding = 9;

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.DefaultElement.Outline.Color = Color.FromArgb(115, 188, 110);
Chart.DefaultElement.Outline.Width = 2;

Chart.DefaultSeries.Line.Width = 1;
Chart.DefaultSeries.Line.Color = Color.Black;
Chart.DefaultSeries.PaletteName = Palette.WarmEarth;

//Direct toolbar settings.
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();

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

SeriesCollection getData()
{

Element e1 = new Element("Alphabet");
e1.Color = Color.Red;

Element e2 = new Element("Calico");
Element e3 = new Element("Google X");
Element e4 = new Element("Google Capital");
Element e5 = new Element("Google");
Element e6 = new Element("Nest");
Element e7 = new Element("YouTube");
Element e8 = new Element("Google Search");
Element e9 = new Element("Google AdSense");
Element e10 = new Element("Google DeepMind");


e1.CustomAttributes.Add("type", "root");
e2.CustomAttributes.Add("type", "company");
e3.CustomAttributes.Add("type", "company");
e4.CustomAttributes.Add("type", "company");
e5.CustomAttributes.Add("type", "company");
e6.CustomAttributes.Add("type", "company");
e7.CustomAttributes.Add("type", "product");
e8.CustomAttributes.Add("type", "product");
e9.CustomAttributes.Add("type", "product");
e10.CustomAttributes.Add("type", "product");

e1.CustomAttributes.Add("desc", "''");
e2.CustomAttributes.Add("desc", "Research into longevity, life expansion.");
e3.CustomAttributes.Add("desc", "Self-driving cars, delivery drones and other projects");
e4.CustomAttributes.Add("desc", "Investments");
e5.CustomAttributes.Add("desc", "All traditional products of Google");
e6.CustomAttributes.Add("desc", "Thermostats and smart-home devices");
e7.CustomAttributes.Add("desc", "The video-hosting service");
e8.CustomAttributes.Add("desc", "The original, core Google search engine");
e9.CustomAttributes.Add("desc", "Online advertising");
e10.CustomAttributes.Add("desc", "Artificial intelligence research");

e1.CustomAttributes.Add("adm", "Larry Page, Sergey Brin, Eric Schmidt");
e2.CustomAttributes.Add("adm", "Arthur Levinson");
e3.CustomAttributes.Add("adm", "Astro Teller");
e4.CustomAttributes.Add("adm", "David Lawee");
e5.CustomAttributes.Add("adm", "Sundar Pichai");
e6.CustomAttributes.Add("adm", "Tony Fadell");
e7.CustomAttributes.Add("adm", "''");
e8.CustomAttributes.Add("adm", "''");
e9.CustomAttributes.Add("adm", "''");
e10.CustomAttributes.Add("adm", "''");

e1.CustomAttributes.Add("from", "2015");
e2.CustomAttributes.Add("from", "2013");
e3.CustomAttributes.Add("from", "2010");
e4.CustomAttributes.Add("from", "2013");
e5.CustomAttributes.Add("from", "1998");
e6.CustomAttributes.Add("from", "2010");
e7.CustomAttributes.Add("from", "2005");
e8.CustomAttributes.Add("from", "1997");
e9.CustomAttributes.Add("from", "2003");
e10.CustomAttributes.Add("from", "2010");

e2.Parent = e1;
e3.Parent = e1;
e4.Parent = e1;
e5.Parent = e1;
e6.Parent = e1;
e7.Parent = e5;
e8.Parent = e5;
e9.Parent = e5;
e10.Parent = e5;

return new SeriesCollection(new Series("", e1, e2, e3, e4, e5, e6, e7, e8, e9, e10));

}

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 differing point styles option.

Chart.TempDirectory = "temp"
Chart.Debug = False
Chart.Type = ChartType.Organizational
Chart.Size = "750x450"
Chart.LegendBox.Visible = False
Chart.JS.Enabled = True
Chart.JS.ControlID = "myJSC"
Chart.ChartArea.Line.Color = Color.LightGray

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.DefaultElement.ToolTip = "<b>%Name</b><br/>%desc"
Chart.DefaultElement.Annotation = New Annotation("<b>%Name</b><br/>%adm")
Chart.DefaultElement.Annotation.Label.AutoWrap = False
Chart.DefaultElement.Annotation.Padding = 9

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.DefaultElement.Outline.Color = Color.FromArgb(115, 188, 110)
Chart.DefaultElement.Outline.Width = 2

Chart.DefaultSeries.Line.Width = 1
Chart.DefaultSeries.Line.Color = Color.Black
Chart.DefaultSeries.PaletteName = Palette.WarmEarth

'Direct toolbar settings.
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()

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

Function getData() As SeriesCollection

Dim e1 As Element = New Element("Alphabet")
e1.Color = Color.Red

Dim e2 As Element = New Element("Calico")
Dim e3 As Element = New Element("Google X")
Dim e4 As Element = New Element("Google Capital")
Dim e5 As Element = New Element("Google")
Dim e6 As Element = New Element("Nest")
Dim e7 As Element = New Element("YouTube")
Dim e8 As Element = New Element("Google Search")
Dim e9 As Element = New Element("Google AdSense")
Dim e10 As Element = New Element("Google DeepMind")


e1.CustomAttributes.Add("type", "root")
e2.CustomAttributes.Add("type", "company")
e3.CustomAttributes.Add("type", "company")
e4.CustomAttributes.Add("type", "company")
e5.CustomAttributes.Add("type", "company")
e6.CustomAttributes.Add("type", "company")
e7.CustomAttributes.Add("type", "product")
e8.CustomAttributes.Add("type", "product")
e9.CustomAttributes.Add("type", "product")
e10.CustomAttributes.Add("type", "product")

e1.CustomAttributes.Add("desc", "''")
e2.CustomAttributes.Add("desc", "Research into longevity, life expansion.")
e3.CustomAttributes.Add("desc", "Self-driving cars, delivery drones and other projects")
e4.CustomAttributes.Add("desc", "Investments")
e5.CustomAttributes.Add("desc", "All traditional products of Google")
e6.CustomAttributes.Add("desc", "Thermostats and smart-home devices")
e7.CustomAttributes.Add("desc", "The video-hosting service")
e8.CustomAttributes.Add("desc", "The original, core Google search engine")
e9.CustomAttributes.Add("desc", "Online advertising")
e10.CustomAttributes.Add("desc", "Artificial intelligence research")

e1.CustomAttributes.Add("adm", "Larry Page, Sergey Brin, Eric Schmidt")
e2.CustomAttributes.Add("adm", "Arthur Levinson")
e3.CustomAttributes.Add("adm", "Astro Teller")
e4.CustomAttributes.Add("adm", "David Lawee")
e5.CustomAttributes.Add("adm", "Sundar Pichai")
e6.CustomAttributes.Add("adm", "Tony Fadell")
e7.CustomAttributes.Add("adm", "''")
e8.CustomAttributes.Add("adm", "''")
e9.CustomAttributes.Add("adm", "''")
e10.CustomAttributes.Add("adm", "''")

e1.CustomAttributes.Add("from", "2015")
e2.CustomAttributes.Add("from", "2013")
e3.CustomAttributes.Add("from", "2010")
e4.CustomAttributes.Add("from", "2013")
e5.CustomAttributes.Add("from", "1998")
e6.CustomAttributes.Add("from", "2010")
e7.CustomAttributes.Add("from", "2005")
e8.CustomAttributes.Add("from", "1997")
e9.CustomAttributes.Add("from", "2003")
e10.CustomAttributes.Add("from", "2010")

e2.Parent = e1
e3.Parent = e1
e4.Parent = e1
e5.Parent = e1
e6.Parent = e1
e7.Parent = e5
e8.Parent = e5
e9.Parent = e5
e10.Parent = e5

Return New SeriesCollection(New Series("", e1, e2, e3, e4, e5, e6, e7, e8, e9, e10))

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>