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 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<IEnumerable<SamplesBrowser.Models.GanttChartData>>" %> <%@ 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(Model) .ID("jqChart") .Width(500) .Height(300) .Title("Gantt Chart") .Animation(TimeSpan.FromSeconds(1)) .Legend(false) .Series(series => { series.Gantt() .XValues(el => el.ValueX) .FromValues(el => el.ValueFrom) .ToValues(el => el.ValueTo) .LabelValues(el => el.ValueLabel) .FillStyles(new object[] { "#418CF0", "#FCB441", "#E0400A", "#056492", "#BFBFBF" }) .Labels(el => el.FillStyle("White").Font("14px sans-serif")); } ) .Render()%> </div> </body> </html> @model IEnumerable<SamplesBrowser.Models.GanttChartData> @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(Model) .ID("jqChart") .Width(500) .Height(300) .Title("Gantt Chart") .Animation(TimeSpan.FromSeconds(1)) .Legend(false) .Series(series => { series.Gantt() .XValues(el => el.ValueX) .FromValues(el => el.ValueFrom) .ToValues(el => el.ValueTo) .LabelValues(el => el.ValueLabel) .FillStyles(new object[] { "#418CF0", "#FCB441", "#E0400A", "#056492", "#BFBFBF" }) .Labels(el => el.FillStyle("White").Font("14px sans-serif")); } ) .Render() ) </div> </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; } } } 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 GanttChart() { return View(GanttChartData.GetData()); } } } |