0

no se de que forma podre realizar un grafico chart js, en c#, mvc, tengo mi tabla con todos los datos, pero solamente necesito, los nombre y diferencia de las columnas respectivas, abajo tengo un ejemplo con libreria chart.js, tengo un donde hay un ejemplo, mi duda de como puedo usar datos que estan en esa tabla de articulos, sacando los nombre de articulo1 y diferencia de cada uno, realizando un grafico respectivo. Eh averiguado, pero no encontrado resultados, solo ejemplos, pero el unico que se acerca es es el que essta en el index

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

@*<div class="row">
        <div class="col-lg-6">
            <div class="panel-heading"><b>Reporte</b></div>

            <div class="panel-body">
                <canvas id="myBarChart" width="100" height="50"></canvas>
            </div>
        </div>
    </div>*@

<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Codigo)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Articulo1)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Modelo)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Stock)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.inventario.Fisico)
        </th>
        <th>
            Diferencia
        </th>
        <th>
            @Html.DisplayNameFor(model => model.PrecioUnitario)
        </th>
        <th>
            Total
        </th>

        <th></th>
    </tr>


    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Codigo)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Articulo1)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Modelo)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Stock)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.inventario.Fisico)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Diferencia)              @*     @diferencia             se trae la variable stockarticulo para las diferencia de los valores*@
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.PrecioUnitario)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Total)@*@total*@
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id = item.Codigo }) |
                @Html.ActionLink("Details", "Details", new { id = item.Codigo }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.Codigo })
            </td>
        </tr>
    }
</table>

    @section scripts{
        <canvas id="myChart" width="500" height="500"></canvas>
        <script>
            var ctx = document.getElementById('myChart').getContext('2d');
            var myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ['Iron Man', 'Capitan America', 'Hulk', 'Thor', 'Viuda Negra', 'Ojo de Halcon'],
                    datasets: [{
                        label: '# de votos',
                        data: [2, 19, 3, 5, 2, 3],
                        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)'
                        ],
                        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)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                    }
                }
            });
        </script>
   } 

este es mi controlador, primera vez que empiezo con los graficos

public class articuloGraficoController : Controller
{
    private bdTiendaEntities db = new bdTiendaEntities();
    
    // GET: articuloGrafico
    public ActionResult Index()
    {
        var articulo = db.articulo.Include(a => a.inventario).Include(a => a.marca1);
        return View(articulo.ToList());
    }

    // GET: articuloGrafico/Details/5
    public ActionResult Details(string id)
    {
        if (id == null)
        {
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
        }
        articulo articulo = db.articulo.Find(id);
        if (articulo == null)
        {
            return HttpNotFound();
        }
        return View(articulo);
    }

    // GET: articuloGrafico/Create
    public ActionResult Create()
    {
        ViewBag.Codigo = new SelectList(db.inventario, "Codigo", "Codigo");
        ViewBag.Marca = new SelectList(db.marca, "Codigo", "Nombre");
        return View();
    }

    // POST: articuloGrafico/Create
    // Para protegerse de ataques de publicación excesiva, habilite las propiedades específicas a las que quiere enlazarse. Para obtener 
    // más detalles, vea https://go.microsoft.com/fwlink/?LinkId=317598.
    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create([Bind(Include = "Codigo,Articulo1,Descripcion,Modelo,Marca,Stock,PrecioUnitario")] articulo articulo)
    {
        if (ModelState.IsValid)
        {
            db.articulo.Add(articulo);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        ViewBag.Codigo = new SelectList(db.inventario, "Codigo", "Codigo", articulo.Codigo);
        ViewBag.Marca = new SelectList(db.marca, "Codigo", "Nombre", articulo.Marca);
        return View(articulo);
    }

    // GET: articuloGrafico/Edit/5
    public ActionResult Edit(string id)
    {
        if (id == null)
        {
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
        }
        articulo articulo = db.articulo.Find(id);
        if (articulo == null)
        {
            return HttpNotFound();
        }
        ViewBag.Codigo = new SelectList(db.inventario, "Codigo", "Codigo", articulo.Codigo);
        ViewBag.Marca = new SelectList(db.marca, "Codigo", "Nombre", articulo.Marca);
        return View(articulo);
    }

    // POST: articuloGrafico/Edit/5
    // Para protegerse de ataques de publicación excesiva, habilite las propiedades específicas a las que quiere enlazarse. Para obtener 
    // más detalles, vea https://go.microsoft.com/fwlink/?LinkId=317598.
    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Edit([Bind(Include = "Codigo,Articulo1,Descripcion,Modelo,Marca,Stock,PrecioUnitario")] articulo articulo)
    {
        if (ModelState.IsValid)
        {
            db.Entry(articulo).State = EntityState.Modified;
            db.SaveChanges();
            return RedirectToAction("Index");
        }
        ViewBag.Codigo = new SelectList(db.inventario, "Codigo", "Codigo", articulo.Codigo);
        ViewBag.Marca = new SelectList(db.marca, "Codigo", "Nombre", articulo.Marca);
        return View(articulo);
    }

    // GET: articuloGrafico/Delete/5
    public ActionResult Delete(string id)
    {
        if (id == null)
        {
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
        }
        articulo articulo = db.articulo.Find(id);
        if (articulo == null)
        {
            return HttpNotFound();
        }
        return View(articulo);
    }

    // POST: articuloGrafico/Delete/5
    [HttpPost, ActionName("Delete")]
    [ValidateAntiForgeryToken]
    public ActionResult DeleteConfirmed(string id)
    {
        articulo articulo = db.articulo.Find(id);
        db.articulo.Remove(articulo);
        db.SaveChanges();
        return RedirectToAction("Index");
    }

    protected override void Dispose(bool disposing)
    {
        if (disposing)
        {
            db.Dispose();
        }
        base.Dispose(disposing);
    }
}

1 respuesta 1

1

en tu seccion de puedes serializar el objeto (ya sea con JsonSerializer o con Newtonsoft ) e igualarlo a una variable de javascript con el helper @Html.Raw()

var valoresList = @Html.Raw(JsonSerializer.Serialize(Model));

y ya teniendo valoresList puedes utilizarlos como quieras para asignarlos en labels o datasets. Algo mas o menos asi.

var labelsList = @Html.Raw(JsonSerializer.Serialize(Model.Select(x=> x.Articulo1).ToList()))

var totalesList = @Html.Raw(JsonSerializer.Serialize(Model.Select(x=> x.Total).ToList()));
var ctx = document.getElementById('myChart').getContext('2d');
            var myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labelsList ,
                    datasets: [{
                        label: '# de votos',
                        data: totalesList ,
                        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)'
                        ],
                        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)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                    }
                }
            });
5
  • JsonSerializer, marca rojo , el nombre no existe en el contexto actual, hay que importar la libreria ? Commented el 9 jul. 2022 a las 21:15
  • y tambien para ver en caso solo los primeros 10 articulos, ? de que forma seria Commented el 9 jul. 2022 a las 21:28
  • JsonSerializer es parte de System.Text.Json, asi que lo tienes que llamar por System.Text.Json.JsonSerializer , si no esta tambien lo puedes agregar como dependencia. Tambien puedes usar newtonsoft, que esta en los nuggets, como Newtonsoft.Json.JsonConvert.SerializeObject Commented el 10 jul. 2022 a las 9:48
  • Para tomar 10 de la lista solo necesitas hacer un .Take(10) ya sea antes o despues del .Select() Commented el 10 jul. 2022 a las 9:50
  • ah dale compa, gracias, llegue a la solucion correcta gracias!!:) Commented el 11 jul. 2022 a las 13:55

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.