Gallery
PreviousJS Gantt Chart Rounded
<%@ 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 full rounded bars and column complete value without a hatch pattern.
// 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.PaletteName = Palette.FiveColor3;
Chart.XAxis.Crosshair = new AxisTick();
// Set the size
Chart.Width = 800;
Chart.Height = 460;
Chart.JS.Enabled = true;
// Set the temp directory
Chart.TempDirectory = "temp";
// Debug mode. ( Will show generated errors if any )
Chart.Debug = false;
Chart.Title = "Film Production from %low to %high";
Chart.LegendBox.Position = LegendBoxPosition.ChartArea;
Chart.LegendBox.Orientation = dotnetCHARTING.Orientation.TopRight;
Chart.LegendBox.Template = "%icon %name";
Chart.JS.Settings.Add("defaultPoint_complete_hatch_style", "none");
Chart.JS.Settings.Add("defaultPoint_complete_fill", "rgba(255,255,255,.4)");
Chart.JS.Settings.Add("defaultPoint_radius", "100");
Chart.DefaultElement.Outline.Width = 0;
Chart.DefaultElement.ToolTip = "<b>%name</b> <br/>%low - %high<br/>{days(%high-%low)} days";
//Chart.YAxis.DefaultTick.Label.Text = "js:function(p){return tickTemplate(p);}";
//Chart.YAxis.DefaultTick.Label.Text = "js:tickTemplate";
//Override specific existing ticks with bolder label styling
AxisTick at = new AxisTick("Pre Production");
at.Label.Font = new Font("Arial", 11,FontStyle.Bold);
Chart.YAxis.ExtraTicks.Add(at);
at = new AxisTick("Production");
at.Label.Font = new Font("Arial", 11, FontStyle.Bold);
Chart.YAxis.ExtraTicks.Add(at);
at = new AxisTick("Post Production");
at.Label.Font = new Font("Arial", 11, FontStyle.Bold);
Chart.YAxis.ExtraTicks.Add(at);
// *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 = "Pre Production";
Element e1 = new Element();
e1.Outline.Width = 3;
e1.YDateTimeStart = new DateTime(2022, 1, 1);
e1.YDateTime = new DateTime(2022,4,15);
e1.Complete =70;
e1.SmartLabel.Text = "70%";
e1.ShowValue = true;
e1.Name = "Pre Production";
s1.Elements.Add(e1);
e1 = new Element();
e1.YDateTimeStart = new DateTime(2022, 1, 1);
e1.YDateTime = new DateTime(2022,2, 18);
e1.Name = "Scenario and script writing";
s1.Elements.Add(e1);
e1 = new Element();
e1.YDateTimeStart = new DateTime(2022, 2, 18);
e1.YDateTime = new DateTime(2022, 3, 10);
e1.Name = "Actors characteristic internalization";
s1.Elements.Add(e1);
e1 = new Element();
e1.YDateTimeStart = new DateTime(2022, 3, 10);
e1.YDateTime = new DateTime(2022, 3, 30);
e1.Name = "Production scheduling and budgeting";
s1.Elements.Add(e1);
e1 = new Element();
e1.YDateTimeStart = new DateTime(2022, 3, 30);
e1.YDateTime = new DateTime(2022, 4, 15);
e1.Name = "Shooting locations surveys and permitting";
s1.Elements.Add(e1);
SC.Add(s1);
s1 = new Series();
s1.Name = "Production";
e1 = new Element();
e1.Outline.Width = 3;
e1.YDateTimeStart = new DateTime(2022, 4, 15);
e1.YDateTime = new DateTime(2022,7, 8);
e1.Complete =5;
e1.SmartLabel.Text = "5%";
e1.ShowValue = true;
e1.Name = "Production";
s1.Elements.Add(e1);
e1 = new Element();
e1.YDateTimeStart = new DateTime(2022, 4, 15);
e1.YDateTime = new DateTime(2022,5, 5);
e1.Name = "Shooting location setting";
s1.Elements.Add(e1);
e1 = new Element();
e1.YDateTimeStart = new DateTime(2022, 5, 5);
e1.YDateTime = new DateTime(2022, 7, 8);
e1.Name = "Directing (actors, cameras, lighting)";
s1.Elements.Add(e1);
e1 = new Element();
e1.YDateTimeStart = new DateTime(2022, 5, 22);
e1.YDateTime = new DateTime(2022, 7, 8);
e1.Name = "Motion picture recording";
s1.Elements.Add(e1);
SC.Add(s1);
s1 = new Series();
s1.Name = "Post Production";
e1 = new Element();
e1.Outline.Width = 3;
e1.YDateTimeStart = new DateTime(2022, 7, 8);
e1.YDateTime = new DateTime(2022, 9, 8);
e1.Complete =0;
e1.SmartLabel.LineAlignment = StringAlignment.Near;
e1.SmartLabel.Text = "0%";
e1.ShowValue = true;
e1.Name = "Post Production";
s1.Elements.Add(e1);
e1 = new Element();
e1.YDateTimeStart = new DateTime(2022, 7, 8);
e1.YDateTime = new DateTime(2022, 8, 31);
e1.Name = "Editing";
s1.Elements.Add(e1);
e1 = new Element();
e1.YDateTimeStart = new DateTime(2022, 8, 31);
e1.YDateTime = new DateTime(2022, 9, 15);
e1.Name = "Music arrangement";
s1.Elements.Add(e1);
e1 = new Element();
e1.YDateTimeStart = new DateTime(2022, 9, 15);
e1.YDateTime = new DateTime(2022, 9,28);
e1.Name = "Rendering";
s1.Elements.Add(e1);
SC.Add(s1);
return SC;
}
</script>
<script type="text/javascript">
// Helper functions to create axisTick label template with two columns of text describing each task.
var columnWidths = [150, 30];
var span = function (val, width) {
return '<span style="width:' + width + 'px;">' + val + '</span>';
};
// Helper functions to create axisTick label template with two columns of text describing each task.
var columnWidths = [150, 30];
var span = function (val, width) {
return '<span style="width:' + width + 'px;">' + val + '</span>';
};
var mapLabels = function (labels) {
return labels
.map(function (v, i) {
return span(v, columnWidths[i]);
})
.join('');
};
var tickTemplate = mapLabels(['%name', '{days(%high-%low):n0}d']);
</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 full rounded bars and column complete value without a hatch pattern.
' 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.PaletteName = Palette.FiveColor3
Chart.XAxis.Crosshair = New AxisTick()
' Set the size
Chart.Width = 800
Chart.Height = 460
Chart.JS.Enabled = True
' Set the temp directory
Chart.TempDirectory = "temp"
' Debug mode. ( Will show generated errors if any )
Chart.Debug = False
Chart.Title = "Film Production from %low to %high"
Chart.LegendBox.Position = LegendBoxPosition.ChartArea
Chart.LegendBox.Orientation = dotnetCHARTING.Orientation.TopRight
Chart.LegendBox.Template = "%icon %name"
Chart.JS.Settings.Add("defaultPoint_complete_hatch_style", "none")
Chart.JS.Settings.Add("defaultPoint_complete_fill", "rgba(255,255,255,.4)")
Chart.JS.Settings.Add("defaultPoint_radius", "100")
Chart.DefaultElement.Outline.Width = 0
Chart.DefaultElement.ToolTip = "<b>%name</b> <br/>%low - %high<br/>{days(%high-%low)} days"
'Chart.YAxis.DefaultTick.Label.Text = "js:function(p){return tickTemplate(p);}";
'Chart.YAxis.DefaultTick.Label.Text = "js:tickTemplate";
'Override specific existing ticks with bolder label styling
Dim at As AxisTick = New AxisTick("Pre Production")
at.Label.Font = New Font("Arial", 11,FontStyle.Bold)
Chart.YAxis.ExtraTicks.Add(at)
at = New AxisTick("Production")
at.Label.Font = New Font("Arial", 11, FontStyle.Bold)
Chart.YAxis.ExtraTicks.Add(at)
at = New AxisTick("Post Production")
at.Label.Font = New Font("Arial", 11, FontStyle.Bold)
Chart.YAxis.ExtraTicks.Add(at)
' *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 = "Pre Production"
Dim e1 As Element = New Element()
e1.Outline.Width = 3
e1.YDateTimeStart = New DateTime(2022, 1, 1)
e1.YDateTime = New DateTime(2022,4,15)
e1.Complete =70
e1.SmartLabel.Text = "70%"
e1.ShowValue = True
e1.Name = "Pre Production"
s1.Elements.Add(e1)
e1 = New Element()
e1.YDateTimeStart = New DateTime(2022, 1, 1)
e1.YDateTime = New DateTime(2022,2, 18)
e1.Name = "Scenario and script writing"
s1.Elements.Add(e1)
e1 = New Element()
e1.YDateTimeStart = New DateTime(2022, 2, 18)
e1.YDateTime = New DateTime(2022, 3, 10)
e1.Name = "Actors characteristic internalization"
s1.Elements.Add(e1)
e1 = New Element()
e1.YDateTimeStart = New DateTime(2022, 3, 10)
e1.YDateTime = New DateTime(2022, 3, 30)
e1.Name = "Production scheduling and budgeting"
s1.Elements.Add(e1)
e1 = New Element()
e1.YDateTimeStart = New DateTime(2022, 3, 30)
e1.YDateTime = New DateTime(2022, 4, 15)
e1.Name = "Shooting locations surveys and permitting"
s1.Elements.Add(e1)
SC.Add(s1)
s1 = New Series()
s1.Name = "Production"
e1 = New Element()
e1.Outline.Width = 3
e1.YDateTimeStart = New DateTime(2022, 4, 15)
e1.YDateTime = New DateTime(2022,7, 8)
e1.Complete =5
e1.SmartLabel.Text = "5%"
e1.ShowValue = True
e1.Name = "Production"
s1.Elements.Add(e1)
e1 = New Element()
e1.YDateTimeStart = New DateTime(2022, 4, 15)
e1.YDateTime = New DateTime(2022,5, 5)
e1.Name = "Shooting location setting"
s1.Elements.Add(e1)
e1 = New Element()
e1.YDateTimeStart = New DateTime(2022, 5, 5)
e1.YDateTime = New DateTime(2022, 7, 8)
e1.Name = "Directing (actors, cameras, lighting)"
s1.Elements.Add(e1)
e1 = New Element()
e1.YDateTimeStart = New DateTime(2022, 5, 22)
e1.YDateTime = New DateTime(2022, 7, 8)
e1.Name = "Motion picture recording"
s1.Elements.Add(e1)
SC.Add(s1)
s1 = New Series()
s1.Name = "Post Production"
e1 = New Element()
e1.Outline.Width = 3
e1.YDateTimeStart = New DateTime(2022, 7, 8)
e1.YDateTime = New DateTime(2022, 9, 8)
e1.Complete =0
e1.SmartLabel.LineAlignment = StringAlignment.Near
e1.SmartLabel.Text = "0%"
e1.ShowValue = True
e1.Name = "Post Production"
s1.Elements.Add(e1)
e1 = New Element()
e1.YDateTimeStart = New DateTime(2022, 7, 8)
e1.YDateTime = New DateTime(2022, 8, 31)
e1.Name = "Editing"
s1.Elements.Add(e1)
e1 = New Element()
e1.YDateTimeStart = New DateTime(2022, 8, 31)
e1.YDateTime = New DateTime(2022, 9, 15)
e1.Name = "Music arrangement"
s1.Elements.Add(e1)
e1 = New Element()
e1.YDateTimeStart = New DateTime(2022, 9, 15)
e1.YDateTime = New DateTime(2022, 9,28)
e1.Name = "Rendering"
s1.Elements.Add(e1)
SC.Add(s1)
Return SC
End Function
</script>
<script type="text/javascript">
// Helper functions to create axisTick label template with two columns of text describing each task.
var columnWidths = [150, 30];
var span = function (val, width) {
return '<span style="width:' + width + 'px;">' + val + '</span>';
};
// Helper functions to create axisTick label template with two columns of text describing each task.
var columnWidths = [150, 30];
var span = function (val, width) {
return '<span style="width:' + width + 'px;">' + val + '</span>';
};
var mapLabels = function (labels) {
return labels
.map(function (v, i) {
return span(v, columnWidths[i]);
})
.join('');
};
var tickTemplate = mapLabels(['%name', '{days(%high-%low):n0}d']);
</script>
</head>
<body>
<div align="center">
<dotnet:Chart id="Chart" runat="server"/>
</div>
</body>
</html>
- Sample FilenameJsGanttChartRounded.aspx
- Version10.3
- Uses DatabaseNo