Table of contents
ALM
MVC
TOC
Collapse the table of content
Expand the table of content

[ASP.NET MVC] Implementando el helper chart de Kendo UI

Microsoft Community Publishing Service|Última actualización: 26/05/2017
|
2 Colaboradores

Por Julio Cesar Avellaneda

Microsoft MVP ASP.NET

MCT | MCSD | MCTS

Core Group BDotNet

http://julitogtu.com

@julito

Descarga el código

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:

Luego los archivos JavaScript y CSS:

Creamos los bundles correspondientes en la clase BundleConfig:

C#

    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:

C#


    @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:

C#

    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:

C#

    @using Kendo.Mvc.UI;

    @model IEnumerable<KendoUIChartMvcWrapper.Models.Values>

    @{

    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:

Espero les sea interesante, ¡saludos!

© 2018 Microsoft