Using Awesome Grid with google pie chart





Using the awesome grid and Google Pie chart.
GridChart/Pie.cshtml
<div class="bar">
<input type="text" placeholder="search..." id="txtSearch" />
</div>
@(Html.Awe().Grid("Garden")
.DataFunc("getGridModel")
.Groupable(false)
.Load(false)
.Paging(false)
.Height(350)
.Parent("txtSearch", "search")
.Columns(
new Column{ Bind = "Id", Width = 100},
new Column{ Bind = "Name"},
new Column{ Bind = "Value"}
))

<br />
<br />
<div id="chart_div" style="min-height: 500px"></div>

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

google.charts.setOnLoadCallback(function () {
$('#Garden').data('api').load();
});
});


// get grid data via ajax,
// draw chart
// return grid model
function getGridModel(sgp) {
return $.when($.get('@Url.Action("GetData")', sgp)).then(function(res) {
drawChart(res);

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

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

var opt = {
gp: gp,
pageItems: res,
itemsCount: res.length
};

return aweUtils.gridModelBuilder(opt);
}

// draw chart using the given cdata
function drawChart(cdata) {
var arr = [['Plant', 'Percentage']];

awef.loop(cdata, function (itm) {
arr.push([itm.Name, itm.Value]);
});

var data = google.visualization.arrayToDataTable(arr);

var options = {
title: 'My Garden'
};

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

chart.draw(data, options);
}
</script>
}
Demos/Grid/GridChartController.cs
public IActionResult GetData(GridParams g, string search)
{
var gmb = new GridModelBuilder<ChartItem>(g);
var query = items.AsQueryable();

if (!string.IsNullOrWhiteSpace(search))
{
query = query.Where(o => o.Name.IndexOf(search, StringComparison.InvariantCultureIgnoreCase) >= 0);
}

var data = gmb.OrderBy(query);

return Json(data);
}



Comments