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