Jak powiązać obiekt listy z Highcharts - (w widoku MVC)

0

Dane z modelu pod debuggerem są poprawnie wyświetlane w pętli, podczas gdy wykres się nie generuje. Wysyłam dwie Listy do modelu - Lista okresów i listę zamówień.

public class ChartsOrderViewModel
    {
        public List<DataInfo> ListPeriod { get; set; }
        public List<DataInfo> ListQuantity { get; set; }

    }

 public class DataInfo
    {
        public string Data { get; set; }
        public string Period { get; set; }
        public int Quantity { get; set; }



        public DataInfo()
        {
            this.Data = Data;
            this.Period  = Period;
            this.Quantity  = Quantity;


        }
    }

Controller

 public ActionResult ChartsOrder(ChartsOrderViewModel viewModel)
            {


                List<Order> listaZlecenUzytkownika = new List<Order>();
                List<DataInfo> ListaData = new List<DataInfo>();
                List<DataInfo> ListaDataPeriod = new List<DataInfo>();
                List<DataInfo> ListaDataQuantity = new List<DataInfo>();

                ArrayList xValue = new ArrayList();
                ArrayList yValue = new ArrayList();
                ArrayList ListaxValue = new ArrayList();
                listOrderUser = db.Zlecenia.OrderBy(w => w.IdUser).ToList();
                ListData = listOrderUser.OrderBy(p => p.DateOfAcceptance).Select(w => new DataInfo { Data = w.DateOfAcceptance.ToString().Substring(0, 7) }).ToList();
                ListDataPeriod = ListData.GroupBy(c => c.Data).Select(z => new DataInfo { Period = z.Key }).ToList();
                ListDataQuantity = ListData.GroupBy(c => c.Data).Select(z => new DataInfo { Quantity = z.Count() }).ToList();
                viewModel.ListPeriod = ListDataPeriod;
                viewModel.ListQuantity = ListDataQuantity;
               // viewModel.ListPeriod.ToList().ForEach(p => xValue.Add(p.Period));
               // viewModel.ListQuantity.ToList().ForEach(p => yValue.Add(p.Quantity));
            
                return View(viewModel);
            }

View

@model  AplikacjaHelpDesk.ViewModels.ChartsOrderViewModel  

    @{
        ViewBag.Title = "Charts";
        Layout = "~/Views/Shared/_LayoutAdmin.cshtml";
    }

    <script src="~/Scripts/Highcharts-4.0.1/js/highcharts.js"></script>
    <script src="~/Scripts/Highcharts-4.0.1/js/modules/exporting.js"></script>


    <h2>Charts Bar</h2>

    <div id="chartsBar" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
    <br />



    <script type="text/javascript">
        $(function () {
            $('#chartsBar').highcharts({
                chart: {
                    type: 'column'
                },
                title: {
                    text: 'Period orders'
                },
                subtitle: {
                    text: 'Chart'
                },
                xAxis: {
                    categories:
                  [
                   @foreach (var item in Model.ListPeriod)
                  {
                     @item.Period
                  }


                  ],
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Quantity'
                    }
                },
                tooltip: {
                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                        '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
                },
                plotOptions: {
                    column: {
                        borderWidth: 0

                    }
                },
                series: ({
                    name: 'Ilość',
                    data: [
                            @foreach (var item in Model.ListQuantity)
                                  {
                                      @item.Quantity
                                 }
                    ]
                })
            });
        });
    </script>

W jaki sposób powinny być wyświetlane dane w widoku, aby poprawnie wyświetlić wykres?. Na wykresie powinny być kolumny z liczbą zamówień w danym okresie. Proszę o przykład z kolekcją przekazywaną w MVC Highcharts.

0

Pewnie wymaga, aby pomiędzy liczbami w tablicy data były przecinki, a ten kod:

@foreach (var item in Model.ListQuantity)
{
    @item.Quantity
}

Raczej ci tego nie zapewni.

1 użytkowników online, w tym zalogowanych: 0, gości: 1