Gallery
PreviousJS Gantt Chart Icons
<%@ 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 sets icons in gantt data point labels indicating task completion.
// 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;
Chart.Palette = new Color[] { ColorTranslator.FromHtml("#9adcfa"), ColorTranslator.FromHtml("#99e4ed"), ColorTranslator.FromHtml("#d0b6fa") };
// Set the size
Chart.Width = 800;
Chart.Height = 440;
Chart.JS.Enabled = true;
// Set the temp directory
Chart.TempDirectory = "temp";
// Debug mode. ( Will show generated errors if any )
Chart.Debug = false;
Chart.TitleBox.Label.Text = "js:makeTitle()";
Chart.LegendBox.Template = "%icon %name";
Chart.LegendBox.Position = LegendBoxPosition.ChartArea;
Chart.LegendBox.Orientation = dotnetCHARTING.Orientation.TopRight;
Chart.DefaultElement.ToolTip = "<b>%name</b> <br/>%low - %high<br/>{days(%high-%low)} days";
Chart.DefaultElement.ShowValue = true;
SmartLabel sl = new SmartLabel();
sl.Text ="js:function(p){return pointLabelText(p);}";
sl.Padding = 3;
sl.PieLabelMode = PieLabelMode.Outside;
Chart.DefaultElement.SmartLabel = sl;
//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(2020, 4, 20)));
// *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(2020, 3, 15);
e1.YDateTimeStart = new DateTime(2020, 1, 1);
e1.Name = "Initiate Project";
s1.Elements.Add(e1);
e1 = new Element();
e1.YDateTime = new DateTime(2020, 1, 25);
e1.YDateTimeStart = new DateTime(2020, 1, 1);
e1.Name = "Project Assignments";
s1.Elements.Add(e1);
e1 = new Element();
e1.YDateTime = new DateTime(2020, 2, 15);
e1.YDateTimeStart = new DateTime(2020, 1, 25);
e1.Name = "Outlines/Scope";
s1.Elements.Add(e1);
e1 = new Element();
e1.YDateTime = new DateTime(2020, 3, 15);
e1.YDateTimeStart = new DateTime(2020, 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(2020, 5, 20);
e1.YDateTimeStart = new DateTime(2020, 3, 15);
e1.Name = "Plan Project";
s1.Elements.Add(e1);
e1 = new Element();
e1.YDateTime = new DateTime(2020, 4, 12);
e1.YDateTimeStart = new DateTime(2020, 3, 15);
e1.Name = "Determine Process";
s1.Elements.Add(e1);
e1 = new Element();
e1.YDateTime = new DateTime(2020, 5, 8);
e1.YDateTimeStart = new DateTime(2020, 4, 12);
e1.Name = "Design Layouts";
s1.Elements.Add(e1);
e1 = new Element();
e1.YDateTime = new DateTime(2020, 5, 20);
e1.YDateTimeStart = new DateTime(2020, 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(2020, 7, 28);
e1.YDateTimeStart = new DateTime(2020, 5, 20);
e1.Name = "Implement Project";
s1.Elements.Add(e1);
e1 = new Element();
e1.YDateTime = new DateTime(2020, 6, 10);
e1.YDateTimeStart = new DateTime(2020, 5, 20);
e1.Name = "Designs";
s1.Elements.Add(e1);
e1 = new Element();
e1.YDateTime = new DateTime(2020, 6, 15);
e1.YDateTimeStart = new DateTime(2020, 6, 10);
e1.Name = "Structures";
s1.Elements.Add(e1);
e1 = new Element();
e1.YDateTime = new DateTime(2020, 7, 28);
e1.YDateTimeStart = new DateTime(2020, 6, 15);
e1.Name = "D&S Integration";
s1.Elements.Add(e1);
SC.Add(s1);
//s1 = new Series();
//s1.Name = "Plan Project";
//s1.Type = SeriesType.Marker;
//s1.DefaultElement.Marker.Type = ElementMarkerType.Diamond;
//s1.DefaultElement.ToolTip = "%name Meeting Milestone";
//e1 = new Element();
//e1.YDateTime = new DateTime(2020, 5, 20);
//e1.Name = "Plan Project";
//s1.Elements.Add(e1);
//e1 = new Element();
//e1.YDateTime = new DateTime(2020, 7, 28);
//e1.Name = "Implement Project";
//s1.Elements.Add(e1);
//SC.Add(s1);
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>
<script type="text/javascript">
function makeTitle() { return 'Project Beta from %min to %max'; }
/**
* Chooses the data point label icon based on the thresholdDate
* @param point
* @returns {*}
*/
var currentDate = '4/20/2020';
var thresholdDate = norm(currentDate);
function pointLabelText(point) {
debugger;
var pY = point.options('y');
var pRange = pY.map(norm);
if (thresholdDate > pRange[1]) {
return getIconText('material/navigation/check', '#66BB6A', 16);
} else if (thresholdDate > pRange[0]) {
return getIconText('material/notification/sync', '#FDD835', 20);
}
return getIconText('material/navigation/close', '#FF5252', 16);
}
function norm(d) {
return new Date(d).getTime();
}
function getIconText(name, color, size) {
return '<icon name=' + name + ' size=' + size + ' fill=' + color + '>';
}
</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 sets icons in gantt data point labels indicating task completion.
' 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
Chart.Palette = New Color() { ColorTranslator.FromHtml("#9adcfa"), ColorTranslator.FromHtml("#99e4ed"), ColorTranslator.FromHtml("#d0b6fa") }
' Set the size
Chart.Width = 800
Chart.Height = 440
Chart.JS.Enabled = True
' Set the temp directory
Chart.TempDirectory = "temp"
' Debug mode. ( Will show generated errors if any )
Chart.Debug = False
Chart.TitleBox.Label.Text = "js:makeTitle()"
Chart.LegendBox.Template = "%icon %name"
Chart.LegendBox.Position = LegendBoxPosition.ChartArea
Chart.LegendBox.Orientation = dotnetCHARTING.Orientation.TopRight
Chart.DefaultElement.ToolTip = "<b>%name</b> <br/>%low - %high<br/>{days(%high-%low)} days"
Chart.DefaultElement.ShowValue = True
Dim sl As SmartLabel = New SmartLabel()
sl.Text ="js:function(p){return pointLabelText(p);}"
sl.Padding = 3
sl.PieLabelMode = PieLabelMode.Outside
Chart.DefaultElement.SmartLabel = sl
'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(2020, 4, 20)))
' *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(2020, 3, 15)
e1.YDateTimeStart = New DateTime(2020, 1, 1)
e1.Name = "Initiate Project"
s1.Elements.Add(e1)
e1 = New Element()
e1.YDateTime = New DateTime(2020, 1, 25)
e1.YDateTimeStart = New DateTime(2020, 1, 1)
e1.Name = "Project Assignments"
s1.Elements.Add(e1)
e1 = New Element()
e1.YDateTime = New DateTime(2020, 2, 15)
e1.YDateTimeStart = New DateTime(2020, 1, 25)
e1.Name = "Outlines/Scope"
s1.Elements.Add(e1)
e1 = New Element()
e1.YDateTime = New DateTime(2020, 3, 15)
e1.YDateTimeStart = New DateTime(2020, 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(2020, 5, 20)
e1.YDateTimeStart = New DateTime(2020, 3, 15)
e1.Name = "Plan Project"
s1.Elements.Add(e1)
e1 = New Element()
e1.YDateTime = New DateTime(2020, 4, 12)
e1.YDateTimeStart = New DateTime(2020, 3, 15)
e1.Name = "Determine Process"
s1.Elements.Add(e1)
e1 = New Element()
e1.YDateTime = New DateTime(2020, 5, 8)
e1.YDateTimeStart = New DateTime(2020, 4, 12)
e1.Name = "Design Layouts"
s1.Elements.Add(e1)
e1 = New Element()
e1.YDateTime = New DateTime(2020, 5, 20)
e1.YDateTimeStart = New DateTime(2020, 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(2020, 7, 28)
e1.YDateTimeStart = New DateTime(2020, 5, 20)
e1.Name = "Implement Project"
s1.Elements.Add(e1)
e1 = New Element()
e1.YDateTime = New DateTime(2020, 6, 10)
e1.YDateTimeStart = New DateTime(2020, 5, 20)
e1.Name = "Designs"
s1.Elements.Add(e1)
e1 = New Element()
e1.YDateTime = New DateTime(2020, 6, 15)
e1.YDateTimeStart = New DateTime(2020, 6, 10)
e1.Name = "Structures"
s1.Elements.Add(e1)
e1 = New Element()
e1.YDateTime = New DateTime(2020, 7, 28)
e1.YDateTimeStart = New DateTime(2020, 6, 15)
e1.Name = "D&S Integration"
s1.Elements.Add(e1)
SC.Add(s1)
's1 = new Series();
's1.Name = "Plan Project";
's1.Type = SeriesType.Marker;
's1.DefaultElement.Marker.Type = ElementMarkerType.Diamond;
's1.DefaultElement.ToolTip = "%name Meeting Milestone";
'e1 = new Element();
'e1.YDateTime = new DateTime(2020, 5, 20);
'e1.Name = "Plan Project";
's1.Elements.Add(e1);
'e1 = new Element();
'e1.YDateTime = new DateTime(2020, 7, 28);
'e1.Name = "Implement Project";
's1.Elements.Add(e1);
'SC.Add(s1);
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>
<script type="text/javascript">
function makeTitle() { return 'Project Beta from %min to %max'; }
/**
* Chooses the data point label icon based on the thresholdDate
* @param point
* @returns {*}
*/
var currentDate = '4/20/2020';
var thresholdDate = norm(currentDate);
function pointLabelText(point) {
debugger;
var pY = point.options('y');
var pRange = pY.map(norm);
if (thresholdDate > pRange[1]) {
return getIconText('material/navigation/check', '#66BB6A', 16);
} else if (thresholdDate > pRange[0]) {
return getIconText('material/notification/sync', '#FDD835', 20);
}
return getIconText('material/navigation/close', '#FF5252', 16);
}
function norm(d) {
return new Date(d).getTime();
}
function getIconText(name, color, size) {
return '<icon name=' + name + ' size=' + size + ' fill=' + color + '>';
}
</script>
</head>
<body>
<div align="center">
<dotnet:Chart id="Chart" runat="server"/>
</div>
</body>
</html>
- Sample FilenameJsGanttChartIcons.aspx
- Version10.3
- Uses DatabaseNo