Gallery
PreviousJS Flow Custom Styling
<%@ 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.
Chart.TempDirectory = "temp";
Chart.Debug = true;
Chart.JS.Enabled = true;
Chart.JS.ControlID = "jsChart";
Chart.Size = "500x650";
Chart.TitleBox.Label.Text = "Find roots of a quadratic equation ax<sup>2</sup>+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 = 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 = 2;
Chart.DefaultSeries.Line.Color = ColorTranslator.FromHtml("#009688");
// Node styling
// Initial outline width is 0.
Chart.DefaultElement.Outline.Width = 2;
Chart.DefaultElement.Outline.Color = ColorTranslator.FromHtml("#009688");
Chart.DefaultElement.Annotation.Padding = 9;
Chart.DefaultElement.Annotation.Label.Width = 120;
Chart.DefaultElement.Annotation.Line.Width = 2;
Chart.DefaultElement.Annotation.Line.Color = Color.Red;
SeriesCollection mySC = getData();
// Tweak the decision labels.
mySC[0].Elements[6].Annotation.Label.Offset = new Point(-5, -5);
mySC[0].Elements[10].Annotation.Label.Offset = new Point(-5, -5);
// *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.Outline.Width = 0;
el.Annotation.Padding = 0;
}
}
SeriesCollection getData()
{
Series ser1 = new Series("");
Element el1 = new Element();
el1.Name = "ax<sup>2</sup>+bx+c=0";
el1.Color = ColorTranslator.FromHtml("white");
el1.CustomAttributes["element"] = "process";
styleElement(el1, "process");
ser1.Elements.Add(el1);
Element el2 = new Element();
el2.Name = "a = 0 or b = 0?";
el2.Color = ColorTranslator.FromHtml("#009688");
el2.Parent = el1;
el2.CustomAttributes["element"] = "decision";
styleElement(el2, "process");
ser1.Elements.Add(el2);
Element el3 = new Element();
el3.Name = "Yes";
el3.Color = ColorTranslator.FromHtml("white");
el3.Parent = el2;
el3.CustomAttributes["element"] = "option";
styleElement(el3, "option");
ser1.Elements.Add(el3);
Element el4 = new Element();
el4.Name = "No";
el4.Color = ColorTranslator.FromHtml("white");
el4.Parent = el2;
el4.CustomAttributes["element"] = "option";
styleElement(el4, "option");
ser1.Elements.Add(el4);
Element el5 = new Element();
el5.Name = "Please enter non-zero values";
el5.Color = ColorTranslator.FromHtml("white");
el5.Parent = el3;
el5.CustomAttributes["element"] = "process";
styleElement(el5, "process");
ser1.Elements.Add(el5);
Element el6 = new Element();
el6.Name = "Calculate discriminant<br>D = b<sup>2</sup> - 4ac";
el6.Color = ColorTranslator.FromHtml("white");
el6.Parent = el4;
el6.CustomAttributes["element"] = "process";
styleElement(el6, "process");
ser1.Elements.Add(el6);
Element el7 = new Element();
el7.Name = "D > 0?";
el7.Color = ColorTranslator.FromHtml("#009688");
el7.Parent = el6;
el7.CustomAttributes["element"] = "decision";
styleElement(el7, "decision");
ser1.Elements.Add(el7);
Element el8 = new Element();
el8.Name = "Yes";
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 = "No";
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 = "x<sub>1</sub> = (-b + √D)/2a<br>x<sub>2</sub> = (-b - √D)/2a";
el10.Color = ColorTranslator.FromHtml("white");
el10.Parent = el8;
el10.CustomAttributes["element"] = "process";
styleElement(el10, "process");
ser1.Elements.Add(el10);
Element el11 = new Element();
el11.Name = "D = 0?";
el11.Color = ColorTranslator.FromHtml("#009688");
el11.Parent = el9;
el11.CustomAttributes["element"] = "decision";
styleElement(el11, "decision");
ser1.Elements.Add(el11);
Element el12 = new Element();
el12.Name = "Yes";
el12.Color = ColorTranslator.FromHtml("white");
el12.Parent = el11;
el12.CustomAttributes["element"] = "option";
styleElement(el12, "option");
ser1.Elements.Add(el12);
Element el13 = new Element();
el13.Name = "No";
el13.Color = ColorTranslator.FromHtml("white");
el13.Parent = el11;
el13.CustomAttributes["element"] = "option";
styleElement(el13, "option");
ser1.Elements.Add(el13);
Element el14 = new Element();
el14.Name = "x<sub>1</sub> = x<sub>2</sub> = -b/2a";
el14.Color = ColorTranslator.FromHtml("white");
el14.Parent = el12;
el14.CustomAttributes["element"] = "process";
styleElement(el14, "process");
ser1.Elements.Add(el14);
Element el15 = new Element();
el15.Name = "There are no real roots";
el15.Color = ColorTranslator.FromHtml("white");
el15.Parent = el13;
el15.CustomAttributes["element"] = "process";
styleElement(el15, "process");
ser1.Elements.Add(el15);
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 palette = ['#4285F4', '#fE4C14', '#DBCB18', '#15AC20', '#D150B1'];
function myCallback(chart) {
chart.series().points().each(function (p) {
/**
* Improve performance by setting second argument (updateOptions) to false and prevent chart
* redraw on every point options update.
*/
p.options({ outline_color: palette[p.y] }, false);
});
/**
* Update the chart fully and only once.
*/
chart.redraw();
}
var selectedLevel = null;
function pointClick() {
var point = this,
chart = point.chart;
reset(chart);
// Click again to unselect level.
if (selectedLevel === point.y) {
selectedLevel = null;
return;
}
selectedLevel = point.y;
chart
.series()
.points(function (p) {
return p.y === point.y;
})
.options({ selected: true });
}
function pointMouseOver() {
var point = this,
chart = point.chart;
// Highlight all points at this level using the muted state
chart
.series()
.points(function (p) {
return p.y === point.y;
})
.options({ muted: true });
}
function pointMouseOut() {
var point = this,
chart = this.chart;
// Highlight all points at this level
chart
.series()
.points()
.options({ muted: false });
return false;
}
function reset(c) {
// reset selected and muted styling
c.series()
.points()
.options({ selected: false, muted: 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.
Chart.TempDirectory = "temp"
Chart.Debug = True
Chart.JS.Enabled = True
Chart.JS.ControlID = "jsChart"
Chart.Size = "500x650"
Chart.TitleBox.Label.Text = "Find roots of a quadratic equation ax<sup>2</sup>+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 = 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 = 2
Chart.DefaultSeries.Line.Color = ColorTranslator.FromHtml("#009688")
' Node styling
' Initial outline width is 0.
Chart.DefaultElement.Outline.Width = 2
Chart.DefaultElement.Outline.Color = ColorTranslator.FromHtml("#009688")
Chart.DefaultElement.Annotation.Padding = 9
Chart.DefaultElement.Annotation.Label.Width = 120
Chart.DefaultElement.Annotation.Line.Width = 2
Chart.DefaultElement.Annotation.Line.Color = Color.Red
Dim mySC As SeriesCollection = getData()
' Tweak the decision labels.
mySC(0).Elements(6).Annotation.Label.Offset = New Point(-5, -5)
mySC(0).Elements(10).Annotation.Label.Offset = New Point(-5, -5)
' *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.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 = "ax<sup>2</sup>+bx+c=0"
el1.Color = ColorTranslator.FromHtml("white")
el1.CustomAttributes("element") = "process"
styleElement(el1, "process")
ser1.Elements.Add(el1)
Dim el2 As Element = New Element()
el2.Name = "a = 0 or b = 0?"
el2.Color = ColorTranslator.FromHtml("#009688")
el2.Parent = el1
el2.CustomAttributes("element") = "decision"
styleElement(el2, "process")
ser1.Elements.Add(el2)
Dim el3 As Element = New Element()
el3.Name = "Yes"
el3.Color = ColorTranslator.FromHtml("white")
el3.Parent = el2
el3.CustomAttributes("element") = "option"
styleElement(el3, "option")
ser1.Elements.Add(el3)
Dim el4 As Element = New Element()
el4.Name = "No"
el4.Color = ColorTranslator.FromHtml("white")
el4.Parent = el2
el4.CustomAttributes("element") = "option"
styleElement(el4, "option")
ser1.Elements.Add(el4)
Dim el5 As Element = New Element()
el5.Name = "Please enter non-zero values"
el5.Color = ColorTranslator.FromHtml("white")
el5.Parent = el3
el5.CustomAttributes("element") = "process"
styleElement(el5, "process")
ser1.Elements.Add(el5)
Dim el6 As Element = New Element()
el6.Name = "Calculate discriminant<br>D = b<sup>2</sup> - 4ac"
el6.Color = ColorTranslator.FromHtml("white")
el6.Parent = el4
el6.CustomAttributes("element") = "process"
styleElement(el6, "process")
ser1.Elements.Add(el6)
Dim el7 As Element = New Element()
el7.Name = "D > 0?"
el7.Color = ColorTranslator.FromHtml("#009688")
el7.Parent = el6
el7.CustomAttributes("element") = "decision"
styleElement(el7, "decision")
ser1.Elements.Add(el7)
Dim el8 As Element = New Element()
el8.Name = "Yes"
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 = "No"
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 = "x<sub>1</sub> = (-b + vD)/2a<br>x<sub>2</sub> = (-b - vD)/2a"
el10.Color = ColorTranslator.FromHtml("white")
el10.Parent = el8
el10.CustomAttributes("element") = "process"
styleElement(el10, "process")
ser1.Elements.Add(el10)
Dim el11 As Element = New Element()
el11.Name = "D = 0?"
el11.Color = ColorTranslator.FromHtml("#009688")
el11.Parent = el9
el11.CustomAttributes("element") = "decision"
styleElement(el11, "decision")
ser1.Elements.Add(el11)
Dim el12 As Element = New Element()
el12.Name = "Yes"
el12.Color = ColorTranslator.FromHtml("white")
el12.Parent = el11
el12.CustomAttributes("element") = "option"
styleElement(el12, "option")
ser1.Elements.Add(el12)
Dim el13 As Element = New Element()
el13.Name = "No"
el13.Color = ColorTranslator.FromHtml("white")
el13.Parent = el11
el13.CustomAttributes("element") = "option"
styleElement(el13, "option")
ser1.Elements.Add(el13)
Dim el14 As Element = New Element()
el14.Name = "x<sub>1</sub> = x<sub>2</sub> = -b/2a"
el14.Color = ColorTranslator.FromHtml("white")
el14.Parent = el12
el14.CustomAttributes("element") = "process"
styleElement(el14, "process")
ser1.Elements.Add(el14)
Dim el15 As Element = New Element()
el15.Name = "There are no real roots"
el15.Color = ColorTranslator.FromHtml("white")
el15.Parent = el13
el15.CustomAttributes("element") = "process"
styleElement(el15, "process")
ser1.Elements.Add(el15)
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 palette = ['#4285F4', '#fE4C14', '#DBCB18', '#15AC20', '#D150B1'];
function myCallback(chart) {
chart.series().points().each(function (p) {
/**
* Improve performance by setting second argument (updateOptions) to false and prevent chart
* redraw on every point options update.
*/
p.options({ outline_color: palette[p.y] }, false);
});
/**
* Update the chart fully and only once.
*/
chart.redraw();
}
var selectedLevel = null;
function pointClick() {
var point = this,
chart = point.chart;
reset(chart);
// Click again to unselect level.
if (selectedLevel === point.y) {
selectedLevel = null;
return;
}
selectedLevel = point.y;
chart
.series()
.points(function (p) {
return p.y === point.y;
})
.options({ selected: true });
}
function pointMouseOver() {
var point = this,
chart = point.chart;
// Highlight all points at this level using the muted state
chart
.series()
.points(function (p) {
return p.y === point.y;
})
.options({ muted: true });
}
function pointMouseOut() {
var point = this,
chart = this.chart;
// Highlight all points at this level
chart
.series()
.points()
.options({ muted: false });
return false;
}
function reset(c) {
// reset selected and muted styling
c.series()
.points()
.options({ selected: false, muted: false });
}
</script>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server" />
</div>
</body>
</html>
- Sample FilenameJsFlowCustomStyling.aspx
- Version10.5
- Uses DatabaseNo