Gantt Chart and Awesome Grid demo

@(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 = aweUtils.toDate(itm.Start);
                        itm.End = aweUtils.toDate(itm.End);
                    });

                drawChart(res.page);

                return buildGridModel(sgp, res);
            });
        }
        
        // build model required by the grid
        function buildGridModel(sgp, res) {
            var gp = aweUtils.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 aweUtils.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>
}

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 });
}