Multi-Layer Gantt Chart

[Windows Forms - C# version] NetWinCharts\CSharpWinCharts\layergantt.cs

using System;
using ChartDirector;

namespace CSharpChartExplorer
{
    public class layergantt : DemoModule
    {
        //Name of demo module
        public string getName() { return "Multi-Layer Gantt Chart"; }

        //Number of charts produced in this demo module
        public int getNoOfCharts() { return 1; }

        //Main code for creating chart.
        //Note: the argument chartIndex is unused because this demo only has 1 chart.
        public void createChart(WinChartViewer viewer, int chartIndex)
        {
            // the names of the tasks
            string[] labels = {"Market Research", "Define Specifications", "Overall Archiecture",
                "Project Planning", "Detail Design", "Software Development", "Test Plan",
                "Testing and QA", "User Documentation"};

            // the planned start dates and end dates for the tasks
            DateTime[] startDate = {new DateTime(2004, 8, 16), new DateTime(2004, 8, 30),
                new DateTime(2004, 9, 13), new DateTime(2004, 9, 20), new DateTime(2004, 9, 27),
                new DateTime(2004, 10, 4), new DateTime(2004, 10, 25), new DateTime(2004, 11, 1),
                new DateTime(2004, 11, 8)};
            DateTime[] endDate = {new DateTime(2004, 8, 30), new DateTime(2004, 9, 13),
                new DateTime(2004, 9, 27), new DateTime(2004, 10, 4), new DateTime(2004, 10, 11),
                new DateTime(2004, 11, 8), new DateTime(2004, 11, 8), new DateTime(2004, 11, 22),
                new DateTime(2004, 11, 22)};

            // the actual start dates and end dates for the tasks up to now
            DateTime[] actualStartDate = {new DateTime(2004, 8, 16), new DateTime(2004, 8, 27),
                new DateTime(2004, 9, 9), new DateTime(2004, 9, 18), new DateTime(2004, 9, 22)};
            DateTime[] actualEndDate = {new DateTime(2004, 8, 27), new DateTime(2004, 9, 9),
                new DateTime(2004, 9, 27), new DateTime(2004, 10, 2), new DateTime(2004, 10, 8)};

            // Create a XYChart object of size 620 x 280 pixels. Set background color to light green
            // (ccffcc) with 1 pixel 3D border effect.
            XYChart c = new XYChart(620, 280, 0xccffcc, 0x000000, 1);

            // Add a title to the chart using 15 points Times Bold Itatic font, with white (ffffff)
            // text on a dark green (0x6000) background
            c.addTitle("Multi-Layer Gantt Chart Demo", "Times New Roman Bold Italic", 15, 0xffffff
                ).setBackground(0x006000);

            // Set the plotarea at (140, 55) and of size 460 x 200 pixels. Use alternative
            // white/grey background. Enable both horizontal and vertical grids by setting their
            // colors to grey (c0c0c0). Set vertical major grid (represents month boundaries) 2
            // pixels in width
            c.setPlotArea(140, 55, 460, 200, 0xffffff, 0xeeeeee, Chart.LineColor, 0xc0c0c0, 0xc0c0c0
                ).setGridWidth(2, 1, 1, 1);

            // swap the x and y axes to create a horziontal box-whisker chart
            c.swapXY();

            // Set the y-axis scale to be date scale from Aug 16, 2004 to Nov 22, 2004, with ticks
            // every 7 days (1 week)
            c.yAxis().setDateScale(new DateTime(2004, 8, 16), new DateTime(2004, 11, 22), 86400 * 7)
                ;

            // Add a red (ff0000) dash line to represent the current day
            c.yAxis().addMark(Chart.CTime(new DateTime(2004, 10, 8)), c.dashLineColor(0xff0000,
                Chart.DashLine));

            // Set multi-style axis label formatting. Month labels are in Arial Bold font in "mmm d"
            // format. Weekly labels just show the day of month and use minor tick (by using '-' as
            // first character of format string).
            c.yAxis().setMultiFormat(Chart.StartOfMonthFilter(), "<*font=Arial Bold*>{value|mmm d}",
                Chart.StartOfDayFilter(), "-{value|d}");

            // Set the y-axis to shown on the top (right + swapXY = top)
            c.setYAxisOnRight();

            // Set the labels on the x axis
            c.xAxis().setLabels(labels);

            // Reverse the x-axis scale so that it points downwards.
            c.xAxis().setReverse();

            // Set the horizontal ticks and grid lines to be between the bars
            c.xAxis().setTickOffset(0.5);

            // Use blue (0000aa) as the color for the planned schedule
            int plannedColor = 0x0000aa;

            // Use a red hash pattern as the color for the actual dates. The pattern is created as a
            // 4 x 4 bitmap defined in memory as an array of colors.
            int[] hashPattern = {0xffffff, 0xffffff, 0xffffff, 0xff0000, 0xffffff, 0xffffff,
                0xff0000, 0xffffff, 0xffffff, 0xff0000, 0xffffff, 0xffffff, 0xff0000, 0xffffff,
                0xffffff, 0xffffff};
            int actualColor = c.patternColor(hashPattern, 4);

            // Add a box whisker layer to represent the actual dates. We add the actual dates layer
            // first, so it will be the top layer.
            BoxWhiskerLayer actualLayer = c.addBoxLayer(Chart.CTime(actualStartDate),
                Chart.CTime(actualEndDate), actualColor, "Actual");

            // Set the bar height to 8 pixels so they will not block the bottom bar
            actualLayer.setDataWidth(8);

            // Add a box-whisker layer to represent the planned schedule date
            c.addBoxLayer(Chart.CTime(startDate), Chart.CTime(endDate), plannedColor, "Planned"
                ).setBorderColor(Chart.SameAsMainColor);

            // Add a legend box on the top right corner (595, 60) of the plot area with 8 pt Arial
            // Bold font. Use a semi-transparent grey (80808080) background.
            LegendBox b = c.addLegend(595, 60, false, "Arial Bold", 8);
            b.setAlignment(Chart.TopRight);
            b.setBackground(unchecked((int)0x80808080), -1, 2);

            // Output the chart
            viewer.Chart = c;

            //include tool tip for the chart
            viewer.ImageMap = c.getHTMLImageMap("clickable", "",
                "title='{xLabel} ({dataSetName}): {top|mmm dd, yyyy} to {bottom|mmm dd, yyyy}'");
        }
    }
}

[Windows Forms - VB Version] NetWinCharts\VBNetWinCharts\layergantt.vb

Imports System
Imports Microsoft.VisualBasic
Imports ChartDirector

Public Class layergantt
    Implements DemoModule

    'Name of demo module
    Public Function getName() As String Implements DemoModule.getName
        Return "Multi-Layer Gantt Chart"
    End Function

    'Number of charts produced in this demo module
    Public Function getNoOfCharts() As Integer Implements DemoModule.getNoOfCharts
        Return 1
    End Function

    'Main code for creating chart.
    'Note: the argument chartIndex is unused because this demo only has 1 chart.
    Public Sub createChart(viewer As WinChartViewer, chartIndex As Integer) _
        Implements DemoModule.createChart

        ' the names of the tasks
        Dim labels() As String = {"Market Research", "Define Specifications", _
            "Overall Archiecture", "Project Planning", "Detail Design", "Software Development", _
            "Test Plan", "Testing and QA", "User Documentation"}

        ' the planned start dates and end dates for the tasks
        Dim startDate() As Date = {DateSerial(2004, 8, 16), DateSerial(2004, 8, 30), DateSerial( _
            2004, 9, 13), DateSerial(2004, 9, 20), DateSerial(2004, 9, 27), DateSerial(2004, 10, 4 _
            ), DateSerial(2004, 10, 25), DateSerial(2004, 11, 1), DateSerial(2004, 11, 8)}
        Dim endDate() As Date = {DateSerial(2004, 8, 30), DateSerial(2004, 9, 13), DateSerial( _
            2004, 9, 27), DateSerial(2004, 10, 4), DateSerial(2004, 10, 11), DateSerial(2004, 11, _
            8), DateSerial(2004, 11, 8), DateSerial(2004, 11, 22), DateSerial(2004, 11, 22)}

        ' the actual start dates and end dates for the tasks up to now
        Dim actualStartDate() As Date = {DateSerial(2004, 8, 16), DateSerial(2004, 8, 27), _
            DateSerial(2004, 9, 9), DateSerial(2004, 9, 18), DateSerial(2004, 9, 22)}
        Dim actualEndDate() As Date = {DateSerial(2004, 8, 27), DateSerial(2004, 9, 9), _
            DateSerial(2004, 9, 27), DateSerial(2004, 10, 2), DateSerial(2004, 10, 8)}

        ' Create a XYChart object of size 620 x 280 pixels. Set background color to light green
        ' (ccffcc) with 1 pixel 3D border effect.
        Dim c As XYChart = New XYChart(620, 280, &Hccffcc, &H000000, 1)

        ' Add a title to the chart using 15 points Times Bold Itatic font, with white (ffffff) text
        ' on a dark green (0x6000) background
        c.addTitle("Multi-Layer Gantt Chart Demo", "Times New Roman Bold Italic", 15, &Hffffff _
            ).setBackground(&H006000)

        ' Set the plotarea at (140, 55) and of size 460 x 200 pixels. Use alternative white/grey
        ' background. Enable both horizontal and vertical grids by setting their colors to grey
        ' (c0c0c0). Set vertical major grid (represents month boundaries) 2 pixels in width
        c.setPlotArea(140, 55, 460, 200, &Hffffff, &Heeeeee, Chart.LineColor, &Hc0c0c0, &Hc0c0c0 _
            ).setGridWidth(2, 1, 1, 1)

        ' swap the x and y axes to create a horziontal box-whisker chart
        c.swapXY()

        ' Set the y-axis scale to be date scale from Aug 16, 2004 to Nov 22, 2004, with ticks every
        ' 7 days (1 week)
        c.yAxis().setDateScale(DateSerial(2004, 8, 16), DateSerial(2004, 11, 22), 86400 * 7)

        ' Add a red (ff0000) dash line to represent the current day
        c.yAxis().addMark(Chart.CTime(DateSerial(2004, 10, 8)), c.dashLineColor(&Hff0000, _
            Chart.DashLine))

        ' Set multi-style axis label formatting. Month labels are in Arial Bold font in "mmm d"
        ' format. Weekly labels just show the day of month and use minor tick (by using '-' as first
        ' character of format string).
        c.yAxis().setMultiFormat(Chart.StartOfMonthFilter(), "<*font=Arial Bold*>{value|mmm d}", _
            Chart.StartOfDayFilter(), "-{value|d}")

        ' Set the y-axis to shown on the top (right + swapXY = top)
        c.setYAxisOnRight()

        ' Set the labels on the x axis
        c.xAxis().setLabels(labels)

        ' Reverse the x-axis scale so that it points downwards.
        c.xAxis().setReverse()

        ' Set the horizontal ticks and grid lines to be between the bars
        c.xAxis().setTickOffset(0.5)

        ' Use blue (0000aa) as the color for the planned schedule
        Dim plannedColor As Integer = &H0000aa

        ' Use a red hash pattern as the color for the actual dates. The pattern is created as a 4 x
        ' 4 bitmap defined in memory as an array of colors.
        Dim hashPattern() As Integer = {&Hffffff, &Hffffff, &Hffffff, &Hff0000, &Hffffff, _
            &Hffffff, &Hff0000, &Hffffff, &Hffffff, &Hff0000, &Hffffff, &Hffffff, &Hff0000, _
            &Hffffff, &Hffffff, &Hffffff}
        Dim actualColor As Integer = c.patternColor(hashPattern, 4)

        ' Add a box whisker layer to represent the actual dates. We add the actual dates layer
        ' first, so it will be the top layer.
        Dim actualLayer As BoxWhiskerLayer = c.addBoxLayer(Chart.CTime(actualStartDate), _
            Chart.CTime(actualEndDate), actualColor, "Actual")

        ' Set the bar height to 8 pixels so they will not block the bottom bar
        actualLayer.setDataWidth(8)

        ' Add a box-whisker layer to represent the planned schedule date
        c.addBoxLayer(Chart.CTime(startDate), Chart.CTime(endDate), plannedColor, "Planned" _
            ).setBorderColor(Chart.SameAsMainColor)

        ' Add a legend box on the top right corner (595, 60) of the plot area with 8 pt Arial Bold
        ' font. Use a semi-transparent grey (80808080) background.
        Dim b As LegendBox = c.addLegend(595, 60, False, "Arial Bold", 8)
        b.setAlignment(Chart.TopRight)
        b.setBackground(&H80808080, -1, 2)

        ' Output the chart
        viewer.Chart = c

        'include tool tip for the chart
        viewer.ImageMap = c.getHTMLImageMap("clickable", "", _
            "title='{xLabel} ({dataSetName}): {top|mmm dd, yyyy} to {bottom|mmm dd, yyyy}'")

    End Sub

End Class

[WPF - C#] NetWPFCharts\CSharpWPFCharts\layergantt.cs

using System;
using ChartDirector;

namespace CSharpWPFCharts
{
    public class layergantt : DemoModule
    {
        //Name of demo module
        public string getName() { return "Multi-Layer Gantt Chart"; }

        //Number of charts produced in this demo module
        public int getNoOfCharts() { return 1; }

        //Main code for creating chart.
        //Note: the argument chartIndex is unused because this demo only has 1 chart.
        public void createChart(WPFChartViewer viewer, int chartIndex)
        {
            // the names of the tasks
            string[] labels = {"Market Research", "Define Specifications", "Overall Archiecture",
                "Project Planning", "Detail Design", "Software Development", "Test Plan",
                "Testing and QA", "User Documentation"};

            // the planned start dates and end dates for the tasks
            DateTime[] startDate = {new DateTime(2004, 8, 16), new DateTime(2004, 8, 30),
                new DateTime(2004, 9, 13), new DateTime(2004, 9, 20), new DateTime(2004, 9, 27),
                new DateTime(2004, 10, 4), new DateTime(2004, 10, 25), new DateTime(2004, 11, 1),
                new DateTime(2004, 11, 8)};
            DateTime[] endDate = {new DateTime(2004, 8, 30), new DateTime(2004, 9, 13),
                new DateTime(2004, 9, 27), new DateTime(2004, 10, 4), new DateTime(2004, 10, 11),
                new DateTime(2004, 11, 8), new DateTime(2004, 11, 8), new DateTime(2004, 11, 22),
                new DateTime(2004, 11, 22)};

            // the actual start dates and end dates for the tasks up to now
            DateTime[] actualStartDate = {new DateTime(2004, 8, 16), new DateTime(2004, 8, 27),
                new DateTime(2004, 9, 9), new DateTime(2004, 9, 18), new DateTime(2004, 9, 22)};
            DateTime[] actualEndDate = {new DateTime(2004, 8, 27), new DateTime(2004, 9, 9),
                new DateTime(2004, 9, 27), new DateTime(2004, 10, 2), new DateTime(2004, 10, 8)};

            // Create a XYChart object of size 620 x 280 pixels. Set background color to light green
            // (ccffcc) with 1 pixel 3D border effect.
            XYChart c = new XYChart(620, 280, 0xccffcc, 0x000000, 1);

            // Add a title to the chart using 15 points Times Bold Itatic font, with white (ffffff)
            // text on a dark green (0x6000) background
            c.addTitle("Multi-Layer Gantt Chart Demo", "Times New Roman Bold Italic", 15, 0xffffff
                ).setBackground(0x006000);

            // Set the plotarea at (140, 55) and of size 460 x 200 pixels. Use alternative
            // white/grey background. Enable both horizontal and vertical grids by setting their
            // colors to grey (c0c0c0). Set vertical major grid (represents month boundaries) 2
            // pixels in width
            c.setPlotArea(140, 55, 460, 200, 0xffffff, 0xeeeeee, Chart.LineColor, 0xc0c0c0, 0xc0c0c0
                ).setGridWidth(2, 1, 1, 1);

            // swap the x and y axes to create a horziontal box-whisker chart
            c.swapXY();

            // Set the y-axis scale to be date scale from Aug 16, 2004 to Nov 22, 2004, with ticks
            // every 7 days (1 week)
            c.yAxis().setDateScale(new DateTime(2004, 8, 16), new DateTime(2004, 11, 22), 86400 * 7)
                ;

            // Add a red (ff0000) dash line to represent the current day
            c.yAxis().addMark(Chart.CTime(new DateTime(2004, 10, 8)), c.dashLineColor(0xff0000,
                Chart.DashLine));

            // Set multi-style axis label formatting. Month labels are in Arial Bold font in "mmm d"
            // format. Weekly labels just show the day of month and use minor tick (by using '-' as
            // first character of format string).
            c.yAxis().setMultiFormat(Chart.StartOfMonthFilter(), "<*font=Arial Bold*>{value|mmm d}",
                Chart.StartOfDayFilter(), "-{value|d}");

            // Set the y-axis to shown on the top (right + swapXY = top)
            c.setYAxisOnRight();

            // Set the labels on the x axis
            c.xAxis().setLabels(labels);

            // Reverse the x-axis scale so that it points downwards.
            c.xAxis().setReverse();

            // Set the horizontal ticks and grid lines to be between the bars
            c.xAxis().setTickOffset(0.5);

            // Use blue (0000aa) as the color for the planned schedule
            int plannedColor = 0x0000aa;

            // Use a red hash pattern as the color for the actual dates. The pattern is created as a
            // 4 x 4 bitmap defined in memory as an array of colors.
            int[] hashPattern = {0xffffff, 0xffffff, 0xffffff, 0xff0000, 0xffffff, 0xffffff,
                0xff0000, 0xffffff, 0xffffff, 0xff0000, 0xffffff, 0xffffff, 0xff0000, 0xffffff,
                0xffffff, 0xffffff};
            int actualColor = c.patternColor(hashPattern, 4);

            // Add a box whisker layer to represent the actual dates. We add the actual dates layer
            // first, so it will be the top layer.
            BoxWhiskerLayer actualLayer = c.addBoxLayer(Chart.CTime(actualStartDate),
                Chart.CTime(actualEndDate), actualColor, "Actual");

            // Set the bar height to 8 pixels so they will not block the bottom bar
            actualLayer.setDataWidth(8);

            // Add a box-whisker layer to represent the planned schedule date
            c.addBoxLayer(Chart.CTime(startDate), Chart.CTime(endDate), plannedColor, "Planned"
                ).setBorderColor(Chart.SameAsMainColor);

            // Add a legend box on the top right corner (595, 60) of the plot area with 8 pt Arial
            // Bold font. Use a semi-transparent grey (80808080) background.
            LegendBox b = c.addLegend(595, 60, false, "Arial Bold", 8);
            b.setAlignment(Chart.TopRight);
            b.setBackground(unchecked((int)0x80808080), -1, 2);

            // Output the chart
            viewer.Chart = c;

            //include tool tip for the chart
            viewer.ImageMap = c.getHTMLImageMap("clickable", "",
                "title='{xLabel} ({dataSetName}): {top|mmm dd, yyyy} to {bottom|mmm dd, yyyy}'");
        }
    }
}

[ASP.NET Web Forms - C# version] NetWebCharts\CSharpASP\layergantt.aspx
(Click here on how to convert this code to code-behind style.)

<%@ Page Language="C#" Debug="true" %>
<%@ Import Namespace="ChartDirector" %>
<%@ Register TagPrefix="chart" Namespace="ChartDirector" Assembly="netchartdir" %>

<!DOCTYPE html>

<script runat="server">

//
// Page Load event handler
//
protected void Page_Load(object sender, EventArgs e)
{
    // the names of the tasks
    string[] labels = {"Market Research", "Define Specifications", "Overall Archiecture",
        "Project Planning", "Detail Design", "Software Development", "Test Plan", "Testing and QA",
        "User Documentation"};

    // the planned start dates and end dates for the tasks
    DateTime[] startDate = {new DateTime(2004, 8, 16), new DateTime(2004, 8, 30), new DateTime(2004,
        9, 13), new DateTime(2004, 9, 20), new DateTime(2004, 9, 27), new DateTime(2004, 10, 4),
        new DateTime(2004, 10, 25), new DateTime(2004, 11, 1), new DateTime(2004, 11, 8)};
    DateTime[] endDate = {new DateTime(2004, 8, 30), new DateTime(2004, 9, 13), new DateTime(2004,
        9, 27), new DateTime(2004, 10, 4), new DateTime(2004, 10, 11), new DateTime(2004, 11, 8),
        new DateTime(2004, 11, 8), new DateTime(2004, 11, 22), new DateTime(2004, 11, 22)};

    // the actual start dates and end dates for the tasks up to now
    DateTime[] actualStartDate = {new DateTime(2004, 8, 16), new DateTime(2004, 8, 27),
        new DateTime(2004, 9, 9), new DateTime(2004, 9, 18), new DateTime(2004, 9, 22)};
    DateTime[] actualEndDate = {new DateTime(2004, 8, 27), new DateTime(2004, 9, 9), new DateTime(
        2004, 9, 27), new DateTime(2004, 10, 2), new DateTime(2004, 10, 8)};

    // Create a XYChart object of size 620 x 280 pixels. Set background color to light green
    // (ccffcc) with 1 pixel 3D border effect.
    XYChart c = new XYChart(620, 280, 0xccffcc, 0x000000, 1);

    // Add a title to the chart using 15 points Times Bold Itatic font, with white (ffffff) text on
    // a dark green (0x6000) background
    c.addTitle("Multi-Layer Gantt Chart Demo", "Times New Roman Bold Italic", 15, 0xffffff
        ).setBackground(0x006000);

    // Set the plotarea at (140, 55) and of size 460 x 200 pixels. Use alternative white/grey
    // background. Enable both horizontal and vertical grids by setting their colors to grey
    // (c0c0c0). Set vertical major grid (represents month boundaries) 2 pixels in width
    c.setPlotArea(140, 55, 460, 200, 0xffffff, 0xeeeeee, Chart.LineColor, 0xc0c0c0, 0xc0c0c0
        ).setGridWidth(2, 1, 1, 1);

    // swap the x and y axes to create a horziontal box-whisker chart
    c.swapXY();

    // Set the y-axis scale to be date scale from Aug 16, 2004 to Nov 22, 2004, with ticks every 7
    // days (1 week)
    c.yAxis().setDateScale(new DateTime(2004, 8, 16), new DateTime(2004, 11, 22), 86400 * 7);

    // Add a red (ff0000) dash line to represent the current day
    c.yAxis().addMark(Chart.CTime(new DateTime(2004, 10, 8)), c.dashLineColor(0xff0000,
        Chart.DashLine));

    // Set multi-style axis label formatting. Month labels are in Arial Bold font in "mmm d" format.
    // Weekly labels just show the day of month and use minor tick (by using '-' as first character
    // of format string).
    c.yAxis().setMultiFormat(Chart.StartOfMonthFilter(), "<*font=Arial Bold*>{value|mmm d}",
        Chart.StartOfDayFilter(), "-{value|d}");

    // Set the y-axis to shown on the top (right + swapXY = top)
    c.setYAxisOnRight();

    // Set the labels on the x axis
    c.xAxis().setLabels(labels);

    // Reverse the x-axis scale so that it points downwards.
    c.xAxis().setReverse();

    // Set the horizontal ticks and grid lines to be between the bars
    c.xAxis().setTickOffset(0.5);

    // Use blue (0000aa) as the color for the planned schedule
    int plannedColor = 0x0000aa;

    // Use a red hash pattern as the color for the actual dates. The pattern is created as a 4 x 4
    // bitmap defined in memory as an array of colors.
    int[] hashPattern = {0xffffff, 0xffffff, 0xffffff, 0xff0000, 0xffffff, 0xffffff, 0xff0000,
        0xffffff, 0xffffff, 0xff0000, 0xffffff, 0xffffff, 0xff0000, 0xffffff, 0xffffff, 0xffffff};
    int actualColor = c.patternColor(hashPattern, 4);

    // Add a box whisker layer to represent the actual dates. We add the actual dates layer first,
    // so it will be the top layer.
    BoxWhiskerLayer actualLayer = c.addBoxLayer(Chart.CTime(actualStartDate),
        Chart.CTime(actualEndDate), actualColor, "Actual");

    // Set the bar height to 8 pixels so they will not block the bottom bar
    actualLayer.setDataWidth(8);

    // Add a box-whisker layer to represent the planned schedule date
    c.addBoxLayer(Chart.CTime(startDate), Chart.CTime(endDate), plannedColor, "Planned"
        ).setBorderColor(Chart.SameAsMainColor);

    // Add a legend box on the top right corner (595, 60) of the plot area with 8 pt Arial Bold
    // font. Use a semi-transparent grey (80808080) background.
    LegendBox b = c.addLegend(595, 60, false, "Arial Bold", 8);
    b.setAlignment(Chart.TopRight);
    b.setBackground(unchecked((int)0x80808080), -1, 2);

    // Output the chart
    WebChartViewer1.Image = c.makeWebImage(Chart.SVG);

    // Include tool tip for the chart
    WebChartViewer1.ImageMap = c.getHTMLImageMap("", "",
        "title='{xLabel} ({dataSetName}): {top|mmm dd, yyyy} to {bottom|mmm dd, yyyy}'");
}

</script>

<html>
<head>
    <script type="text/javascript" src="cdjcv.js"></script>
</head>
<body>
    <chart:WebChartViewer id="WebChartViewer1" runat="server" />
</body>
</html>

[ASP.NET Web Forms - VB Version] NetWebCharts\VBNetASP\layergantt.aspx
(Click here on how to convert this code to code-behind style.)

<%@ Page Language="VB" Debug="true" %>
<%@ Import Namespace="ChartDirector" %>
<%@ Register TagPrefix="chart" Namespace="ChartDirector" Assembly="netchartdir" %>

<!DOCTYPE html>

<script runat="server">

'
' Page Load event handler
'
Protected Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)

    ' the names of the tasks
    Dim labels() As String = {"Market Research", "Define Specifications", "Overall Archiecture", _
        "Project Planning", "Detail Design", "Software Development", "Test Plan", _
        "Testing and QA", "User Documentation"}

    ' the planned start dates and end dates for the tasks
    Dim startDate() As Date = {DateSerial(2004, 8, 16), DateSerial(2004, 8, 30), DateSerial(2004, _
        9, 13), DateSerial(2004, 9, 20), DateSerial(2004, 9, 27), DateSerial(2004, 10, 4), _
        DateSerial(2004, 10, 25), DateSerial(2004, 11, 1), DateSerial(2004, 11, 8)}
    Dim endDate() As Date = {DateSerial(2004, 8, 30), DateSerial(2004, 9, 13), DateSerial(2004, 9, _
        27), DateSerial(2004, 10, 4), DateSerial(2004, 10, 11), DateSerial(2004, 11, 8), _
        DateSerial(2004, 11, 8), DateSerial(2004, 11, 22), DateSerial(2004, 11, 22)}

    ' the actual start dates and end dates for the tasks up to now
    Dim actualStartDate() As Date = {DateSerial(2004, 8, 16), DateSerial(2004, 8, 27), DateSerial( _
        2004, 9, 9), DateSerial(2004, 9, 18), DateSerial(2004, 9, 22)}
    Dim actualEndDate() As Date = {DateSerial(2004, 8, 27), DateSerial(2004, 9, 9), DateSerial( _
        2004, 9, 27), DateSerial(2004, 10, 2), DateSerial(2004, 10, 8)}

    ' Create a XYChart object of size 620 x 280 pixels. Set background color to light green (ccffcc)
    ' with 1 pixel 3D border effect.
    Dim c As XYChart = New XYChart(620, 280, &Hccffcc, &H000000, 1)

    ' Add a title to the chart using 15 points Times Bold Itatic font, with white (ffffff) text on a
    ' dark green (0x6000) background
    c.addTitle("Multi-Layer Gantt Chart Demo", "Times New Roman Bold Italic", 15, &Hffffff _
        ).setBackground(&H006000)

    ' Set the plotarea at (140, 55) and of size 460 x 200 pixels. Use alternative white/grey
    ' background. Enable both horizontal and vertical grids by setting their colors to grey
    ' (c0c0c0). Set vertical major grid (represents month boundaries) 2 pixels in width
    c.setPlotArea(140, 55, 460, 200, &Hffffff, &Heeeeee, Chart.LineColor, &Hc0c0c0, &Hc0c0c0 _
        ).setGridWidth(2, 1, 1, 1)

    ' swap the x and y axes to create a horziontal box-whisker chart
    c.swapXY()

    ' Set the y-axis scale to be date scale from Aug 16, 2004 to Nov 22, 2004, with ticks every 7
    ' days (1 week)
    c.yAxis().setDateScale(DateSerial(2004, 8, 16), DateSerial(2004, 11, 22), 86400 * 7)

    ' Add a red (ff0000) dash line to represent the current day
    c.yAxis().addMark(Chart.CTime(DateSerial(2004, 10, 8)), c.dashLineColor(&Hff0000, _
        Chart.DashLine))

    ' Set multi-style axis label formatting. Month labels are in Arial Bold font in "mmm d" format.
    ' Weekly labels just show the day of month and use minor tick (by using '-' as first character
    ' of format string).
    c.yAxis().setMultiFormat(Chart.StartOfMonthFilter(), "<*font=Arial Bold*>{value|mmm d}", _
        Chart.StartOfDayFilter(), "-{value|d}")

    ' Set the y-axis to shown on the top (right + swapXY = top)
    c.setYAxisOnRight()

    ' Set the labels on the x axis
    c.xAxis().setLabels(labels)

    ' Reverse the x-axis scale so that it points downwards.
    c.xAxis().setReverse()

    ' Set the horizontal ticks and grid lines to be between the bars
    c.xAxis().setTickOffset(0.5)

    ' Use blue (0000aa) as the color for the planned schedule
    Dim plannedColor As Integer = &H0000aa

    ' Use a red hash pattern as the color for the actual dates. The pattern is created as a 4 x 4
    ' bitmap defined in memory as an array of colors.
    Dim hashPattern() As Integer = {&Hffffff, &Hffffff, &Hffffff, &Hff0000, &Hffffff, &Hffffff, _
        &Hff0000, &Hffffff, &Hffffff, &Hff0000, &Hffffff, &Hffffff, &Hff0000, &Hffffff, &Hffffff, _
        &Hffffff}
    Dim actualColor As Integer = c.patternColor(hashPattern, 4)

    ' Add a box whisker layer to represent the actual dates. We add the actual dates layer first, so
    ' it will be the top layer.
    Dim actualLayer As BoxWhiskerLayer = c.addBoxLayer(Chart.CTime(actualStartDate), _
        Chart.CTime(actualEndDate), actualColor, "Actual")

    ' Set the bar height to 8 pixels so they will not block the bottom bar
    actualLayer.setDataWidth(8)

    ' Add a box-whisker layer to represent the planned schedule date
    c.addBoxLayer(Chart.CTime(startDate), Chart.CTime(endDate), plannedColor, "Planned" _
        ).setBorderColor(Chart.SameAsMainColor)

    ' Add a legend box on the top right corner (595, 60) of the plot area with 8 pt Arial Bold font.
    ' Use a semi-transparent grey (80808080) background.
    Dim b As LegendBox = c.addLegend(595, 60, False, "Arial Bold", 8)
    b.setAlignment(Chart.TopRight)
    b.setBackground(&H80808080, -1, 2)

    ' Output the chart
    WebChartViewer1.Image = c.makeWebImage(Chart.SVG)

    ' Include tool tip for the chart
    WebChartViewer1.ImageMap = c.getHTMLImageMap("", "", _
        "title='{xLabel} ({dataSetName}): {top|mmm dd, yyyy} to {bottom|mmm dd, yyyy}'")

End Sub

</script>

<html>
<head>
    <script type="text/javascript" src="cdjcv.js"></script>
</head>
<body>
    <chart:WebChartViewer id="WebChartViewer1" runat="server" />
</body>
</html>

[ASP.NET MVC - Controller] NetMvcCharts\Controllers\LayerganttController.cs

using System;
using System.Web.Mvc;
using ChartDirector;

namespace NetMvcCharts.Controllers
{
    public class LayerganttController : Controller
    {
        //
        // Default Action
        //
        public ActionResult Index()
        {
            ViewBag.Title = "Multi-Layer Gantt Chart";
            createChart(ViewBag.Viewer = new RazorChartViewer(HttpContext, "chart1"));
            return View("~/Views/Shared/ChartView.cshtml");
        }

        //
        // Create chart
        //
        private void createChart(RazorChartViewer viewer)
        {
            // the names of the tasks
            string[] labels = {"Market Research", "Define Specifications", "Overall Archiecture",
                "Project Planning", "Detail Design", "Software Development", "Test Plan",
                "Testing and QA", "User Documentation"};

            // the planned start dates and end dates for the tasks
            DateTime[] startDate = {new DateTime(2004, 8, 16), new DateTime(2004, 8, 30), new DateTime(
                2004, 9, 13), new DateTime(2004, 9, 20), new DateTime(2004, 9, 27), new DateTime(2004,
                10, 4), new DateTime(2004, 10, 25), new DateTime(2004, 11, 1), new DateTime(2004, 11, 8)}
                ;
            DateTime[] endDate = {new DateTime(2004, 8, 30), new DateTime(2004, 9, 13), new DateTime(
                2004, 9, 27), new DateTime(2004, 10, 4), new DateTime(2004, 10, 11), new DateTime(2004,
                11, 8), new DateTime(2004, 11, 8), new DateTime(2004, 11, 22), new DateTime(2004, 11, 22)
                };

            // the actual start dates and end dates for the tasks up to now
            DateTime[] actualStartDate = {new DateTime(2004, 8, 16), new DateTime(2004, 8, 27),
                new DateTime(2004, 9, 9), new DateTime(2004, 9, 18), new DateTime(2004, 9, 22)};
            DateTime[] actualEndDate = {new DateTime(2004, 8, 27), new DateTime(2004, 9, 9),
                new DateTime(2004, 9, 27), new DateTime(2004, 10, 2), new DateTime(2004, 10, 8)};

            // Create a XYChart object of size 620 x 280 pixels. Set background color to light green
            // (ccffcc) with 1 pixel 3D border effect.
            XYChart c = new XYChart(620, 280, 0xccffcc, 0x000000, 1);

            // Add a title to the chart using 15 points Times Bold Itatic font, with white (ffffff) text
            // on a dark green (0x6000) background
            c.addTitle("Multi-Layer Gantt Chart Demo", "Times New Roman Bold Italic", 15, 0xffffff
                ).setBackground(0x006000);

            // Set the plotarea at (140, 55) and of size 460 x 200 pixels. Use alternative white/grey
            // background. Enable both horizontal and vertical grids by setting their colors to grey
            // (c0c0c0). Set vertical major grid (represents month boundaries) 2 pixels in width
            c.setPlotArea(140, 55, 460, 200, 0xffffff, 0xeeeeee, Chart.LineColor, 0xc0c0c0, 0xc0c0c0
                ).setGridWidth(2, 1, 1, 1);

            // swap the x and y axes to create a horziontal box-whisker chart
            c.swapXY();

            // Set the y-axis scale to be date scale from Aug 16, 2004 to Nov 22, 2004, with ticks every
            // 7 days (1 week)
            c.yAxis().setDateScale(new DateTime(2004, 8, 16), new DateTime(2004, 11, 22), 86400 * 7);

            // Add a red (ff0000) dash line to represent the current day
            c.yAxis().addMark(Chart.CTime(new DateTime(2004, 10, 8)), c.dashLineColor(0xff0000,
                Chart.DashLine));

            // Set multi-style axis label formatting. Month labels are in Arial Bold font in "mmm d"
            // format. Weekly labels just show the day of month and use minor tick (by using '-' as first
            // character of format string).
            c.yAxis().setMultiFormat(Chart.StartOfMonthFilter(), "<*font=Arial Bold*>{value|mmm d}",
                Chart.StartOfDayFilter(), "-{value|d}");

            // Set the y-axis to shown on the top (right + swapXY = top)
            c.setYAxisOnRight();

            // Set the labels on the x axis
            c.xAxis().setLabels(labels);

            // Reverse the x-axis scale so that it points downwards.
            c.xAxis().setReverse();

            // Set the horizontal ticks and grid lines to be between the bars
            c.xAxis().setTickOffset(0.5);

            // Use blue (0000aa) as the color for the planned schedule
            int plannedColor = 0x0000aa;

            // Use a red hash pattern as the color for the actual dates. The pattern is created as a 4 x
            // 4 bitmap defined in memory as an array of colors.
            int[] hashPattern = {0xffffff, 0xffffff, 0xffffff, 0xff0000, 0xffffff, 0xffffff, 0xff0000,
                0xffffff, 0xffffff, 0xff0000, 0xffffff, 0xffffff, 0xff0000, 0xffffff, 0xffffff, 0xffffff}
                ;
            int actualColor = c.patternColor(hashPattern, 4);

            // Add a box whisker layer to represent the actual dates. We add the actual dates layer
            // first, so it will be the top layer.
            BoxWhiskerLayer actualLayer = c.addBoxLayer(Chart.CTime(actualStartDate),
                Chart.CTime(actualEndDate), actualColor, "Actual");

            // Set the bar height to 8 pixels so they will not block the bottom bar
            actualLayer.setDataWidth(8);

            // Add a box-whisker layer to represent the planned schedule date
            c.addBoxLayer(Chart.CTime(startDate), Chart.CTime(endDate), plannedColor, "Planned"
                ).setBorderColor(Chart.SameAsMainColor);

            // Add a legend box on the top right corner (595, 60) of the plot area with 8 pt Arial Bold
            // font. Use a semi-transparent grey (80808080) background.
            LegendBox b = c.addLegend(595, 60, false, "Arial Bold", 8);
            b.setAlignment(Chart.TopRight);
            b.setBackground(unchecked((int)0x80808080), -1, 2);

            // Output the chart
            viewer.Image = c.makeWebImage(Chart.SVG);

            // Include tool tip for the chart
            viewer.ImageMap = c.getHTMLImageMap("", "",
                "title='{xLabel} ({dataSetName}): {top|mmm dd, yyyy} to {bottom|mmm dd, yyyy}'");
        }
    }
}

[ASP.NET MVC - View] NetMvcCharts\Views\Shared\ChartView.cshtml

@{ Layout = null; }

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <style>
        @ViewBag.Style
    </style>
    @Scripts.Render("~/Scripts/cdjcv.js")
</head>
<body style="margin:5px 0px 0px 5px">
    <div style="font:bold 18pt verdana;">
        @ViewBag.Title
    </div>
    <hr style="border:solid 1px #000080; background:#000080" />
    <div>
        @{
            if (ViewBag.Viewer is Array)
            {
                // Display multiple charts
                for (int i = 0; i < ViewBag.Viewer.Length; ++i)
                {
                    @:@Html.Raw(ViewBag.Viewer[i].RenderHTML())
                }
            }
            else
            {
                // Display one chart only
                @:@Html.Raw(ViewBag.Viewer.RenderHTML())
            }
        }
    </div>
</body>
</html>