Gantt Chart and Awesome Grid demo





Using the awesome grid and Google Gantt chart.
Data is ordered and paged on the server, after it is sent as json to the client, where we pass it to the gridModelBuilder and google Gantt chart.
GanttChart/Index.cshtml
@(Html.Awe().Grid("Meetings")
.DataFunc("getGridModel")
.Load(false)
.Height(350)
.Columns(
new Column{ Bind = "Id", Width = 100 },
new Column{ Bind = "Title"},
new Column{ Bind = "Start"},
new Column{ Bind = "End"}
))
<br/>
<br/>
<div id="chart_div" style="overflow: auto;"></div>

@section scripts
{
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', { 'packages': ['gantt'] });
google.charts.setOnLoadCallback(function() {
$('#Meetings').data('api').load();
});

// get grid data via ajax,
// parse data json dates to js dates,
// draw chart
// return grid model
function getGridModel(sgp) {
return $.when($.get('@Url.Action("GridData")', sgp)).then(function(res) {

awef.loop(res.page,
function (itm) {
// parse dates, in mvc5 itm.Start is a string like /Date(1624377600000)/
itm.Start = utils.toDate(itm.Start);
itm.End = utils.toDate(itm.End);
});

drawChart(res.page);

return buildGridModel(sgp, res);
});
}

// build model required by the grid
function buildGridModel(sgp, res) {
var gp = utils.getGridParams(sgp);

var opt = {
gp: gp,
key: "Id",
pageItems: res.page,
itemsCount: res.count,
map: function(itm) {
return {
Id: itm.Id,
Title: itm.Title,
Start: itm.StartStr,
End: itm.EndStr
}
}
};

return utils.gridModelBuilder(opt);
}

// draw chart using the given cdata
function drawChart(cdata) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task ID');
data.addColumn('string', 'Task Name');
data.addColumn('date', 'Start Date');
data.addColumn('date', 'End Date');
data.addColumn('number', 'Duration');
data.addColumn('number', 'Percent Complete');
data.addColumn('string', 'Dependencies');

var arr = [];
awef.loop(cdata, function (itm) {
arr.push([itm.Id.toString(), itm.Title, itm.Start, itm.End, null, 0, null]);
});

data.addRows(arr);

var options = {
height: data.getNumberOfRows() * 42 + 70,
width: data.getNumberOfRows() * 300
};

var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

chart.draw(data, options);
}
</script>
}
Demos/Grid/GanttChartController.cs
public async Task<IActionResult> GridData(GridParams g)
{
var data = mcx.Meetings.AsQueryable();

var gmb = new GridModelBuilder<Meeting>(g);

data = gmb.OrderBy(data);

var count = await data.CountAsync();

var page = (await gmb.GetPage(data).ToArrayAsync())
.Select(o => new
{
o.Id,
o.Title,
o.Start,
o.End,
StartStr = o.Start.ToShortDateString() + " " + o.Start.ToShortTimeString(),
EndStr = o.End.ToShortDateString() + " " + o.End.ToShortTimeString()
});

return Json(new { page, count });
}



Comments