Chart DataPerformance !!!Bar and Column ChartsLine and Area ChartsPie and Funnel ChartsScatter and Bubble ChartsRadar and Polar ChartsFinancial ChartsGantt ChartsCombinational ChartsDynamic ChartsWorking with Chart AxesChart FeaturesCustomizing ChartClient-Side Events |
This sample demonstrates how to create a project schedule with the Gantt chart type.
For detailed implementation, please take a look at the Aspx, Razor and Controller code tabs. <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %> <%@ Import Namespace="JQChart.Web.Mvc" %> <!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="<%: Url.Content("~/Scripts/jquery-1.11.1.min.js") %>" type="text/javascript"></script> <script src="<%: Url.Content("~/Scripts/jquery.jqChart.min.js") %>" type="text/javascript"></script> <body> <div> <%= Html.JQChart() .Chart() .ID("jqChart") .Width(500) .Height(300) .Title("Project Schedule") .Animation(TimeSpan.FromSeconds(1)) .Shadows(true) .Series(series => { series.Gantt() .Title("Alan") .XValues(new string[] { "Design", "Development", "Design", "Development", "Testing" }) .FromValues(new DateTime[] { new DateTime(2010, 1, 1), new DateTime(2010, 1, 21), new DateTime(2010, 2, 16), new DateTime(2010, 3, 1), new DateTime(2010, 3, 21) }) .ToValues(new DateTime[] { new DateTime(2010, 1, 20), new DateTime(2010, 2, 15), new DateTime(2010, 2, 28), new DateTime(2010, 3, 20), new DateTime(2010, 4, 10) }); series.Gantt() .Title("Carrie") .XValues(new string[] { "Design", "Development", "Testing" }) .FromValues(new DateTime[] { new DateTime(2010, 1, 21), new DateTime(2010, 2, 16), new DateTime(2010, 3, 1) }) .ToValues(new DateTime[] { new DateTime(2010, 2, 15), new DateTime(2010, 2, 28), new DateTime(2010, 3, 20) }); series.Gantt() .Title("Katie") .XValues(new string[] { "Design", "Development", "Testing", "Testing" }) .FromValues(new DateTime?[] { null, new DateTime(2010, 3, 21), new DateTime(2010, 2, 16), new DateTime(2010, 4, 11) }) .ToValues(new DateTime?[] { null, new DateTime(2010, 4, 10), new DateTime(2010, 2, 28), new DateTime(2010, 5, 1) }); } ) .Render()%> </div> </body> </html> @using JQChart.Web.Mvc <!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="@Url.Content("~/Scripts/jquery-1.11.1.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.jqChart.min.js")" type="text/javascript"></script> <body> <div> @(Html.JQChart() .Chart() .ID("jqChart") .Width(500) .Height(300) .Title("Project Schedule") .Animation(TimeSpan.FromSeconds(1)) .Shadows(true) .Series(series => { series.Gantt() .Title("Alan") .XValues(new string[] { "Design", "Development", "Design", "Development", "Testing" }) .FromValues(new DateTime[] { new DateTime(2010, 1, 1), new DateTime(2010, 1, 21), new DateTime(2010, 2, 16), new DateTime(2010, 3, 1), new DateTime(2010, 3, 21) }) .ToValues(new DateTime[] { new DateTime(2010, 1, 20), new DateTime(2010, 2, 15), new DateTime(2010, 2, 28), new DateTime(2010, 3, 20), new DateTime(2010, 4, 10) }); series.Gantt() .Title("Carrie") .XValues(new string[] { "Design", "Development", "Testing" }) .FromValues(new DateTime[] { new DateTime(2010, 1, 21), new DateTime(2010, 2, 16), new DateTime(2010, 3, 1) }) .ToValues(new DateTime[] { new DateTime(2010, 2, 15), new DateTime(2010, 2, 28), new DateTime(2010, 3, 20) }); series.Gantt() .Title("Katie") .XValues(new string[] { "Design", "Development", "Testing", "Testing" }) .FromValues(new DateTime?[] { null, new DateTime(2010, 3, 21), new DateTime(2010, 2, 16), new DateTime(2010, 4, 11) }) .ToValues(new DateTime?[] { null, new DateTime(2010, 4, 10), new DateTime(2010, 2, 28), new DateTime(2010, 5, 1) }); } ) .Render() ) </div> </body> </html> using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace SamplesBrowser.Models { public class EmptyChartModel { } } using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using SamplesBrowser.Models; namespace SamplesBrowser.Controllers { public class ChartController : Controller { public ActionResult ProjectSchedule() { return View(); } } } |