graphique à barres simple Highcharts jQuery et application MVC 2?

Question

Je suis en train de créer un graphique à barres très simple en utilisant les résultats d'une méthode d'action JSon dans MVC. Je reçois le graphique à barres réelle, mais je ne comprends pas les options et tout ce qui assez bien, donc je devine essentiellement ce qu'il faut faire. J'ai utilisé l'exemple sur le site Highcharts comme un exemple pour savoir comment obtenir des données à partir du code serveur et créer un graphique. La différence est mon tableau est plus simple que l'exemple. Je ne vois pas de catégories pour chaque utilisateur (comme dans l'exemple de fruits), je ne dispose que d'un utilisateur et un certain nombre d'heures enregistrées.

Voici le code des Highcharts:

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

Et voici la méthode d'action de retour 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);
    }

j'ai pu créer un graphique circulaire, mais maintenant, quand je veux créer une simple barre, je ne suis pas en mesure de comprendre ce qui est ce que dans le code jQuery, donc les résultats que je reçois est un bar où avant tout le seul utilisateur figurant dans la légende est le dernier dans le tableau. En second lieu, les spectacles infobulle x = y = 29, au lieu de [nom de l'utilisateur] [nom de l'utilisateur]:. 29, que je suis arrivé dans le diagramme circulaire

Comment puis-je créer un graphique simple à barres Highcharts de ce JSon?

Answer 1

Eh bien, ça a marché moi-même après tout ... Je pensais que je devrais ce post en cas d'autres Highcharts me débutant comme se intéresse:

Voici le jQuery qui a fonctionné:

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

Si quelqu'un peut trouver des défauts dans ce domaine et me pointer vers une meilleure façon de le faire, je serai heureux main sur le crédit de réponse, sinon je vais accepter ma réponse ...

Answer 2

J'utilise:

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

Voir:

<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>

Donc, fondamentalement, j'utilise addPoint ( 'tableau de x, y', false pour ne pas redessiner le graphique)