Gallery

Gallery > Gantt Charts

JS Gantt Summary

Demonstrates a Gantt chart master detail Summary.

Download Show C# Code Show VB Code

<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<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 master detail Summary.
ChartSummary.Type = ChartType.ComboHorizontal;
ChartSummary.DefaultSeries.Type = SeriesType.Column;
ChartSummary.TempDirectory = "temp";
// Set the size
ChartSummary.Width = 840;
ChartSummary.Height = 120;
ChartSummary.Title = "Project Alpha (Click to zoom)";
ChartSummary.LegendBox.Visible = false;

//With image charts, this only works with 3D, however, with JSC it works in both modes.In effect, this causes bars to overlap.
ChartSummary.YAxis.ClusterColumns = false;
ChartSummary.YAxis.Scale = Scale.Time;
ChartSummary.YAxis.ClearValues = true;

ChartSummary.DefaultElement.ToolTip = "<b>%name</b> %low - %high";
ChartSummary.DefaultElement.ShowValue = true;
ChartSummary.DefaultElement.LabelTemplate = "%name <icon name=material/action/zoom-in size=15 verticalAlign=middle>";
ChartSummary.JS.Enabled = true;
ChartSummary.JS.Settings.Add("defaultPoint.events_click", "js:pointClick");

SeriesCollection detailsSeries = getRandomData();
SeriesCollection summarySeries = getSummary(detailsSeries);
// Add the random data.
ChartSummary.SeriesCollection.Add(summarySeries);

//Details chart
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.YAxis.ClearValues = true;
// Set the size
Chart.Width = 840;
Chart.Height = 480;
// Set the temp directory
Chart.TempDirectory = "temp";
// Debug mode. ( Will show generated errors if any )
Chart.Debug = false;
Chart.JS.RenderCallback = "detailsCallback";
Chart.LegendBox.Visible = false;
Chart.JS.Enabled = true;
Chart.DefaultElement.ToolTip = "<b>%name</b> %low - %high";
Chart.DefaultElement.ShowValue = true;
Chart.DefaultElement.LabelTemplate = "%name";

// *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(false);
// Add the random data.
Chart.SeriesCollection.Add(detailsSeries);
}
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;

}
SeriesCollection getSummary(SeriesCollection sc)
{
SeriesCollection scSummary = new SeriesCollection();
Series s1 = new Series();
s1.Name = "Ali";
for (int i = 0; i < sc.Count; i++)
{

Element e1 = new Element();
e1.XValue = 1;//trick to stack for summary chart
e1.Outline.Width = 3;
e1.YDateTime = sc[i].Elements[0].YDateTime;
e1.YDateTimeStart = sc[i].Elements[0].YDateTimeStart;
e1.Name = sc[i].Elements[0].Name;
s1.Elements.Add(e1);

}
s1.PaletteName = Palette.Default;
scSummary.Add(s1);
return scSummary;
}
</script>
<script type="text/javascript">
var zoomedSeries, detailsChart;
function detailsCallback(details) {
detailsChart = details;
}
function pointClick() {
var point = this, sName = point.tokenValue('%name');
if (zoomedSeries === sName) {
detailsChart.series().options({ visible: true });
zoomedSeries = '';
} else {
detailsChart.series().each(function (s) {s.options({ visible: s.options('name') === sName }) })
zoomedSeries = sName;
}
}
</script>
</head>
<body>
<div align="center">
<dotnet:Chart ID="ChartSummary" runat="server" />
<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" %>
<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 master detail Summary.
ChartSummary.Type = ChartType.ComboHorizontal
ChartSummary.DefaultSeries.Type = SeriesType.Column
ChartSummary.TempDirectory = "temp"
' Set the size
ChartSummary.Width = 840
ChartSummary.Height = 120
ChartSummary.Title = "Project Alpha (Click to zoom)"
ChartSummary.LegendBox.Visible = False

'With image charts, this only works with 3D, however, with JSC it works in both modes.In effect, this causes bars to overlap.
ChartSummary.YAxis.ClusterColumns = False
ChartSummary.YAxis.Scale = Scale.Time
ChartSummary.YAxis.ClearValues = True

ChartSummary.DefaultElement.ToolTip = "<b>%name</b> %low - %high"
ChartSummary.DefaultElement.ShowValue = True
ChartSummary.DefaultElement.LabelTemplate = "%name <icon name=material/action/zoom-in size=15 verticalAlign=middle>"
ChartSummary.JS.Enabled = True
ChartSummary.JS.Settings.Add("defaultPoint.events_click", "js:pointClick")

Dim detailsSeries As SeriesCollection = getRandomData()
Dim summarySeries As SeriesCollection = getSummary(detailsSeries)
' Add the random data.
ChartSummary.SeriesCollection.Add(summarySeries)

'Details chart
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.YAxis.ClearValues = True
' Set the size
Chart.Width = 840
Chart.Height = 480
' Set the temp directory
Chart.TempDirectory = "temp"
' Debug mode. ( Will show generated errors if any )
Chart.Debug = False
Chart.JS.RenderCallback = "detailsCallback"
Chart.LegendBox.Visible = False
Chart.JS.Enabled = True
Chart.DefaultElement.ToolTip = "<b>%name</b> %low - %high"
Chart.DefaultElement.ShowValue = True
Chart.DefaultElement.LabelTemplate = "%name"

' *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(false);
' Add the random data.
Chart.SeriesCollection.Add(detailsSeries)
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 getSummary(ByVal sc As SeriesCollection) As SeriesCollection
Dim scSummary As SeriesCollection = New SeriesCollection()
Dim s1 As Series = New Series()
s1.Name = "Ali"
For i As Integer = 0 To sc.Count - 1

Dim e1 As Element = New Element()
e1.XValue = 1 'trick to stack for summary chart
e1.Outline.Width = 3
e1.YDateTime = sc(i).Elements(0).YDateTime
e1.YDateTimeStart = sc(i).Elements(0).YDateTimeStart
e1.Name = sc(i).Elements(0).Name
s1.Elements.Add(e1)

Next i
s1.PaletteName = Palette.Default
scSummary.Add(s1)
Return scSummary
End Function
</script>
<script type="text/javascript">
var zoomedSeries, detailsChart;
function detailsCallback(details) {
detailsChart = details;
}
function pointClick() {
var point = this, sName = point.tokenValue('%name');
if (zoomedSeries === sName) {
detailsChart.series().options({ visible: true });
zoomedSeries = '';
} else {
detailsChart.series().each(function (s) {s.options({ visible: s.options('name') === sName }) })
zoomedSeries = sName;
}
}
</script>
</head>
<body>
<div align="center">
<dotnet:Chart ID="ChartSummary" runat="server" />
<dotnet:Chart ID="Chart" runat="server" />
</div>
</body>
</html>

Sample FilenameJsGanttSummary.aspx
Version9.3
Uses DatabaseNo

JS Charting

Gallery

JS Gantt Summary