none
Problemas con Chart y refresh RRS feed

  • Pregunta

  • Hola como va ?. Tengo un chart que consulto en la base asi

    el controller

    public IActionResult Bar()
            {
               
    
                var data = context.CargarResultado.Where(x => x.Categoria == "CONCEJAL").GroupBy(l => l.Partido)
                                          .Select(la =>
                                                new
                                                {
                                                    IdGrupo = la.Key,
                                                   
                                                    SumaCantidad = la.Sum(s => s.CantidadVotos),
                                                }).ToList();
    
                var lstModel = new List<SimpleReportViewModel>();
                foreach (var d in data)
                {
                    lstModel.Add(new SimpleReportViewModel
                    {
                        Partido = d.IdGrupo,
                        Cantidad = d.SumaCantidad
                    });
                }


    Luego la vista

    @model List<SimpleReportViewModel>
    @{
        var XLabels = Newtonsoft.Json.JsonConvert.SerializeObject(Model.Select(x => x.Partido).ToList());
        var YValues = Newtonsoft.Json.JsonConvert.SerializeObject(Model.Select(x => x.Cantidad).ToList());
        ViewData["Title"] = "Bar Chart";
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Bar</title>
    </head>
    <body>
        <div class="box-body">
    
            <div class="chart-container">
                <canvas id="chart" style="width:100%; height:500px"></canvas>
            </div>
        </div>
    </body>
    </html>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    
    <script type="text/javascript">
    
       $(function () {
          var chartName = "chart";
              var ctx = document.getElementById(chartName).getContext('2d');
                var data = {
                       labels: @Html.Raw(XLabels),
                        datasets: [{
                           label: "CONCEJAL",
                           backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)',
                            'rgba(255, 159, 64, 0.2)',
                            'rgba(255, 0, 0)',
                            'rgba(0, 255, 0)',
                            'rgba(0, 0, 255)',
                            'rgba(192, 192, 192)',
                            'rgba(255, 255, 0)',
                            'rgba(255, 0, 255)'
                           ],
                           borderColor: [
                            'rgba(255,99,132,1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 159, 64, 1)',
                            'rgba(255, 0, 0)',
                            'rgba(0, 255, 0)',
                            'rgba(0, 0, 255)',
                            'rgba(192, 192, 192)',
                            'rgba(255, 255, 0)',
                            'rgba(255, 0, 255)'
                           ],
                           borderWidth: 1,
                           data: @Html.Raw(YValues)
                        }]
                };
    
           var options = {
                         maintainAspectRatio: false,
                    scales: {
                        yAxes: [{
                               ticks: {
                                  min: 0,
                                  beginAtZero: true
                               },
                               gridLines: {
                                  display: true,
                                  color: "rgba(255,99,164,0.2)"
                               }
                        }],
                        xAxes: [{
                            ticks: {
                                min: 0,
                                beginAtZero: true
                            },
                            gridLines: {
                                display: false
                            }
                        }]
                    }
            };
    
                 var myChart = new  Chart(ctx, {
                        options: options,
                        data: data,
                         type:'bar'
    
                 });
       });
    </script>

    La primera consulta es que cuando se crea la vista abajo el titulo de pie solo me muestra el primero y el ultimo

    Y la otra pregunta es como haria para refrescar cada cierto tiempo o cuando ingresen un dato en la bd sql express, desde ya gracias

    martes, 4 de junio de 2019 18:54