Gallery

Gallery > Gantt Charts

JS Gantt Complex

Demonstrates a Gantt chart with JSCharting using unclustered bars, and different bar widths.

Download Show C# Code Show VB Code

<%@ 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

JS Charting

Gallery

JS Gantt Complex