FlexChart
FlexChart
Gantt
Steps for getting started with the FlexChart to customize a GanttChart:
Initialize the chart (set the ChartType to 'C1.Web.Mvc.Chart.ChartType.Bar' and Bind to the data).
Features
Dependencies & Percent Complete
Customize the chart by setting its ItemFormatter property to a function that adds elements to show task dependencies and percent complete.
Description
Steps for getting started with the FlexChart to customize a GanttChart:
- Initialize the chart (set the ChartType to 'C1.Web.Mvc.Chart.ChartType.Bar' and Bind to the data).
- Add a series to the chart and set its binding property to the fields Start and End dates.
- Customize AxisY to hide the major grid and show minor grid.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | using Microsoft.AspNetCore.Mvc; using System; using System.Collections.Generic; using Task = MvcExplorer.Models.Task; namespace MvcExplorer.Controllers { public partial class FlexChartController { public IActionResult Gantt() { return View(GetTasks()); } private IEnumerable<Task> GetTasks() { var list = new List<Task>(); list.Add(new Task { Name = "Task1", Start = new DateTime(2017, 1, 1), End = new DateTime(2017, 3, 31), Parent = null, Percent = 100 }); list.Add(new Task { Name = "Task2", Start = new DateTime(2017, 4, 1), End = new DateTime(2017, 4, 30), Parent = "Task1", Percent = 100 }); list.Add(new Task { Name = "Task3", Start = new DateTime(2017, 5, 1), End = new DateTime(2017, 7, 31), Parent = "Task2", Percent = 75 }); list.Add(new Task { Name = "Task4", Start = new DateTime(2017, 4, 1), End = new DateTime(2017, 7, 31), Parent = "Task1", Percent = 33 }); list.Add(new Task { Name = "Task5", Start = new DateTime(2017, 8, 1), End = new DateTime(2017, 9, 30), Parent = "Task3,Task4", Percent = 0 }); list.Add(new Task { Name = "Task6", Start = new DateTime(2017, 10, 1), End = new DateTime(2017, 12, 31), Parent = "Task1,Task5", Percent = 0 }); list.Add(new Task { Name = "Task7", Start = new DateTime(2017, 1, 1), End = new DateTime(2017, 12, 31), Parent = null, Percent = 50 }); return list; } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 | @using Task = MvcExplorer.Models.Task; @model IEnumerable<Task> @{ var toolTip1 = FlexChartRes.GranttTooltip1; var toolTip2 = FlexChartRes.GranttTooltip2; } @(Html.C1().FlexChart<Task>().Id("simpleGantt") .Bind(Model) .Header(FlexChartRes.SimpleGanttChartHeader) .BindingX("Name") .AxisY(y => y.MajorGrid(false).MinorGrid(true).Reversed(true)) .ChartType(C1.Web.Mvc.Chart.ChartType.Bar) .Series(sb => sb.Add().Binding("Start,End")) .Tooltip(t => t.Content(toolTip1)) ) <br /> <h4> @Html.Raw(FlexChartRes.EnhancedGanttChartTitle) </h4> <p>@Html.Raw(FlexChartRes.EnhancedChart_Description)</p> @(Html.C1().FlexChart<Task>().Id("advancedGantt") .Bind(Model) .Header(FlexChartRes.EnhancedGanttChartHeader) .BindingX("Name") .AxisY(y => y.MajorGrid(false).MinorGrid(true).Reversed(true)) .ChartType(C1.Web.Mvc.Chart.ChartType.Bar) .Series(sb => sb.Add().Binding("Start,End")) .Tooltip(t => t.Content(toolTip2)) .ItemFormatter("ganttItemFormatter") .OnClientRendering("ganttChartRendered") ) @section Description{ <h4> @Html.Raw(FlexChartRes.SimpleGanttChartTitle) </h4> <ol> <li>@Html.Raw(FlexChartRes.SimpleChart_Step1)</li> <li>@Html.Raw(FlexChartRes.SimpleChart_Step2)</li> <li>@Html.Raw(FlexChartRes.SimpleChart_Step3)</li> </ol> } @section Scripts{ <script type="text/javascript"> // show the percentage complete for each task function ganttItemFormatter(engine, hti, defaultFormatter) { // draw the item as usual defaultFormatter(); // show percentage done var task = hti.item; if (wijmo.isNumber(task.Percent) && task.Percent > 0) { var pct = wijmo.clamp(task.Percent, 0, 100) / 100, rc = getTaskRect(hti.series.chart, task).inflate(-8, -8); engine.fill = pct == 1 ? 'green' : 'gold';//engine.stroke; engine.drawRect(rc.left, rc.top, rc.width * pct, rc.height); } } // show the task dependencies function ganttChartRendered(s, e) { var chart = s, tasks = chart.collectionView.items; tasks.forEach(function (task) { // for each task var parents = getTaskParents(task, tasks); // get the parent tasks parents.forEach(function (parent) { // for each parent drawConnectingLine(e.engine, chart, task, parent); // draw connector }); }); } function drawConnectingLine(engine, chart, task, parent) { var rc1 = getTaskRect(chart, parent), // parent rect rc2 = getTaskRect(chart, task), // task rect x1 = rc1.left + rc1.width / 2, // parent x center x2 = rc2.left, // task left y1 = rc1.bottom, // parent bottom y2 = rc2.top + rc2.height / 2; // task y center // draw connecting line var xs = [x1, x1, x2], ys = [y1, y2, y2]; engine.drawLines(xs, ys, 'connector', { stroke: 'black' }); // draw arrow at the end var sz = 5; xs = [x2 - 2 * sz, x2, x2 - 2 * sz]; ys = [y2 - sz, y2, y2 + sz]; engine.drawPolygon(xs, ys, 'arrow', { fill: 'black' }) } function getTaskRect(chart, task) { var x1 = chart.axisX.convert(task.Start), x2 = chart.axisX.convert(task.End), index = chart.collectionView.items.indexOf(task), y1 = chart.axisY.convert(index - .35), y2 = chart.axisY.convert(index + .35); return new wijmo.Rect(x1, y1, x2 - x1 + 1, y2 - y1 + 1); } function getTaskParents(task, tasks) { parents = []; if (task.Parent) { task.Parent.split(',').forEach(function (name) { for (var i = 0; i < tasks.length; i++) { if (tasks[i].Name == name) { parents.push(tasks[i]); break; } } }); } return parents; } </script>} |