Einfacher Balkendiagramm in jQuery HighCharts und MVC 2-Anwendung?

Question

Ich versuche, eine sehr einfache Balkendiagramm mit den Ergebnissen einer JSon Aktionsmethode in MVC zu erstellen. Ich erhalte die eigentliche Balkendiagramm, aber ich verstehe nicht, die Optionen und das alles gut genug, so dass ich im Grunde bin zu raten, was zu tun ist. Ich benutzen das Beispiel auf der HighCharts Website als Beispiel dafür, wie Daten von Server-Code zu erhalten und ein Diagramm erstellen. Der Unterschied ist mein Diagramm einfacher als das Beispiel. Ich habe keine Kategorien für jeden Benutzer (wie in der Frucht Beispiel), ich habe nur einen Benutzer und eine Anzahl von Stunden protokollierten.

Hier ist der HighCharts jQuery-Code:

function getHighChart() {
            var actionUrl = '<%= Url.Action("GetChartData") %>';
            var customerId = $('#customersId').val();
            var startdate = $('.date-pickStart').val();
            var enddate = $('.date-pickEnd').val();

            var options = {
                chart: {
                    renderTo: 'chart-container',
                    defaultSeriesType: 'bar'
                },
                title: {
                    text: 'Statistik'
                },
                xAxis: {
                    categories: []
                },
                yAxis: {
                    title: {
                        text: 'Timmar'
                    }
                },
                series: []
            }
            jQuery.getJSON(actionUrl,
                        { customerId: customerId, startdate: startdate, enddate: enddate }, function (items) {
                            var series = {
                                data: []
                            };

                            $.each(items, function (itemNo, item) {
                                series.name = item.Key;
                                series.data.push(parseFloat(item.Value));
                            });

                            options.series.push(series);
                            var chart = new Highcharts.Chart(options);
                        });                        
        }

Und hier ist die Aktionsmethode Rückkehr JSon:

    public JsonResult GetChartData(string customerId, string startdate, string enddate)
    {
        int intcustomerId = Int32.Parse(customerId);

        var emps = from segment in _repository.TimeSegments
                   where
                       segment.Date.Date >= DateTime.Parse(startdate) &&
                       segment.Date.Date <= DateTime.Parse(enddate)
                   where segment.Customer.Id == intcustomerId
                   group segment by segment.Employee
                       into employeeGroup
                       select new CurrentEmployee
                       {
                           Name = employeeGroup.Key.FirstName + " " + employeeGroup.Key.LastName,
                           CurrentTimeSegments = employeeGroup.ToList(),
                           CurrentMonthHours = employeeGroup.Sum(ts => ts.Hours)
                       };
        Dictionary<string, double > retVal = new Dictionary<string, double>();
        foreach (var currentEmployee in emps)
        {
            retVal.Add(currentEmployee.Name, currentEmployee.CurrentMonthHours);
        }
        return Json(retVal.ToArray(), JsonRequestBehavior.AllowGet);
    }

Ich konnte ein Kreisdiagramm erstellen, aber jetzt, wenn ich möchte eine einfache Bar zu schaffen, ich nicht in der Lage bin, herauszufinden, was was im Code jQuery ist, so dass die Ergebnisse bekomme ich eine Bar, wo in erster Linie das einzige in der Legende angegeben Benutzer ist die letzte in der Anordnung. Zum anderen werden die Tooltip zeigt x = [Der Name des Benutzers], y = 29, statt [Der Name des Benutzers.]: 29, die ich in dem Kreisdiagramm bekam

Wie würde ich so ein einfaches Balkendiagramm in HighCharts dieser JSon erstellen?

Answer 1

Nun, ich war es aus mir doch ... Ich dachte, dass ich es bei Post sollte einige andere HighCharts Neuling wie mich interessiert:

Hier ist die jQuery, die funktioniert:

    function getHighChart() {
        var actionUrl = '<%= Url.Action("GetChartData") %>';
        var customerId = $('#customersId').val();
        var customerName = $('#customersId option:selected').text();
        var startdate = $('.date-pickStart').val();
        var enddate = $('.date-pickEnd').val();
        //define the options
        var options = {
            chart: {
                renderTo: 'chart-container',
                defaultSeriesType: 'column'
            },
            title: {
                text: 'Hours worked for ' + customerName
            },
            xAxis: {
                categories: [customerName]
            },
            yAxis: {
                title: {
                    text: 'Hours'
                }
            },
            series: []
        };

        //Calls the JSON action method
        jQuery.getJSON(actionUrl,
                    { customerId: customerId, startdate: startdate, enddate: enddate }, function (items) {

                        $.each(items, function (itemNo, item) {
                            var series = {
                                data: []
                            };
                            series.name = item.Key;
                            series.data.push(parseFloat(item.Value));
                            options.series.push(series);

                        });
                        var chart = new Highcharts.Chart(options);
                    });
    }

Wenn jemand Fehler in dieser finden und zeigen Sie mir einen besseren Weg, es zu tun, werde ich die Hand über die Antwort Kredit gerne, sonst werde ich meine eigene Antwort akzeptieren ...

Answer 2

ich benutze:

//Controller action:
public JsonResult GetData(int id)
{
Dictionary<int, double> data = this.repository.GetData(id);
return Json(data.ToArray(), JsonRequestBehavior.AllowGet);
}

Ausblick:

<script>
var chart1;    
$(document).ready(function () {
    chart1 = new Highcharts.Chart({
        chart: {
            renderTo: 'chart-container-1',
            defaultSeriesType: 'scatter',
             events: {
                load: requestData
            }
        },           
        options...
        ,
        series: [{
            name: 'some data',
            data: []            
        }]
    });
}
);

function requestData() {
    $.ajax({
        url: '/ControllerName/GetData?id=@(Model.Id)',
        success: function (items) {    
            $.each(items, function (itemNo, item) {
               chart1.series[0].addPoint([item.Key,item.Value], false);    
            });    
            chart1.redraw();
        },
        cache: false
    });
}    
</script>
<div id="chart-container-1"></div>

Also im Grunde verwende ich addPoint ( 'Array von x, y', false für nicht Diagramm neu gezeichnet)