ChartDirector 6.2 (.NET Edition)

Simple Gantt Chart




This example demonstrates a simple gantt chart.

This chart is created by using a horizontal box-whisker layer, in which only the "box" part of the box-whisker layer is used. Date/time values are used as box data, resulting in a gantt chart.

The key features demonstrated in this example are:

Source Code Listing

[Windows Forms - C# version] NetWinCharts\CSharpWinCharts\gantt.cs
using System;
using ChartDirector;

namespace CSharpChartExplorer
{
    public class gantt : DemoModule
    {
        //Name of demo module
        public string getName() { return "Simple 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)
        {
            // data for the gantt chart, representing the start date, end date and names for various
            // activities
            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)};
            string[] labels = {"Market Research", "Define Specifications", "Overall Archiecture",
                "Project Planning", "Detail Design", "Software Development", "Test Plan",
                "Testing and QA", "User Documentation"};

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

            // Add a title to the chart using 15 points Times Bold Itatic font, with white (ffffff)
            // text on a deep blue (000080) background
            c.addTitle("Simple Gantt Chart Demo", "Times New Roman Bold Italic", 15, 0xffffff
                ).setBackground(0x000080);

            // 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)
                ;

            // 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);

            // Add a green (33ff33) box-whisker layer showing the box only.
            c.addBoxWhiskerLayer(Chart.CTime(startDate), Chart.CTime(endDate), null, null, null,
                0x00cc00, Chart.SameAsMainColor, Chart.SameAsMainColor);

            // Output the chart
            viewer.Chart = c;

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

[Windows Forms - VB Version] NetWinCharts\VBNetWinCharts\gantt.vb
Imports System
Imports Microsoft.VisualBasic
Imports ChartDirector

Public Class gantt
    Implements DemoModule

    'Name of demo module
    Public Function getName() As String Implements DemoModule.getName
        Return "Simple 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

        ' data for the gantt chart, representing the start date, end date and names for various
        ' activities
        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)}
        Dim labels() As String = {"Market Research", "Define Specifications", _
            "Overall Archiecture", "Project Planning", "Detail Design", "Software Development", _
            "Test Plan", "Testing and QA", "User Documentation"}

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

        ' Add a title to the chart using 15 points Times Bold Itatic font, with white (ffffff) text
        ' on a deep blue (000080) background
        c.addTitle("Simple Gantt Chart Demo", "Times New Roman Bold Italic", 15, &Hffffff _
            ).setBackground(&H000080)

        ' 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)

        ' 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)

        ' Add a green (33ff33) box-whisker layer showing the box only.
        c.addBoxWhiskerLayer(Chart.CTime(startDate), Chart.CTime(endDate), Nothing, Nothing, _
            Nothing, &H00cc00, Chart.SameAsMainColor, Chart.SameAsMainColor)

        ' Output the chart
        viewer.Chart = c

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

    End Sub

End Class

[WPF - C#] NetWPFCharts\gantt.cs
using System;
using ChartDirector;

namespace CSharpWPFDemo
{
    public class gantt : DemoModule
    {
        //Name of demo module
        public string getName() { return "Simple 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)
        {
            // data for the gantt chart, representing the start date, end date and names for various
            // activities
            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)};
            string[] labels = {"Market Research", "Define Specifications", "Overall Archiecture",
                "Project Planning", "Detail Design", "Software Development", "Test Plan",
                "Testing and QA", "User Documentation"};

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

            // Add a title to the chart using 15 points Times Bold Itatic font, with white (ffffff)
            // text on a deep blue (000080) background
            c.addTitle("Simple Gantt Chart Demo", "Times New Roman Bold Italic", 15, 0xffffff
                ).setBackground(0x000080);

            // 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)
                ;

            // 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);

            // Add a green (33ff33) box-whisker layer showing the box only.
            c.addBoxWhiskerLayer(Chart.CTime(startDate), Chart.CTime(endDate), null, null, null,
                0x00cc00, Chart.SameAsMainColor, Chart.SameAsMainColor);

            // Output the chart
            viewer.Chart = c;

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

[ASP.NET Web Forms - C# version] NetWebCharts\CSharpASP\gantt.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)
{
    // data for the gantt chart, representing the start date, end date and names for various
    // activities
    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)};
    string[] labels = {"Market Research", "Define Specifications", "Overall Archiecture",
        "Project Planning", "Detail Design", "Software Development", "Test Plan", "Testing and QA",
        "User Documentation"};

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

    // Add a title to the chart using 15 points Times Bold Itatic font, with white (ffffff) text on
    // a deep blue (000080) background
    c.addTitle("Simple Gantt Chart Demo", "Times New Roman Bold Italic", 15, 0xffffff
        ).setBackground(0x000080);

    // 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);

    // 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);

    // Add a green (33ff33) box-whisker layer showing the box only.
    c.addBoxWhiskerLayer(Chart.CTime(startDate), Chart.CTime(endDate), null, null, null, 0x00cc00,
        Chart.SameAsMainColor, Chart.SameAsMainColor);

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

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

</script>

<html>
<body>
    <chart:WebChartViewer id="WebChartViewer1" runat="server" />
</body>
</html>

[ASP.NET Web Forms - VB Version] NetWebCharts\VBNetASP\gantt.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)

    ' data for the gantt chart, representing the start date, end date and names for various
    ' activities
    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)}
    Dim labels() As String = {"Market Research", "Define Specifications", "Overall Archiecture", _
        "Project Planning", "Detail Design", "Software Development", "Test Plan", _
        "Testing and QA", "User Documentation"}

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

    ' Add a title to the chart using 15 points Times Bold Itatic font, with white (ffffff) text on a
    ' deep blue (000080) background
    c.addTitle("Simple Gantt Chart Demo", "Times New Roman Bold Italic", 15, &Hffffff _
        ).setBackground(&H000080)

    ' 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)

    ' 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)

    ' Add a green (33ff33) box-whisker layer showing the box only.
    c.addBoxWhiskerLayer(Chart.CTime(startDate), Chart.CTime(endDate), Nothing, Nothing, Nothing, _
        &H00cc00, Chart.SameAsMainColor, Chart.SameAsMainColor)

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

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

End Sub

</script>

<html>
<body>
    <chart:WebChartViewer id="WebChartViewer1" runat="server" />
</body>
</html>

[ASP.NET MVC - Controller] NetMvcCharts\Controllers\GanttController.cs
using System;
using System.Web.Mvc;
using ChartDirector;

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

        //
        // Create chart
        //
        private void createChart(RazorChartViewer viewer)
        {
            // data for the gantt chart, representing the start date, end date and names for various
            // activities
            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)
                };
            string[] labels = {"Market Research", "Define Specifications", "Overall Archiecture",
                "Project Planning", "Detail Design", "Software Development", "Test Plan",
                "Testing and QA", "User Documentation"};

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

            // Add a title to the chart using 15 points Times Bold Itatic font, with white (ffffff) text
            // on a deep blue (000080) background
            c.addTitle("Simple Gantt Chart Demo", "Times New Roman Bold Italic", 15, 0xffffff
                ).setBackground(0x000080);

            // 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);

            // 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);

            // Add a green (33ff33) box-whisker layer showing the box only.
            c.addBoxWhiskerLayer(Chart.CTime(startDate), Chart.CTime(endDate), null, null, null,
                0x00cc00, Chart.SameAsMainColor, Chart.SameAsMainColor);

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

            // Include tool tip for the chart
            viewer.ImageMap = c.getHTMLImageMap("", "",
                "title='{xLabel}: {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>
</head>
<body style="margin:5px 0px 0px 5px">
    <div style="font:bold 18pt verdana;">
        @ViewBag.Title
    </div>
    <hr style="border:solid 1px #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>