Gráficas en WPF

El gran volumen de datos que manejan las empresas en la actualidad, hace que la presentación de estos sea clara y concisa. Una de las herramientas para poder presentar los datos en Windows Presentation Foundation es la utilización de la librería que nos ofrece de forma gratuita el equipo de desarrollo de amCharts.

Una vez descargada dicha librería, esta nos permitirá la utilización de las distintas formas de presentación de los datos (barras,sectores,líneas,etc.) en Visual Studio 2008.

objetos_2_22090C8A

Para poder utilizar estas herramientas, creamos un nuevo proyecto WPF desde Visual Studio. Seguidamente nos situamos en la barra de herramientas de Visual Studio 2008, haremos clic con el botón derecho sobre ella y presionamos sobre la opción elegir elementos. En la ventana emergente, escogeremos la pestaña Componentes WPF,presionando el botón examinar tendremos la opción de seleccionar la ubicación de nuestra librería y así su posterior uso.

Ahora que tenemos los iconos correspondientes en la barra de herramientas, seleccionamos para empezar Pie Chart. Establecemos el área donde se va a realizar la presentación de nuestros datos. Al introducir dicha herramienta en el área de trabajo, en al área dedicada al código XAML, se introducirá el siguiente código:

<am:PieChart Height=»171″ Margin=»81,39,129,0″ Name=»pieChart1″ VerticalAlignment=»Top» />

El siguiente paso es añadir los diferentes sectores a nuestro control. Cada sector debe representarse mediante el siguiente código:

<am:Slice Title=»Mantenimiento» Value=»78″ />

Las propiedades que podemos usar en cada sector son el titulo y el porcentaje que va a ocupar dicho sector.Cada vez que añadamos un sector nuevo este será presentado

con un color diferente de forma automática, además aparecerá en la parte inferior del control la leyenda del mismo.

image_2_22090C8A

El siguiente control que podemos insertar es la representación de línea de datos.Esta se compondrá de una serie de valores unidos a través de una línea, el usuario podrá representar diversas líneas en función de las necesidades del mismo.

La representación como en el anterior caso se realizará o bien introduciendo el control desde la barra de herramientas o a través del editor Xaml del siguiente modo:

<am:LineChart Name=»lineChart1″>
            <!–Control lineal–>
            <am:LineChart.Graphs>
                <!–contenedor de las diferentes líneas de datos–>
                <am:LineChartGraph Title=»Chart #1″>
                    <!–Línea de Datos–>
                   <am:LineChartGraph.DataItems>
                        <!–cada uno de los valores que–>
                        <!–se representarán en la gráfica–>
                        <am:LineDataPoint SeriesID=»1″ Value=»1″ />
                        <am:LineDataPoint SeriesID=»2″ Value=»4″ />
                        <am:LineDataPoint SeriesID=»3″ Value=»6″ />
                        <am:LineDataPoint SeriesID=»4» Value=»5″ />
                        <am:LineDataPoint SeriesID=»5″ Value=»2″ />
                        <am:LineDataPoint SeriesID=»6″ Value=»4″ />
                        <am:LineDataPoint SeriesID=»7″ Value=»5″ />
                    </am:LineChartGraph.DataItems>
               </am:LineChartGraph>
            </am:LineChart.Graphs>
        </am:LineChart>

image_4_4FF65F42

La última representación de datos seria a través de columnas. Añadiremos nuevamente el control a través de la barra de herramientas o a través del editor de código Xaml introduciendo el siguiente código:

<am:ColumnChart Name=»ColumnChart1″>
            <!—Control de columnas–>
            <am:ColumnChart.Graphs>
                <!–contenedor de las diferentes columnas de datos–>
                <am:ColumnChartGraph=»Gastos2009″>
                    <!–columna de Datos–>
                   <am:ColumnChartGraph.DataItems>
                        <!–cada uno de los valores que–>
                        <!–se representarán en la gráfica–>
                        <am:ColumnDataPoint SeriesID=»1″ Value=»1″ />
                        <am:ColumnDataPoint SeriesID=»2″ Value=»4″ />
                        <am:ColumnDataPoint SeriesID=»3″ Value=»6″ />
                        <am:ColumnDataPoint SeriesID=»4» Value=»5″ />
                        <am:ColumnDataPoint SeriesID=»5″ Value=»2″ />
                        <am:ColumnDataPoint SeriesID=»6″ Value=»4″ />
                        <am:ColumnDataPoint SeriesID=»7″ Value=»5″ />
                    </am:ColumnChartGraph.DataItems>
               </am:ColumnChartGraph>
            </am:ColumnChart.Graphs>
        </am:ColumnChart>

 

 

image_6_4FF65F42

Como podemos ver, los diferentes controles de la herramienta utilizada , dan un toque diferenciado a la hora de la representación de los datos. Ahora solo queda jugar con esta herramienta a nuestro antojo.

Deja un comentario

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