Hola a todos, dentro de las novedades del Kendo UI Q2 2015, aparece una novedad interesante, y es la opción de usar Scaffolding para gráficas, así el tiempo necesario de implementación del Helper para Charts es reducido considerablemente y es tan sencillo con seguir unos cuantos pasos.


Para verlo en acción, partimos de un sencillo modelo como el siguente:


public class Sales
{
    public int Id { get; set; }

    public int Year { get; set; }

    public double Total { get; set; }
}

Luego un contexto válido de Entity Framework:


public class AppContext : DbContext
{
    public DbSet Sales { get; set; }
}

No te olvides de crear el inicializador de la base de datos e insertar algunos datos para la prueba. Ahora, en Controllers clic derecho Add -> New Scaffolded Item y allí seleccionamos Kendo UI Sacaffolder:

Kendo UI Scaffolder

Luego seleccionamos Kendo UI Chart:

Kendo UI Chart Scaffolder

En el siguiente paso del wizard, es momento de dar nombre al controller, seleccionar el modelo que se va a usar y el contexto de Entity Framework:

Kendo UI Chart Model Options

En chart options, es posible personalizar la generación del gráfico:

Kendo UI Chart Options

Listo, una vez finalizado el asistente, se crea el controlador y la vista correspondiente, el controlador ChartDemoController:


public class ChartDemoController : Controller
{
    private AppContext db = new AppContext();

    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Sales_Read()
    {
        return Json(db.Sales.Select(sales => new {
            Year = sales.Year,
            Total = sales.Total
        }));
    }

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

y la vista:


@(Html.Kendo().Chart<TelerikChartScaffolding.Models.Sales>()
      .Name("chart")
      .Title("Chart Demo")
      .Legend(legend => legend.Position(ChartLegendPosition.Top))
      .Tooltip(tooltip => tooltip.Visible(true))
      .DataSource(ds => ds.Read(read => read.Action("Sales_Read", "ChartDemo")))
      .Series(series => {
            series.Column(a => a.Total).Name("Total");
      })
      .CategoryAxis(axis => axis.Categories(model => model.Year))
)

Y claro, el resultado:

Kendo UI Chart Final

Espero el post les sea interesante, saludos!