javascript - parsing collection from .ajax result

Question

In my Data Access Layer, I have a class called Meter:

public class Meter {
    public String Substation { get; set; }
    public String Service { get; set; }
    public String Account { get; set; }
    public String Rate { get; set; }
    public String Customer { get; set; }
    public String Location { get; set; }
    public String SerialNumber { get; set; }
    public DateTime? Start { get; set; }
    public DateTime? End { get; set; }
    public int Count { get; set; }
}

and another class called Meters that is a collection of Meter:

public class Meters : List<Meter> {
    public Meters Subset(String service) {
        var result = new Meters();
        var data = this.Where(x => x.Service == service);
        result.AddRange(data);
        return result;
    }
    public Meters TopRate(int max = 10) {
        var result = new Meters();
        var data = this.OrderBy(x => x.AccountRate).ToArray();
        do {
            var item = data[result.Count];
            result.Add(item);
        } while (result.Count < max);
        return result;
    }
    public Meters TopSubstation(int max = 10) {
        var result = new Meters();
        var data = this.OrderBy(x => x.Substation).ToArray();
        do {
            var item = data[result.Count];
            result.Add(item);
        } while (result.Count < max);
        return result;
    }
}

In my ASP.NET MVC 4 Controller, I am getting this data in a JsonResult:

    public async Task<JsonResult> GetReport([DataSourceRequest] DataSourceRequest request, String serviceType = null) {
        var result = new DataSourceResult();
        _meters = new Domain.Meters();
        try {
            var report = await _portal.ReadGapReport(_reportID);
            if ((serviceType == "Electric") || (serviceType == "Gas") || (serviceType == "Water")) {
                _meters.AddRange(report.Subset(serviceType));
            } else {
                _meters.AddRange(report);
            }
            result = _meters.ToDataSourceResult(request);
        } catch (Exception err) {
            LoggerUtil.Error("ReadGapReport Error", err);
            result.Errors = err.Message;
        }
        return new JsonResult { Data = result, MaxJsonLength = Int32.MaxValue };
    }

This works great, and I see data in the Kendo Grid:

    @(Html.Kendo().Grid<DataAnalysis.Domain.Meter>()
    .Name("grid")
    .Columns(c => {
        c.Bound(o => o.Substation).Title("Substation");
        c.Bound(o => o.Service).Title("Service");
        c.Bound(o => o.Account).Title("Account");
        c.Bound(o => o.Rate).Title("Rate");
        c.Bound(o => o.Customer).Title("Customer");
        c.Bound(o => o.Location).Title("Location");
        c.Bound(o => o.SerialNumber).Title("Meter");
        c.Bound(o => o.Start).Title("Start");
        c.Bound(o => o.End).Title("End");
        c.Bound(o => o.Days).Title("Days");
    })
    .Sortable(o => o.SortMode(GridSortMode.SingleColumn))
    .Pageable(p => p.Enabled(false))
    .Resizable(resizable => resizable.Columns(true))
    .Scrollable(s => s.Endless(true))
    .ToolBar(x => x.Custom().Text("Export").HtmlAttributes(new { href = "#", id = "export" }))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("GetReport", "Report"))
        .Events(e1 => {
            e1.Error("onError");
        })
    )
    .AutoBind(false)
    .Events(e => e.DataBound("onDataBound")))

But, I need to collect and process summary information to display in HighlandChart.org pie charts.

In the databound event, how do I read the data to collect statistics?

function onDataBound(e) {
    var grid = $(hashId).data('kendoGrid');
    for (var i = 0; i < grid.columns.length; i++) {
        grid.autoFitColumn(i);
    }

    $.each(e, function (index) {
        console.log('data(' + index + ') = ' + e[index]);
    });

    var charts = { // chart id, title, chart type, data[], xAxis, yAxis
        1: ['piefigcontainer1', 'Meter Count per Substation (Top 10)', 'pie', []],
        2: ['piefigcontainer2', 'Meter Count per Feeder (Top 10)', 'pie', []],
        3: ['piefigcontainer3', 'Meter Count per Cycle (Top 10)', 'pie', []],
        4: ['piefigcontainer4', 'Meter Count per Rate (Top 10)', 'pie', []],
        5: ['barfigcontainer1', 'Meter Count per Gap Tier (in Days)', 'bar', [],
            [0, 10, 20, 30, 40, 50, 60, 70, 80],
            ['0 to 10', '10 to 100', '100 to 365', 'More than 365']
        ]
    };

    $.each(charts, function (key, value) {
        Highcharts.chart(charts[key][0], {
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: charts[key][2]
            },
            credits: { text: '' },
            title: { text: charts[key][1] },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: { enabled: true },
                    showInLegend: true
                }
            },
       });
    });
};

There is a small piece above where I tried going in to read the data returned:

    $.each(e, function (index) {
        console.log('data(' + index + ') = ' + e[index]);
    });

But, it appears to be returning all sorts of HTML and not the data that I expected.

I need to be able to collect data to display in Summary charts.

In the javascript, the idea was to populate the charts array with a push, but I am not getting the right data.

And, I don't know how to read specifics of the data, like the Substation or Customer fields.

Can this be done, am I going about it wrong, or did I create a design in C# that will not do what I want in the javascript?

question from:https://stackoverflow.com/questions/65942875/parsing-collection-from-ajax-result

Answer 1

Waitting for answers