[UWP & Telerik – How To] Utilizar controles de Visualización de Datos

[UWP & Telerik – How To] Utilizar controles de Visualización de Datos

La parte más importante de una aplicación es la forma de visualizar los datos, es por eso que Telerik ha creado uno cuantos controles especiales para la visualización de datos.

Aquí veremos los controles Chart y Gauges que son representaciones de datos muy ricos en cuanto a lo visual se refiere. Aquí una imagen de ejemplo: 1

Chart

Se muestran distintos tipos de gráficos como ser barras, líneas, áreas, torta, etc. Para crear este tipo de gráfico podemos realizar los siguientes pasos.

Primero, como siempre, agregar las librerías de Telerik para UWP. Al mismo tiempo agregamos la referencia en nuestra página o control de usuario:


xmlns:telerik="using:Telerik.UI.Xaml.Controls.Chart"

Agregamos el control dentro del XAML de la página o control de usuario:


<telerik:RadCartesianChart/>

Aquí se complica un poco la definición de control, pues se debe declarar cada elemento en forma de árbol:


<telerik:RadCartesianChart>
<telerik:RadCartesianChart.HorizontalAxis>
<telerik:CategoricalAxis/>
</telerik:RadCartesianChart.HorizontalAxis>
<telerik:RadCartesianChart.VerticalAxis>
<telerik:LinearAxis/>
</telerik:RadCartesianChart.VerticalAxis>
</telerik:RadCartesianChart>

Como sabemos, se utiliza el plano cartesiano por lo tanto tenemos un eje X (Eje de categoría) y un eje Y (Eje de líneas). Ahora, dando un ejemplo mas práctico tendremos el siguiente código:


<telerik:RadCartesianChart x:Name="chart1">
<telerik:RadCartesianChart.HorizontalAxis>
<telerik:CategoricalAxis/>
</telerik:RadCartesianChart.HorizontalAxis>
<telerik:RadCartesianChart.VerticalAxis>
<telerik:LinearAxis/>
</telerik:RadCartesianChart.VerticalAxis>
<telerik:LineSeries ItemsSource="{Binding}"/>
</telerik:RadCartesianChart>

En el constructor de la clase podemos definir el siguiente código para mostrar un gráfico simple:


this.chart1.DataContext = new double[] { 20, 30, 50, 10, 60, 40, 20, 80 };

2

Gauge

Este control lo utilizamos para mostrar indicadores de todo tipo. Gracias a Telerik, cumplir con esta tarea es muy simple. Primero debemos agregar la referencia a la librería correspondiente:


xmlns:telerik="using:Telerik.UI.Xaml.Controls.DataVisualization"

Luego, agregamos el control a la página o control de usuario:


<telerik:RadRadialGauge LabelStep="60" TickStep="20" MaxValue="120" LabelRadiusScale="1.10" Width="200">
<telerik:ArrowGaugeIndicator Brush="Black" Thickness="3" ArrowTailRadius="2" Value="75"/>
</telerik:RadRadialGauge>

3

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.