Gallery
JS Gantt Complex
<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING"%>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Drawing.Drawing2D" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script runat="server">
void Page_Load(Object sender,EventArgs e)
{
// Demonstrates a Gantt chart with JSCharting using unclustered bars, and different bar widths.
// A typical gantt chart setup.
// Set the chart type
Chart.Type = ChartType.ComboHorizontal;
//With image charts, this only works with 3D, however, with JSC it works in both modes.In effect, this causes bars to overlap.
Chart.YAxis.ClusterColumns = false;
Chart.DefaultSeries.Type = SeriesType.Column;
// Set the size
Chart.Width = 580;
Chart.Height = 350;
Chart.JS.Enabled = true;
// Set the temp directory
Chart.TempDirectory = "temp";
// Debug mode. ( Will show generated errors if any )
Chart.Debug = false;
Chart.Title = "Project Alpha";
Chart.LegendBox.Visible = false;
Chart.DefaultElement.ToolTip = "<b>%name</b> <br/>%low - %high<br/>{days(%high-%low)} days";
//Override specific existing ticks with bolder label styling
AxisTick at = new AxisTick("Initiate Project");
at.Label.Font = new Font("Arial", 11,FontStyle.Bold);
Chart.YAxis.ExtraTicks.Add(at);
at = new AxisTick("Plan Project");
at.Label.Font = new Font("Arial", 11, FontStyle.Bold);
Chart.YAxis.ExtraTicks.Add(at);
at = new AxisTick("Implement Project");
at.Label.Font = new Font("Arial", 11, FontStyle.Bold);
Chart.YAxis.ExtraTicks.Add(at);
// Add some axis markers.
Chart.XAxis.Markers.Add(new AxisMarker("Now", Color.Red, new DateTime(2017, 4, 20)));
Chart.XAxis.Markers.Add(new AxisMarker("Vacation", Color.Orange, new DateTime(2017, 5, 12), new DateTime(2017, 6, 1)));
// *DYNAMIC DATA NOTE*
// This sample uses random data to populate the chart. To populate
// a chart with database data see the following resources:
// - Classic samples folder
// - Help File > Data Tutorials
// - Sample: features/DataEngine.aspx
SeriesCollection mySC = getRandomData();
//Dynamically create an overlay series.
Series complete = getCompleteSeriesOverlay(mySC, new DateTime(2017, 4, 20));
mySC.Add(complete);
// Create a new hidden Y Axis (X Axis is vertical charts) to host a static
// column width for the complete series that differs from the default that other series use.
Axis yAx2 = Chart.YAxis.Calculate("");// new Axis();
yAx2.Clear();
complete.YAxis = yAx2;
yAx2.ClearValues = true;
yAx2.StaticColumnWidth= 6;
Chart.AxisCollection.Add(yAx2);
// Add the random data.
Chart.SeriesCollection.Add(mySC);
}
SeriesCollection getRandomData()
{
SeriesCollection SC = new SeriesCollection();
Random myR = new Random();
Series s1 = new Series();
s1.Name = "Initiate Project";
Element e1 = new Element();
e1.Outline.Width = 3;
e1.YDateTime = new DateTime(2017, 3, 15);
e1.YDateTimeStart = new DateTime(2017, 1, 1);
e1.Name = "Initiate Project";
s1.Elements.Add(e1);
e1 = new Element();
e1.YDateTime = new DateTime(2017, 1, 25);
e1.YDateTimeStart = new DateTime(2017, 1, 1);
e1.Name = "Project Assignments";
s1.Elements.Add(e1);
e1 = new Element();
e1.YDateTime = new DateTime(2017, 2, 15);
e1.YDateTimeStart = new DateTime(2017, 1, 25);
e1.Name = "Outlines/Scope";
s1.Elements.Add(e1);
e1 = new Element();
e1.YDateTime = new DateTime(2017, 3, 15);
e1.YDateTimeStart = new DateTime(2017, 2, 15);
e1.Name = "Business Alignment";
s1.Elements.Add(e1);
SC.Add(s1);
s1 = new Series();
s1.Name = "Plan Project";
e1 = new Element();
e1.Outline.Width = 3;
e1.YDateTime = new DateTime(2017, 5, 20);
e1.YDateTimeStart = new DateTime(2017, 3, 15);
e1.Name = "Plan Project";
s1.Elements.Add(e1);
e1 = new Element();
e1.YDateTime = new DateTime(2017, 4, 12);
e1.YDateTimeStart = new DateTime(2017, 3, 15);
e1.Name = "Determine Process";
s1.Elements.Add(e1);
e1 = new Element();
e1.YDateTime = new DateTime(2017, 5, 8);
e1.YDateTimeStart = new DateTime(2017, 4, 12);
e1.Name = "Design Layouts";
s1.Elements.Add(e1);
e1 = new Element();
e1.YDateTime = new DateTime(2017, 5, 20);
e1.YDateTimeStart = new DateTime(2017, 5, 8);
e1.Name = "Design Structure";
s1.Elements.Add(e1);
SC.Add(s1);
s1 = new Series();
s1.Name = "Implement Project";
e1 = new Element();
e1.Outline.Width = 3;
e1.YDateTime = new DateTime(2017, 7, 28);
e1.YDateTimeStart = new DateTime(2017, 5, 20);
e1.Name = "Implement Project";
s1.Elements.Add(e1);
e1 = new Element();
e1.YDateTime = new DateTime(2017, 6, 10);
e1.YDateTimeStart = new DateTime(2017, 5, 20);
e1.Name = "Designs";
s1.Elements.Add(e1);
e1 = new Element();
e1.YDateTime = new DateTime(2017, 6, 15);
e1.YDateTimeStart = new DateTime(2017, 6, 10);
e1.Name = "Structures";
s1.Elements.Add(e1);
e1 = new Element();
e1.YDateTime = new DateTime(2017, 7, 28);
e1.YDateTimeStart = new DateTime(2017, 6, 15);
e1.Name = "D&S Integration";
s1.Elements.Add(e1);
SC.Add(s1);
return SC;
}
Series getCompleteSeriesOverlay(SeriesCollection sc, DateTime date)
{
Series res = new Series();
res.DefaultElement.Color = Color.White;
res.Name = "Completed";
foreach (Series s in sc)
{
if ((SeriesType)s.Type != SeriesType.Marker)
{
foreach (Element e in s.Elements)
{
DateTime pd1 = e.YDateTimeStart;
DateTime pd2 = e.YDateTime;
if (date > pd1 && date < pd2)
{
Element el = new Element();
el.YDateTimeStart = pd1;
el.YDateTime = date;
el.Name = e.Name;
res.Elements.Add(el);
}
else if(date > pd2){
Element el = new Element();
el.YDateTimeStart = pd1;
el.YDateTime = pd2;
el.Name = e.Name;
res.Elements.Add(el);
}
}
}
}
return res;
}
</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" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script runat="server">
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' Demonstrates a Gantt chart with JSCharting using unclustered bars, and different bar widths.
' A typical gantt chart setup.
' Set the chart type
Chart.Type = ChartType.ComboHorizontal
'With image charts, this only works with 3D, however, with JSC it works in both modes.In effect, this causes bars to overlap.
Chart.YAxis.ClusterColumns = False
Chart.DefaultSeries.Type = SeriesType.Column
' Set the size
Chart.Width = 580
Chart.Height = 350
Chart.JS.Enabled = True
' Set the temp directory
Chart.TempDirectory = "temp"
' Debug mode. ( Will show generated errors if any )
Chart.Debug = False
Chart.Title = "Project Alpha"
Chart.LegendBox.Visible = False
Chart.DefaultElement.ToolTip = "<b>%name</b> <br/>%low - %high<br/>{days(%high-%low)} days"
'Override specific existing ticks with bolder label styling
Dim at As AxisTick = New AxisTick("Initiate Project")
at.Label.Font = New Font("Arial", 11,FontStyle.Bold)
Chart.YAxis.ExtraTicks.Add(at)
at = New AxisTick("Plan Project")
at.Label.Font = New Font("Arial", 11, FontStyle.Bold)
Chart.YAxis.ExtraTicks.Add(at)
at = New AxisTick("Implement Project")
at.Label.Font = New Font("Arial", 11, FontStyle.Bold)
Chart.YAxis.ExtraTicks.Add(at)
' Add some axis markers.
Chart.XAxis.Markers.Add(New AxisMarker("Now", Color.Red, New DateTime(2017, 4, 20)))
Chart.XAxis.Markers.Add(New AxisMarker("Vacation", Color.Orange, New DateTime(2017, 5, 12), New DateTime(2017, 6, 1)))
' *DYNAMIC DATA NOTE*
' This sample uses random data to populate the chart. To populate
' a chart with database data see the following resources:
' - Classic samples folder
' - Help File > Data Tutorials
' - Sample: features/DataEngine.aspx
Dim mySC As SeriesCollection = getRandomData()
'Dynamically create an overlay series.
Dim complete As Series = getCompleteSeriesOverlay(mySC, New DateTime(2017, 4, 20))
mySC.Add(complete)
' Create a new hidden Y Axis (X Axis is vertical charts) to host a static
' column width for the complete series that differs from the default that other series use.
Dim yAx2 As Axis = Chart.YAxis.Calculate("") ' new Axis();
yAx2.Clear()
complete.YAxis = yAx2
yAx2.ClearValues = True
yAx2.StaticColumnWidth= 6
Chart.AxisCollection.Add(yAx2)
' Add the random data.
Chart.SeriesCollection.Add(mySC)
End Sub
Function getRandomData() As SeriesCollection
Dim SC As SeriesCollection = New SeriesCollection()
Dim myR As Random = New Random()
Dim s1 As Series = New Series()
s1.Name = "Initiate Project"
Dim e1 As Element = New Element()
e1.Outline.Width = 3
e1.YDateTime = New DateTime(2017, 3, 15)
e1.YDateTimeStart = New DateTime(2017, 1, 1)
e1.Name = "Initiate Project"
s1.Elements.Add(e1)
e1 = New Element()
e1.YDateTime = New DateTime(2017, 1, 25)
e1.YDateTimeStart = New DateTime(2017, 1, 1)
e1.Name = "Project Assignments"
s1.Elements.Add(e1)
e1 = New Element()
e1.YDateTime = New DateTime(2017, 2, 15)
e1.YDateTimeStart = New DateTime(2017, 1, 25)
e1.Name = "Outlines/Scope"
s1.Elements.Add(e1)
e1 = New Element()
e1.YDateTime = New DateTime(2017, 3, 15)
e1.YDateTimeStart = New DateTime(2017, 2, 15)
e1.Name = "Business Alignment"
s1.Elements.Add(e1)
SC.Add(s1)
s1 = New Series()
s1.Name = "Plan Project"
e1 = New Element()
e1.Outline.Width = 3
e1.YDateTime = New DateTime(2017, 5, 20)
e1.YDateTimeStart = New DateTime(2017, 3, 15)
e1.Name = "Plan Project"
s1.Elements.Add(e1)
e1 = New Element()
e1.YDateTime = New DateTime(2017, 4, 12)
e1.YDateTimeStart = New DateTime(2017, 3, 15)
e1.Name = "Determine Process"
s1.Elements.Add(e1)
e1 = New Element()
e1.YDateTime = New DateTime(2017, 5, 8)
e1.YDateTimeStart = New DateTime(2017, 4, 12)
e1.Name = "Design Layouts"
s1.Elements.Add(e1)
e1 = New Element()
e1.YDateTime = New DateTime(2017, 5, 20)
e1.YDateTimeStart = New DateTime(2017, 5, 8)
e1.Name = "Design Structure"
s1.Elements.Add(e1)
SC.Add(s1)
s1 = New Series()
s1.Name = "Implement Project"
e1 = New Element()
e1.Outline.Width = 3
e1.YDateTime = New DateTime(2017, 7, 28)
e1.YDateTimeStart = New DateTime(2017, 5, 20)
e1.Name = "Implement Project"
s1.Elements.Add(e1)
e1 = New Element()
e1.YDateTime = New DateTime(2017, 6, 10)
e1.YDateTimeStart = New DateTime(2017, 5, 20)
e1.Name = "Designs"
s1.Elements.Add(e1)
e1 = New Element()
e1.YDateTime = New DateTime(2017, 6, 15)
e1.YDateTimeStart = New DateTime(2017, 6, 10)
e1.Name = "Structures"
s1.Elements.Add(e1)
e1 = New Element()
e1.YDateTime = New DateTime(2017, 7, 28)
e1.YDateTimeStart = New DateTime(2017, 6, 15)
e1.Name = "D&S Integration"
s1.Elements.Add(e1)
SC.Add(s1)
Return SC
End Function
Function getCompleteSeriesOverlay(ByVal sc As SeriesCollection, ByVal [date] As DateTime) As Series
Dim res As Series = New Series()
res.DefaultElement.Color = Color.White
res.Name = "Completed"
For Each s As Series In sc
If CType(s.Type, SeriesType) <> SeriesType.Marker Then
For Each e As Element In s.Elements
Dim pd1 As DateTime = e.YDateTimeStart
Dim pd2 As DateTime = e.YDateTime
If [date] > pd1 AndAlso [date] < pd2 Then
Dim el As Element = New Element()
el.YDateTimeStart = pd1
el.YDateTime = [date]
el.Name = e.Name
res.Elements.Add(el)
ElseIf [date] > pd2 Then
Dim el As Element = New Element()
el.YDateTimeStart = pd1
el.YDateTime = pd2
el.Name = e.Name
res.Elements.Add(el)
End If
Next e
End If
Next s
Return res
End Function
</script>
</head>
<body>
<div align="center">
<dotnet:Chart id="Chart" runat="server"/>
</div>
</body>
</html>
- Sample FilenameJsGanttComplex.aspx
- Version8.4
- Uses DatabaseNo