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

julio 19, 2016 Christian Amado 0 Comentarios

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

Christian Amado