Graph Highchart (column) from Linq query

Question

Graph Highchart (column) from Linq query

Navigation

#1 by (0 votes)

0

Although there are a lot of questions, I tried everything and every one of the examples but I can not make what I need work. First I ask the database to look for receipts issued during the year to be grouped by months: View where I choose the year

<form asp-action="GraficarPorPeriodo" method="post">
<div class="form-group form-inline">
    <div class="col-md-4">
        <label>Seleccione Período</label>
        <select class="form-control input-sm" asp-items="ViewBag.años" id="periodo" name="periodo"></select>
    </div>
</div>

<br />
<div class="form-group">
    <input class="btn btn-info" value="Graficar" type="submit" />
</div>

Then I execute the query:

public IActionResult GraficarPorPeriodo(string periodo)
    {
        var cuenta = (from r in _context.Recibos
                      where r.Tipo == "Recibo"
                      && r.Fecha.Value.Year >= Convert.ToInt32(periodo)
                      && r.Fecha.Value.Year <= Convert.ToInt32(periodo)
                      select r).GroupBy(g => g.Fecha.Value.Month).Select(x => new
                      {
                          Cuenta = x.Count()

                      });

        List<int> Lista = new List<int>();
        foreach (var item in cuenta)
        {
            Lista.Add(item.Cuenta);
            //Lista.Add(string.Concat(","));
            //ViewData["cuenta"] = Lista;


        }

        return View(Lista);

    }

And finally in the View I have the following:

$(document).ready(function () {
        $.getJSON("/Recibos/GraficarPorPeriodo", function (data) {
            Highcharts.chart('chart', {
                chart: {
                    type: 'column'
                },
                title: {
                    text: 'Recibos'
                },
                xAxis: {
                    categories: [
                        'Jun',
                        'Jul',
                        'Ago',
                        'Sep',
                        'Oct',
                        'Nov',
                        'Dic'
                    ],
                    crosshair: true
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Cantidad'
                    }
                },
                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: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                series: [{
                    name: 'Recibos',
                    data: data

                }]
            });
        });        

    });

With this I only get that the view has no graph. Try changing with return Json(Lista) and just show me the JSON results

[1,9,3]

Any advice? Thank you very much from now!

json linq asp.net-core

asked by German W 29.07.2018 в 05:17

source

1 answer

Problem using INSERT INTO ON DUPLICATE KEY UPDATE Windows does not recognize touch command

score 0 · Answer 1

I could solve it. I had the problem because in the same view I wanted to graricher I had the JSON result. So you create another method for the JSON results and the view is like any other:

Controller:

public IActionResult GraficarPorPeriodo(string periodo)
    {
        TempData["periodo"] = periodo;
        TempData.Keep();
        return View();
    }

I added a TempData to pass the selected period.

public IActionResult GetDataOpj ()
    {
        var periodo = TempData["periodo"];
        var cuenta = (from r in _context.Opjs
                      where (r.Presentacion.Value.Year >= Convert.ToInt32(periodo)
                      && r.Presentacion.Value.Year <= Convert.ToInt32(periodo)
                      )
                      select r).GroupBy(g => g.Presentacion.Value.Month).Select(x => new
                      {
                          Mes = x.Select(s => s.Presentacion.Value.Month).First(),
                          Cuenta = x.Count()

                      });

        return Json(cuenta);
    }

and in the View I am like this

<script>
    $(document).ready(function () {
        $.getJSON("@Url.Action("GetDataOpj", "Informes")", function (data) {
            var cantidad = new Array();
            for (i = 0; i < data.length; i++) {
                cantidad.push(data[i].cuenta);
                //console.log(cantidad);

            }
            var categoriax = new Array();
            for (i = 0; i < data.length; i++) {
                categoriax.push(data[i].mes);
                //console.log(categoriax);

            }

            Highcharts.chart('columnaopj', {
                chart: {
                    type: 'column'
                },
                title: {
                    text: 'Ordenes de Pago | Pedidas por mes'
                },
                xAxis: {
                    title: {
                        text: 'Mes'
                    },
                    categories: categoriax,
                    crosshair: true
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Cantidad'
                    }
                },
                tooltip: {
                    headerFormat: '<span style="font-size:10px">Mes {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: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                series: [{
                    name: 'Opj Pedidas',
                    data: cantidad

                }]
            });
        });

    });
</script>

It works perfectly.

Greetings.