Gallery
PreviousJS Gantt Axis Details
<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING"%>
<%@ Import Namespace="System.Drawing" %>
<%@ Outputcache Duration = "1000" Varybyparam = "none"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script runat="server">
void Page_Load(Object sender,EventArgs e)
{
// Demonstrates Advanced Gantt chart with descriptive axis tick label columns.
// A typical gantt chart setup
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.YAxis.Scale = Scale.Time;
Chart.YAxis.ScaleRange = new ScaleRange(new DateTime(2016, 12, 31), new DateTime(2017, 7, 29));
Chart.DefaultSeries.Type = SeriesType.Column;
Chart.PaletteName = Palette.FiveColor46;
// Set the size
Chart.Width = 800;
Chart.Height = 400;
Chart.TitleBox.ClearColors();
Chart.TitleBox.Position = TitleBoxPosition.Center;
Chart.TitleBox.Label.Text = "Project Beta from %low to %high";
Chart.ChartArea.ClearColors();
Chart.JS.Enabled = true;
Chart.JS.ControlID = "myJSC";
// Set the temp directory
Chart.TempDirectory = "temp";
// Debug mode. ( Will show generated errors if any )
Chart.Debug = false;
Chart.LegendBox.Orientation = dotnetCHARTING.Orientation.BottomLeft;
Chart.LegendBox.Position = LegendBoxPosition.ChartArea;
Chart.LegendBox.Template = "%icon %name";
Chart.DefaultElement.ToolTip = "<b>%name</b> <br/>%low - %high<br/>{days(%high-%low)} days";
// 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();
// Add the random data.
Chart.SeriesCollection.Add(mySC);
}
SeriesCollection getRandomData()
{
SeriesCollection SC = new SeriesCollection();
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;
}
</script>
</head>
<body>
<div align="center">
<dotnet:Chart id="Chart" runat="server"/>
</div>
<script type="text/javascript">
setInterval(function () {
var chart = myJSC;
chart.axes('x').options({ defaultTick_label_text: tickLabelText }, { animation: false });
chart.series(0).points(0).options({ hatch_style: 'light-downward-diagonal' });
chart.series(1).points(0).options({ hatch_style: 'light-downward-diagonal' });
chart.series(2).points(0).options({ hatch_style: 'light-downward-diagonal' });
function tickLabelText(val) {
var ticks = [];
if (val == 0 || val == 4 || val == 8) {
ticks.push('<b><span style="width:120px;">' + chart.series().points(val).replaceTokens("%name") + '</span>' + ' ' +
'<span style="width:70px">' + chart.series().points(val).replaceTokens("%low") + '</span>' + ' ' +
'<span style="width:65px">' + chart.series().points(val).replaceTokens("%high") + '</span></b>');
} else {
ticks.push('<span style="width:120px;font-size:10px;"> ' + chart.series().points(val).replaceTokens("%name") + '</span>' + ' ' +
'<span style="width:70px;font-size:10px">' + chart.series().points(val).replaceTokens("%low") + '</span>' + ' ' +
'<span style="width:65px;font-size:10px">' + chart.series().points(val).replaceTokens("%high") + '</span>')
}
return ticks;
}
}, 3000);
</script>
</body>
</html>
<%@ Page Language="vb" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING"%>
<%@ Import Namespace="System.Drawing" %>
<%@ Outputcache Duration = "1000" Varybyparam = "none"%>
<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 Advanced Gantt chart with descriptive axis tick label columns.
' A typical gantt chart setup
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.YAxis.Scale = Scale.Time
Chart.YAxis.ScaleRange = New ScaleRange(New DateTime(2016, 12, 31), New DateTime(2017, 7, 29))
Chart.DefaultSeries.Type = SeriesType.Column
Chart.PaletteName = Palette.FiveColor46
' Set the size
Chart.Width = 800
Chart.Height = 400
Chart.TitleBox.ClearColors()
Chart.TitleBox.Position = TitleBoxPosition.Center
Chart.TitleBox.Label.Text = "Project Beta from %low to %high"
Chart.ChartArea.ClearColors()
Chart.JS.Enabled = True
Chart.JS.ControlID = "myJSC"
' Set the temp directory
Chart.TempDirectory = "temp"
' Debug mode. ( Will show generated errors if any )
Chart.Debug = False
Chart.LegendBox.Orientation = dotnetCHARTING.Orientation.BottomLeft
Chart.LegendBox.Position = LegendBoxPosition.ChartArea
Chart.LegendBox.Template = "%icon %name"
Chart.DefaultElement.ToolTip = "<b>%name</b> <br/>%low - %high<br/>{days(%high-%low)} days"
' 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()
' Add the random data.
Chart.SeriesCollection.Add(mySC)
End Sub
Function getRandomData() As SeriesCollection
Dim SC As SeriesCollection = New SeriesCollection()
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
</script>
</head>
<body>
<div align="center">
<dotnet:Chart id="Chart" runat="server"/>
</div>
<script type="text/javascript">
setInterval(function () {
var chart = myJSC;
chart.axes('x').options({ defaultTick_label_text: tickLabelText }, { animation: false });
chart.series(0).points(0).options({ hatch_style: 'light-downward-diagonal' });
chart.series(1).points(0).options({ hatch_style: 'light-downward-diagonal' });
chart.series(2).points(0).options({ hatch_style: 'light-downward-diagonal' });
function tickLabelText(val) {
var ticks = [];
if (val == 0 || val == 4 || val == 8) {
ticks.push('<b><span style="width:120px;">' + chart.series().points(val).replaceTokens("%name") + '</span>' + ' ' +
'<span style="width:70px">' + chart.series().points(val).replaceTokens("%low") + '</span>' + ' ' +
'<span style="width:65px">' + chart.series().points(val).replaceTokens("%high") + '</span></b>');
} else {
ticks.push('<span style="width:120px;font-size:10px;"> ' + chart.series().points(val).replaceTokens("%name") + '</span>' + ' ' +
'<span style="width:70px;font-size:10px">' + chart.series().points(val).replaceTokens("%low") + '</span>' + ' ' +
'<span style="width:65px;font-size:10px">' + chart.series().points(val).replaceTokens("%high") + '</span>')
}
return ticks;
}
}, 3000);
</script>
</body>
</html>
- Sample FilenameJsGanttAxisDetails.aspx
- Version9.2
- Uses DatabaseNo