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

Posted on


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

chart kendo

Espero les sea interesante, saludos!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s