Gallery
PreviousJS Gantt Milestones
<%@ 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 milestones.
// 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.Position = LegendBoxPosition.BottomMiddle;
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, 3, 1), new DateTime(2017, 3, 30)));
// *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();
// 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);
s1 = new Series();
s1.Name = "Board Review";
s1.Type = SeriesType.Marker;
s1.DefaultElement.Marker.Type = ElementMarkerType.Diamond;
s1.DefaultElement.ToolTip = "%name Meeting Milestone";
e1 = new Element();
e1.YDateTime = new DateTime(2017, 5, 20);
e1.Name = "Plan Project";
s1.Elements.Add(e1);
e1 = new Element();
e1.YDateTime = new DateTime(2017, 7, 28);
e1.Name = "Implement Project";
s1.Elements.Add(e1);
SC.Add(s1);
SC.Add(getSlackSeriesOverlay(SC,new DateTime(2017,3,1), new DateTime(2017,3,30)));
return SC;
}
Series getSlackSeriesOverlay(SeriesCollection sc, DateTime d1, DateTime d2)
{
Series res = new Series();
res.DefaultElement.Color = Color.White;
res.Name = "Slack";
foreach (Series s in sc)
{
if ((SeriesType)s.Type != SeriesType.Marker)
{
foreach (Element e in s.Elements)
{
if (d2 > e.YDateTimeStart && d1 < e.YDateTime)
{
DateTime pd1 = e.YDateTimeStart;
DateTime pd2 = e.YDateTime;
if (d1 > e.YDateTimeStart)
{
pd1 = d1;
}
if (d2 < e.YDateTime)
{
pd2 = d2;
}
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 milestones.
' 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.Position = LegendBoxPosition.BottomMiddle
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, 3, 1), New DateTime(2017, 3, 30)))
' *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()
' 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)
s1 = New Series()
s1.Name = "Board Review"
s1.Type = SeriesType.Marker
s1.DefaultElement.Marker.Type = ElementMarkerType.Diamond
s1.DefaultElement.ToolTip = "%name Meeting Milestone"
e1 = New Element()
e1.YDateTime = New DateTime(2017, 5, 20)
e1.Name = "Plan Project"
s1.Elements.Add(e1)
e1 = New Element()
e1.YDateTime = New DateTime(2017, 7, 28)
e1.Name = "Implement Project"
s1.Elements.Add(e1)
SC.Add(s1)
SC.Add(getSlackSeriesOverlay(SC,New DateTime(2017,3,1), New DateTime(2017,3,30)))
Return SC
End Function
Function getSlackSeriesOverlay(ByVal sc As SeriesCollection, ByVal d1 As DateTime, ByVal d2 As DateTime) As Series
Dim res As Series = New Series()
res.DefaultElement.Color = Color.White
res.Name = "Slack"
For Each s As Series In sc
If CType(s.Type, SeriesType) <> SeriesType.Marker Then
For Each e As Element In s.Elements
If d2 > e.YDateTimeStart AndAlso d1 < e.YDateTime Then
Dim pd1 As DateTime = e.YDateTimeStart
Dim pd2 As DateTime = e.YDateTime
If d1 > e.YDateTimeStart Then
pd1 = d1
End If
If d2 < e.YDateTime Then
pd2 = d2
End If
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 FilenameJsGanttMilestones.aspx
- Version8.4
- Uses DatabaseNo