Chalalo Land

Tecnologías ASP.NET y un poco Más

Contacto

 Si quierer cooperar, yo feliz, muy agradecido :)

De donde me Visitan?

Locations of visitors to this page

Generic Content

Si te gustaron los articulos, y te animas te estaría muy agradecido!


Recent Posts

Tags

Community

Blogs de MVP

Amigos Geeks

Blogs Imperdibles

GODS

Archives

Email Notifications

Nuevo Control Chart - ASP.NET 3.5 - Ejemplo Práctico

Una muy buena noticia, de ahora en adelante tenemos un nuevo control de gráficos para nuestros websites construidos con ASP.NET. A mi parecer son los de Dundas, toda una nueva gamma de posibilidades para que nuestra capa de presentación sea de los más cool. (para poder realizar de una manera sencilla los dashboard que siempre impactan)

Puedes encontrar más detalles en:
http://thinkingindotnet.wordpress.com/2008/11/27/nuevo-control-de-aspnet/

Lo que nos convoca ahora es ver un ejemplo práctico (en la documentación esta todo lo que necesitas saber, aunque tiene algunos errores en el código de vb)

Paso 0- Instalar ASP.NET 3.5 Chart

  • Descargar los controles.
  • Descargar el soporte para VS 2008 para estos controles.
  • Descargar los ejemplos.
  • Descargar la documentación.
  • Visitar el foro.

    Paso 1 - Arrastrar el Control al WebForm

    Una vez instalado el control, podrás buscar el icono en la toolbox en el TAB DATA.

    image

    El gráfico por defecto es el siguiente:

    image

    Paso 2 - Customizar la visualización del gráfico

    Podemos cambiar el tipo de Gráfico desde la ventana que se nos expone en la propiedad "Series", hay bastantes tipos de gráficos, lo que es muy bueno!, te puede servir bastante los ejemplos, ya que puedes ver el aspx. En mi caso también modifiqué el estilo del marco.

    image

    Te dejo el ejemplo para que veas el código declarativo generado para el ejemplo

    Paso 3 - Código programático

    Hay varias maneras de hacer el binding, acá voy a mostrar una que en sencilla y extensible a varios escenarios

    PD: Recuerda importar
    Imports System.Web.UI.DataVisualization.Charting

    image

    Puedes ver en el código que se setean dos arreglos, de iguales dimensiones, y se asocian a la serie por default. En definitiva puedes programar todos las propiedades, en mi caso, agregué un dropdownlist para mostrar la característica de "Explode", la cual destaca el ítem seleccionado.

    Paso 4 - Probando...

    image

    Queda bastante bueno no?  Ahora imagina las posibilidades :)

    Paso 5 - Descarga el ejemplo.

    Descarga el proyecto para que lo pruebes, no olvides de instalar lo necesario (punto 0)

    http://cid-053a660afa3473b3.skydrive.live.com/self.aspx/P%c3%bablico/WebSite1.rar

    Espero que les ayude,

    Saludos,
    Gonzalo

    Get Microsoft Silverlight

    • Posted: 1/12/2008 23:25 por Gonzalo Perez | con 16 comment(s) |
    Archivado en: ,,
    Comparte este post:

    Comentarios

    Martin ha opinado:

    de una, esto es dundas, buenisimo !!!

    # December 4, 2008 5:29 PM

    jimmy ha opinado:

    Hola,en mi proyecto actual trate de usar los graficos del control chart y en desarrollo me funciona correctamente, pero cuando lo publico en el servidos IIS, me sale error: Invalid temp directory in chart handler configuration [c:\TempImageFiles\].

    Espero que me den una solucion,gracias

    # March 31, 2009 2:36 AM

    Gonzalo Perez ha opinado:

    Trata cambiando el Web.Config:

    de:    

    <add key="ChartImageHandler" value="storage=file;timeout=20;dir=c:\TempImageFiles\;" />

    a:

    <add key="ChartImageHandler" value="storage=file;timeout=20;" />

    Saludos,

    Gonzalo

    # March 31, 2009 3:15 PM

    Julian David Villegas ha opinado:

    Hola,

    Funciona con Web Developer? no quiero invertirle tiempo sin tener la certeza, los graficos se ven supuer geniales ademas es una herramienta que se require para darle vida a los proyectos de analisis de información.

    Gracias gonzalo, si funciona hago un post con un ejemplo en C# para aquellos que lo requieran. ¡Como yo jajaja!

    Saludos,

    Julian

    # July 30, 2009 4:40 PM

    Gonzalo Perez ha opinado:

    jajajaj debería funcionar, ya que es un ensamblado, podriás hacelo en C# y postearlo, cual es tu blog?

    # July 30, 2009 4:54 PM

    Julian David Villegas ha opinado:

    Colaboraré con tu blog e iniciaré el mio, por descuido y falta de tiempo no lo he creado.

    Saludos,

    Julian David

    # July 30, 2009 6:58 PM

    Juan ha opinado:

    Hola, soy nuevo en esto del web.config

    tengo todo funcionando en mi pc, pero en el servidor me da el error que comenta jimmy...

    Gonzalo da una solucion, pero la verdad no se en que parte del web.config debo colocarlo ya que no tengo nada de:

    <add key="ChartImageHandler" value="storage=file;timeout=20;dir=c:\TempImageFiles\;" />

    tengo otro codigo en el handlers:

        <add name="ChartImageHandler" preCondition="integratedMode" verb="GET,HEAD"

          path="ChartImg.axd" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />

    donde hago el cambio??

    Muchas Gracias,

    Juan

    # October 5, 2009 11:32 AM

    Egdar Alvarez ha opinado:

    Hola...gracias por el ejemplo..me guio bastante a lo k kieor hacer...uso asp.net con c# y pude hacer la grafica tipo PIE y tmb de otras formas pude hacer el tipo Column...lo que no me sale es como hacer el tipo BAR...porque me sale el error de que los tipos de graficos no son cmpatibles....Necesito el ejemplo del Stacked Bar...waaaa

    pero muchas gracias por el ejemplo...muy claro y preciso...

    saludos...

    # January 4, 2011 6:26 PM

    Gonzalo Perez ha opinado:

    Edgar, viste los ejemplos que vienen con la documentación? creo que ahí viene un ejemplo,y puedes ver el código.

    Saludos,

    g

    # January 5, 2011 1:59 PM

    Egdar Alvarez ha opinado:

    Hola de nuevo amigo...Gracias en verdad

    eres lo maximo

    ya pude resolver mi problema en C#

    obvio me marcaba error porque no son el mismo tipo de grafica y por tanto no se hacen igual XD

    gracias Gonzalo..sos un Genio..

    # January 5, 2011 4:43 PM

    Gonzalo Perez ha opinado:

    gracias por el comentario!!

    ejejjeje

    Saludos!

    Gonzalo

    # January 6, 2011 2:52 AM

    Jesus ha opinado:

    muy bueno el ejemplo, de casualidad tienes algo similar pero desde una base de datos? que el grafico se genere pasandole datos de la bd previsualizados en un grid... saludos

    # January 20, 2011 4:24 AM

    Blezka ha opinado:

    OMG eres el primero que encuentro con un ejemplo practico lo suficientemente explicado para no tener que recurrir a otras librerías!!!

    soy tan feliz que hasta les compartiré la equivalencia para C#

    using System.Windows.Forms.DataVisualization.Charting;

    public Charting()

    {

    double[] yValues = {3, 4.5, 2};

    String[] xValues = {"uno", "dos", "tres" };

    Chart1.Series[0].Points.DataBindXY(xValues, yValues); // también puede usarse como Chart1.Series["Default"]

    }

    el resto de las funciones también estan disponibles de forma muy similar a VB

    # January 21, 2011 8:50 AM

    Gonzalo Perez ha opinado:

    Gracias por el aporte Blezka!

    # January 21, 2011 12:59 PM

    Luz Sabina Martínez ha opinado:

    Hola, buenas tardes, el ejemplo esta muy bueno, solo tengo una duda, soy nueva en esta área de gráficas con silvertlight, ya tengo mis gráficas y todo bien, pero ahora mi duda es como poner etiquetas a ada  una de las gráficas.

    }

    Saludos y gracias por su ayuda

    # July 12, 2011 6:06 PM

    Gonzalo Perez ha opinado:

    Hola, primero que nada, estos graficos no son hechos con silverlight, se generan archivos png (es configurable) para desplegar el grafico en pantalla. Busca en la documentación sore las etiquetas, ya que varía generalmente por cada tipo de grafico.

    # July 13, 2011 7:32 AM