Chart for ASP.NET Web Forms - Emulate Gantt Functionality

This example demonstrates how to create a WebChartControl and bind it to data which represents a multi-task process.

The WebChartControl contains two series: Planned and Actual. The first series is bound to data. For the second series, the component uses the Custom Summary Function to calculate data based on the complete percentage data field values.

Additionally, the component raises the WebChartControl.CustomDrawSeriesPoint event to customize the text of bar labels.

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)

Example Code

WebSite/App_Code/GanttData.cs(vb)

C#
VB.NET

C#
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.ComponentModel;

/// <summary>
/// Summary description for GanttData
/// </summary>
public class GanttData : DataSet
{
    public GanttData()
    {
        DataTable table = new DataTable("table");

        table.Columns.Add("GanntTask", typeof(string));
        table.Columns.Add("GanntStart", typeof(DateTime));
        table.Columns.Add("GanntEnd", typeof(DateTime));
        table.Columns.Add("GanttPercentageComplete", typeof(Int32));
        table.Columns.Add("GanttOwner", typeof(string));

        Tables.AddRange(new DataTable[] { table });
    }

    public static GanttData CreateData() {
        GanttData ds = new GanttData();
        DataTable table = ds.Tables["table"];

        table.Rows.Add(new object[] { "Analysing", new DateTime(2009,1,1), new DateTime(2009,1,5), 90,  "John"});
        table.Rows.Add(new object[] { "Planning", new DateTime(2009,1,5), new DateTime(2009,1,10), 80, "Williams" });
        table.Rows.Add(new object[] { "Implementation", new DateTime(2009,1,10), new DateTime(2009,1,25), 85, "Iverson" });
        table.Rows.Add(new object[] { "Maintaince", new DateTime(2009,1,25), new DateTime(2009,2,5), 90, "Young" });

        return ds;
    }

    #region Disable Serialization for Tables and Relations
    [DesignerSerializationVisibility(DesignerSerializationVisibility.Hidden)]
    public new DataTableCollection Tables {
        get { return base.Tables; }
    }

    [DesignerSerializationVisibility(DesignerSerializationVisibility.Hidden)]
    public new DataRelationCollection Relations {
        get { return base.Relations; }
    }
    #endregion Disable Serialization for Tables and Relations

}

Visual Basic
Imports System
Imports System.Data
Imports System.Configuration
Imports System.Web
Imports System.Web.Security
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Web.UI.WebControls.WebParts
Imports System.Web.UI.HtmlControls
Imports System.ComponentModel

