[Tips] Gráficos con Ajax Control Toolkit–Release de Junio 2013

Hola que tal? si bien ya no es tan famosa como antes, debido a que tenemos una gran cantidad de plugins de jquery disponible, la suite de controles Ajax Control Tookit se sigue actualizando, con nuevos y mejorados controles. Uno que me llamó la atención por la facilidad de uso es el nuevo control Bar Chart, el cual permite crear gráficos de barra de una manera bastante sencilla.

Para el ejemplo voy a crear una App ASP.NET WebForm, y luego incluir la biblioteca de controles con NuGet (aunque recuerda que hoy en día, con el nuevo Visual Studio 2013 y ASP.NET 4.5 el concepto de ASP.NET en uno solo)

image

Luego agregamos los controles con Nuget

image

Una vez agregadas todas las referencias, voy a agregar en mi formulario un ToolkitScriptManager y el control BarChart

<ajaxToolkit:BarChart ID="BarChart1" runat="server"

   ChartHeight="300" ChartWidth="450" ChartType="Column"

   ChartTitle="Venta de Telefonos Lumia – Julio (Miles)"

   CategoriesAxis="620,720,820,920"

   ChartTitleColor="#0E426C" CategoryAxisLineColor="#D08AD9"

   ValueAxisLineColor="#D08AD9" BaseLineColor="#A156AB">

   <Series>

    <ajaxToolkit:BarChartSeries Name="EEUU" BarColor="#0404B4"

                 Data="110, 189, 255, 95" />

    <ajaxToolkit:BarChartSeries Name="Europa" BarColor="#FF8000"

                 Data="49, 77, 95, 68" />

   </Series>

</ajaxToolkit:BarChart>

Y el resultado (los datos son de prueba, los inventé):

image

Las Propiedades del Barchar son las siguientes

  • ChartHeight: Permite customizar el alto del gráfico.
  • ChartWidth: Permite customizar el ancho del gráfico.
  • ChartTitle: Setea el titulo del gráfico.
  • CategoryAxis: [Requerido] . Set de valores para setear los valores del eje de categorias para crear el gráfico de barras.
  • ChartType: Permite seleccionar entre diferentes tipos de gráficos de barra (Column, StackedColumn, Bar y StackedBar.)
  • Theme : Permite controlar la apariencia del gráfico mediante un archivo CSS.
  • ValueAxisLines: Esta propiedad le permite establecer el tamaño del intervalo de la línea de eje.
  • ChartTitleColor: Esta propiedad permite setear el color de la fuente del titulo del gráfico.
  • CategoryAxisLineColor:   Esta propiedad permite setear el color del la línea del eje de categorías.
  • ValueAxisLineColor: Este propiedad permite setear el color de las líneas del eje de los valores.
  • BaseLineColor: Este propiedad permite setear el color de las líneas  base del gráfico.

Propiedades de BarChartSeries:

  • Name – El nombre de la serie (requerida)
  • Data : Corresponde a la data  (Arreglo de decimales) de la serie.
  • BarColor : Permite setear el color del la barra de la serie.

En el ejemplo anterior vemos que utilizamos dos BarChartSeries, ahora vamos a probar algo sencillo de pero de manera programática. Para esto voy quitar las series y la propiedad CategoryAxis del código declarativo, luego , la declaración del control queda de la siguiente manera:

<ajaxToolkit:BarChart ID="Grafico" runat="server"

   ChartHeight="300" ChartWidth="450" ChartType="Bar"

   ChartTitleColor="#0E426C" CategoryAxisLineColor="#D08AD9"

    ValueAxisLineColor="#D08AD9" BaseLineColor="#A156AB">

</ajaxToolkit:BarChart>

Y el código programático para definir las series y configurar el gráfico:

protected void Button1_Click(object sender, EventArgs e)

{

   //Definimos el arreglo de Decimales

   decimal[] Datos1 = { 40m, 55m, 67m, 64.7m };

   decimal[] Datos2 = { 45m, 75m, 47m, 44.7m };

   Grafico.ChartTitle = "Total Ventas";

   Grafico.CategoriesAxis = "Limones, Naranjas, Platanos, Uvas";

 

   //Setear la Serie 1

   AjaxControlToolkit.BarChartSeries serie1 = new
                                       AjaxControlToolkit.BarChartSeries
();

   serie1.Name = "Market 1";

   serie1.Data = Datos1;

   serie1.BarColor = "#999999";

  

   //Setear la Serie 2

    AjaxControlToolkit.BarChartSeries serie2 = new
                                       AjaxControlToolkit.
BarChartSeries
();

    serie2.Name = "Market 2";

    serie2.Data = Datos2;

    serie2.BarColor = "#33FFFF";

   

    //Agregamos las series al gráfico

    Grafico.Series.Add(serie1);

    Grafico.Series.Add(serie2);

  

    //Hacermos el Binding

    Grafico.DataBind();

}

Luego al ejecutar el código y al presionar al botón veremos nuestro gráfico:

image

Como vez, bastante fácil y gratis Sonrisa, espero que te sirva!
Links:

@chalalo

Deja un comentario

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