Hola a todos, hoy quiero mostrarles como es de sencillo crear un chart utilizando los helpers de Kendo UI para ASP.NET MVC, lo primero es referenciar la dll Kendo.Mvc:

referencia kendo

Luego los archivos JavaScript y CSS:

css.js.kendo

Creamos los bundles correspondientes en la clase BundleConfig:


bundles.Add(new ScriptBundle("~/bundles/kendo")
       .Include( "~/Scripts/kendo/kendo.all.min.js", 
          "~/Scripts/kendo/kendo.aspnetmvc.min.js")); 

bundles.Add(new StyleBundle("~/Content/kendocss")
       .Include( "~/Content/kendo.common.min.css", 
                 "~/Content/kendo.flat.min.css", 
                 "~/Content/kendo.dataviz.flat.min.css"));

Y los referenciamos en la sección head del layout:


@Styles.Render("~/Content/css") 
@Styles.Render("~/Content/kendocss") 
@Scripts.Render("~/bundles/modernizr") 
@Scripts.Render("~/bundles/jquery") 
@Scripts.Render("~/bundles/bootstrap") 
@Scripts.Render("~/bundles/kendo")

Ahora, un sencillo modelo:


public class Values 
{ 
    public int Id { get; set; } 
    public int Value { get; set; } 
    public DateTime Date { get; set; } 
}

Luego en el controlador retornamos una colección de elementos:


public class HomeController : Controller 
{ 
    private List<Values> values = new List<Values>() 
    { 
        new Values (){ Id = 1, Date = DateTime.Now, Value = 10}, 
        new Values (){ Id = 2, Date = DateTime.Now.AddMinutes(10), Value = 5}, 
        new Values (){ Id = 2, Date = DateTime.Now.AddMinutes(20), Value = 15}, 
        new Values (){ Id = 2, Date = DateTime.Now.AddMinutes(30), Value = 0}, 
        new Values (){ Id = 2, Date = DateTime.Now.AddMinutes(40), Value = 20} 
    }; 

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

Y finalmente la vista:


@using Kendo.Mvc.UI; 
@model IEnumerable 
@{ 
    ViewBag.Title = "Index"; 
} 

@(Html.Kendo().Chart(Model) 
    .Name("chart") 
    .Title("Kendo UI Chart") 
    .Legend(legend => legend .Position(ChartLegendPosition.Bottom)) 
    .ChartArea(chartArea => chartArea .Background("transparent")) 
    .SeriesDefaults(seriesDefaults => seriesDefaults.Line()) 
    .Series(series => 
    { 
        series.Line(model => model.Value)
              .Name("Cantidad") 
              .Labels(true) .Opacity(0.8); 
    }) 
    .CategoryAxis(
        axis => axis .Categories(model => model.Date) 
        .MajorGridLines(lines => lines.Visible(false)) 
    .Labels(labels => labels.Rotation(-90)) 
    .Date() 
    .BaseUnitStep(10) 
    .MinorGridLines(lines => lines.Visible(true))) 
    .Tooltip(tooltip => tooltip .Visible(true).Format("{0}")) 
)

En la vista hacemos uso del helper Html.Kendo().Chart(Model) y simplemente le pasamos el modelo que estamos usando, que en este caso es una colección de elementos, luego solo parametrizamos algunas propiedades del helper como el nombre (Name), el título (Title) entre otras…. y finalmente el resultado:

chart kendo

Espero les sea interesante, saludos!