''' <summary>
''' Summary description for GanttData
''' </summary>
Public Class GanttData
    Inherits DataSet

    Public Sub New()
        Dim table As New DataTable("table")

        table.Columns.Add("GanntTask", GetType(String))
        table.Columns.Add("GanntStart", GetType(DateTime))
        table.Columns.Add("GanntEnd", GetType(DateTime))
        table.Columns.Add("GanttPercentageComplete", GetType(Int32))
        table.Columns.Add("GanttOwner", GetType(String))

        Tables.AddRange(New DataTable() { table })
    End Sub

    Public Shared Function CreateData() As GanttData
        Dim ds As New GanttData()
        Dim table As DataTable = ds.Tables("table")

        table.Rows.Add(New Object() { "Analysing", New DateTime(2009,1,1), New DateTime(2009,1,5), 90, "John"})
        table.Rows.Add(New Object() { "Planning", New DateTime(2009,1,5), New DateTime(2009,1,10), 80, "Williams" })
        table.Rows.Add(New Object() { "Implementation", New DateTime(2009,1,10), New DateTime(2009,1,25), 85, "Iverson" })
        table.Rows.Add(New Object() { "Maintaince", New DateTime(2009,1,25), New DateTime(2009,2,5), 90, "Young" })

        Return ds
    End Function

    #Region "Disable Serialization for Tables and Relations"
    <DesignerSerializationVisibility(DesignerSerializationVisibility.Hidden)>
    Public Shadows ReadOnly Property Tables() As DataTableCollection
        Get
            Return MyBase.Tables
        End Get
    End Property

    <DesignerSerializationVisibility(DesignerSerializationVisibility.Hidden)>
    Public Shadows ReadOnly Property Relations() As DataRelationCollection
        Get
            Return MyBase.Relations
        End Get
    End Property
    #End Region ' Disable Serialization for Tables and Relations

End Class

WebSite/Default.aspx

ASPx
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="DevExpress.XtraCharts.v15.1.Web, Version=15.1.15.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.XtraCharts.Web" TagPrefix="dxchartsui" %>
<%@ Register Assembly="DevExpress.XtraCharts.v15.1, Version=15.1.15.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.XtraCharts" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <dxchartsui:WebChartControl ID="WebChartControl1" runat="server" ClientInstanceName="chart"
             Height="283px" Width="924px" OnCustomDrawSeriesPoint="WebChartControl1_CustomDrawSeriesPoint">
            <SeriesSerializable>
                <cc1:Series  Name="Planned" 
                     ValueScaleType="DateTime">
                    <ViewSerializable>
<cc1:OverlappedGanttSeriesView barwidth="0.8" hiddenserializablestring="to be serialized"></cc1:OverlappedGanttSeriesView>
</ViewSerializable>
                    <LabelSerializable>
<cc1:RangeBarSeriesLabel hiddenserializablestring="to be serialized">
                    </cc1:RangeBarSeriesLabel>
</LabelSerializable>
                    <PointOptionsSerializable>
<cc1:RangeBarPointOptions hiddenserializablestring="to be serialized"></cc1:RangeBarPointOptions>
</PointOptionsSerializable>
                    <LegendPointOptionsSerializable>
<cc1:RangeBarPointOptions hiddenserializablestring="to be serialized"></cc1:RangeBarPointOptions>
</LegendPointOptionsSerializable>
                </cc1:Series>
                <cc1:Series  Name="Actual" 
                     ValueScaleType="DateTime">
                    <ViewSerializable>
<cc1:OverlappedGanttSeriesView hiddenserializablestring="to be serialized"></cc1:OverlappedGanttSeriesView>
</ViewSerializable>
                    <LabelSerializable>
<cc1:RangeBarSeriesLabel hiddenserializablestring="to be serialized">
                    </cc1:RangeBarSeriesLabel>
</LabelSerializable>
                    <PointOptionsSerializable>
<cc1:RangeBarPointOptions hiddenserializablestring="to be serialized"></cc1:RangeBarPointOptions>
</PointOptionsSerializable>
                    <LegendPointOptionsSerializable>
<cc1:RangeBarPointOptions hiddenserializablestring="to be serialized"></cc1:RangeBarPointOptions>
</LegendPointOptionsSerializable>
                </cc1:Series>
            </SeriesSerializable>
            <SeriesTemplate  
                >
                <PointOptionsSerializable>
<cc1:PointOptions HiddenSerializableString="to be serialized">
                </cc1:PointOptions>
</PointOptionsSerializable>
                <LabelSerializable>
<cc1:SideBySideBarSeriesLabel HiddenSerializableString="to be serialized" LineVisible="True">
                </cc1:SideBySideBarSeriesLabel>
</LabelSerializable>
                <LegendPointOptionsSerializable>
<cc1:PointOptions HiddenSerializableString="to be serialized">
                </cc1:PointOptions>
</LegendPointOptionsSerializable>
                <ViewSerializable>
<cc1:SideBySideBarSeriesView HiddenSerializableString="to be serialized">
                </cc1:SideBySideBarSeriesView>
</ViewSerializable>
            </SeriesTemplate>
            <DiagramSerializable>
<cc1:GanttDiagram>
                <axisx visibleinpanesserializable="-1">
<Range SideMarginsEnabled="True"></Range>
</axisx>
                <axisy visibleinpanesserializable="-1">
<Label Angle="90"></Label>

<Range SideMarginsEnabled="True"></Range>
</axisy>
            </cc1:GanttDiagram>
</DiagramSerializable>
            <FillStyle >
                <OptionsSerializable>
<cc1:SolidFillOptions HiddenSerializableString="to be serialized" />
</OptionsSerializable>
            </FillStyle>
        </dxchartsui:WebChartControl>
        &nbsp;
    
    </div>
    </form>
</body>
</html>

WebSite/Default.aspx.cs(vb)

C#
VB.NET

C#
using System;
using System.Data;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using DevExpress.XtraCharts;

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        // Cpecify ScaleTypes
        WebChartControl1.Series[0].ArgumentScaleType = ScaleType.Qualitative;
        WebChartControl1.Series[0].ValueScaleType = ScaleType.DateTime;
        WebChartControl1.Series[1].ArgumentScaleType = ScaleType.Qualitative;
        WebChartControl1.Series[1].ValueScaleType = ScaleType.DateTime;
        (WebChartControl1.Series[1].Label as RangeBarSeriesLabel).Position = RangeBarLabelPosition.Inside;

        // Bound series to data
        WebChartControl1.DataSource = GanttData.CreateData();
        WebChartControl1.Series[0].ArgumentDataMember = "GanntTask";
        WebChartControl1.Series[0].ValueDataMembers.AddRange(new string[] { "GanntStart", "GanntEnd" });

        // Create argument descriptions for the summary function.
        SummaryFunctionArgumentDescription argument1Description =
            new SummaryFunctionArgumentDescription("GanntStart", ScaleType.DateTime);
        SummaryFunctionArgumentDescription argument2Description =
            new SummaryFunctionArgumentDescription("GanntEnd", ScaleType.DateTime);
        SummaryFunctionArgumentDescription argument3Description =
            new SummaryFunctionArgumentDescription("GanttPercentageComplete", ScaleType.Numerical);

        // Register the summary function in a chart.
        WebChartControl1.RegisterSummaryFunction("CalcPercentageComplete", "CalcPercentageComplete", 2,
            new SummaryFunctionArgumentDescription[] { argument1Description, argument2Description, argument3Description},
            CalcPercentageComplete);

        WebChartControl1.Series[1].ArgumentDataMember = "GanntTask";
        WebChartControl1.Series[1].SummaryFunction = "CalcPercentageComplete([GanntStart], [GanntEnd], [GanttPercentageComplete])";

        // Don't forget this !:)
        WebChartControl1.DataBind();
    }

    // Declare the summary function.
    private static SeriesPoint[] CalcPercentageComplete(Series series, object argument,
        string[] functionArguments, DataSourceValues[] values, object[] colors) {

        // Create an array of the resulting series points.
        SeriesPoint[] points = new SeriesPoint[1] { new SeriesPoint(argument.ToString(), new DateTime[] { new DateTime(), new DateTime() }) };

        // Calculate values
        DateTime start = Convert.ToDateTime(values[0][functionArguments[0]]);
        DateTime end = Convert.ToDateTime(values[0][functionArguments[1]]);
        double ganttPercentageComplete = Convert.ToDouble(values[0][functionArguments[2]]);

        TimeSpan ts = end - start;
        
        points[0].DateTimeValues[0] = start;
        points[0].DateTimeValues[1] = start + TimeSpan.FromHours(ts.TotalHours * ganttPercentageComplete/100);
        
        object ob = values[0][""];

        points[0].Tag = (ob as DataRowView).Row["GanttOwner"].ToString() + "|" + ganttPercentageComplete.ToString();

        return points;
    }

    protected void WebChartControl1_CustomDrawSeriesPoint(object sender, CustomDrawSeriesPointEventArgs e) {
        if(e.Series.Name == "Actual") {
            e.LabelText = e.SeriesPoint.Tag.ToString().Split('|')[0];
            e.SecondLabelText = e.SeriesPoint.Tag.ToString().Split('|')[1] + "%";
        }
    }

}

Visual Basic
Imports System
Imports System.Data
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports DevExpress.XtraCharts

Partial Public Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
        ' Cpecify ScaleTypes
        WebChartControl1.Series(0).ArgumentScaleType = ScaleType.Qualitative
        WebChartControl1.Series(0).ValueScaleType = ScaleType.DateTime
        WebChartControl1.Series(1).ArgumentScaleType = ScaleType.Qualitative
        WebChartControl1.Series(1).ValueScaleType = ScaleType.DateTime
        TryCast(WebChartControl1.Series(1).Label, RangeBarSeriesLabel).Position = RangeBarLabelPosition.Inside

        ' Bound series to data
        WebChartControl1.DataSource = GanttData.CreateData()
        WebChartControl1.Series(0).ArgumentDataMember = "GanntTask"
        WebChartControl1.Series(0).ValueDataMembers.AddRange(New String() { "GanntStart", "GanntEnd" })

        ' Create argument descriptions for the summary function.
        Dim argument1Description As New SummaryFunctionArgumentDescription("GanntStart", ScaleType.DateTime)
        Dim argument2Description As New SummaryFunctionArgumentDescription("GanntEnd", ScaleType.DateTime)
        Dim argument3Description As New SummaryFunctionArgumentDescription("GanttPercentageComplete", ScaleType.Numerical)

        ' Register the summary function in a chart.
        WebChartControl1.RegisterSummaryFunction("CalcPercentageComplete", "CalcPercentageComplete", 2, New SummaryFunctionArgumentDescription() { argument1Description, argument2Description, argument3Description}, AddressOf CalcPercentageComplete)

        WebChartControl1.Series(1).ArgumentDataMember = "GanntTask"
        WebChartControl1.Series(1).SummaryFunction = "CalcPercentageComplete([GanntStart], [GanntEnd], [GanttPercentageComplete])"

        ' Don't forget this !:)
        WebChartControl1.DataBind()
    End Sub

    ' Declare the summary function.
    Private Shared Function CalcPercentageComplete(ByVal series As Series, ByVal argument As Object, ByVal functionArguments() As String, ByVal values() As DataSourceValues, ByVal colors() As Object) As SeriesPoint()

        ' Create an array of the resulting series points.
        Dim points() As SeriesPoint = { New SeriesPoint(argument.ToString(), New DateTime() { New DateTime(), New DateTime() }) }

        ' Calculate values
        Dim start As DateTime = Convert.ToDateTime(values(0)(functionArguments(0)))
        Dim [end] As DateTime = Convert.ToDateTime(values(0)(functionArguments(1)))
        Dim ganttPercentageComplete As Double = Convert.ToDouble(values(0)(functionArguments(2)))

        Dim ts As TimeSpan = [end].Subtract(start)

        points(0).DateTimeValues(0) = start
        points(0).DateTimeValues(1) = start.Add(TimeSpan.FromHours(ts.TotalHours * ganttPercentageComplete/100))

        Dim ob As Object = values(0)("")

        points(0).Tag = (TryCast(ob, DataRowView)).Row("GanttOwner").ToString() & "|" & ganttPercentageComplete.ToString()

        Return points
    End Function

    Protected Sub WebChartControl1_CustomDrawSeriesPoint(ByVal sender As Object, ByVal e As CustomDrawSeriesPointEventArgs)
        If e.Series.Name = "Actual" Then
            e.LabelText = e.SeriesPoint.Tag.ToString().Split("|"c)(0)
            e.SecondLabelText = e.SeriesPoint.Tag.ToString().Split("|"c)(1) & "%"
        End If
    End Sub

End Class

Alessandro (DevExpress Support)

last modified 12 years ago

Modified: June 8, 2013 11:01 AM

Platform: ASP.NET Web Forms

Product: XtraCharts Suite

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Chart for ASP.NET Web Forms - Emulate Gantt Functionality

Files to Look At:

Does this example address your development requirements/objectives?

Example Code

Recently viewed tickets