<%@ Page Language="C#" %>
<%@ Register assembly="JQChart.Web" namespace="JQChart.Web.UI.WebControls" tagprefix="jqChart" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="~/Content/jquery.jqChart.css" />
<link rel="stylesheet" type="text/css" href="~/Content/themes/le-frog/jquery-ui-1.8.20.css" />
<script src="<% = ResolveUrl("~/Scripts/jquery-1.11.1.min.js") %>" type="text/javascript"></script>
<script src="<% = ResolveUrl("~/Scripts/jquery.jqChart.min.js") %>" type="text/javascript"></script>
</head>
<body>
<form runat="server">
<asp:ObjectDataSource ID="ObjectDataSource1"
runat="server"
SelectMethod="GetData"
TypeName="SamplesBrowser.Models.GanttChartData"></asp:ObjectDataSource>
<jqChart:Chart ID="Chart1" Width="500px" Height="300px" runat="server" DataSourceID="ObjectDataSource1">
<Title Text="Gantt Chart"></Title>
<Animation Enabled="True" Duration="00:00:01" />
<Tooltips TooltipsType="Shared"></Tooltips>
<Legend Visible="false"></Legend>
<Series>
<jqChart:GanttSeries
XValuesField="ValueX"
FromValuesField="ValueFrom"
ToValuesField="ValueTo"
LabelValuesField="ValueLabel">
<FillStyles>
<jqChart:StringValue Value="#418CF0" />
<jqChart:StringValue Value="#FCB441" />
<jqChart:StringValue Value="#E0400A" />
<jqChart:StringValue Value="#056492" />
<jqChart:StringValue Value="#BFBFBF" />
</FillStyles>
<Labels Font="14px sans-serif">
<FillStyle Color="White">
</FillStyle>
</Labels>
</jqChart:GanttSeries>
</Series>
</jqChart:Chart>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace SamplesBrowser.Models
{
public class GanttChartData
{
public static List<GanttChartData> GetData()
{
var data = new List<GanttChartData>();
data.Add(new GanttChartData("Phase 1", new DateTime(2010, 1, 1), new DateTime(2010, 1, 30), "Task 1"));
data.Add(new GanttChartData("Phase 2", new DateTime(2010, 1, 1), new DateTime(2010, 1, 10), "Task 2"));
data.Add(new GanttChartData("Phase 3", new DateTime(2010, 1, 10), new DateTime(2010, 1, 20), "Task 3"));
data.Add(new GanttChartData("Phase 4", new DateTime(2010, 1, 20), new DateTime(2010, 1, 25), "Task 4"));
data.Add(new GanttChartData("Phase 5", new DateTime(2010, 1, 25), new DateTime(2010, 1, 30), "Task 5"));
return data;
}
public GanttChartData(string valueX, DateTime valueFrom, DateTime valueTo, string valueLabel)
{
this.ValueX = valueX;
this.ValueFrom = valueFrom;
this.ValueTo = valueTo;
this.ValueLabel = valueLabel;
}
public string ValueX { get; set; }
public DateTime ValueFrom { get; set; }
public DateTime ValueTo { get; set; }
public string ValueLabel { get; set; }
}
}