Comenzando a graficar con VB.Net y Fusion charts

seguramente has tenido la necesidad o simplemente curiosidad de realizar graficos en tu aplicacion, si quieres colocarle a tu programa llamativos graficos de barras o de tortas o porque no de linea de tiempos, pero ademas quieres que tus graficos tengan algun efecto, no quieres que sean estaticos, entonces deseas implementar flash cierto!, pero entonces te preguntas como rayos voy a graficar en vb.net usando flash en dichas graficas?, pues la respuesta es muy simple existe el paquete FusionCharts diseñado especialmente para lo que andas buscando, hacer graficas en flash…

muy bien, lo primero que hay que hacer, es crearnos un nuevo proyecto, para ellos abrimos nuestro vb.net y creamos un nuevo proyecto.

creacion de un nuevo proyecto

Listo! despues de haber creado el proyecto nos dirigimos a la barra de herramientas de vb.net y seleccionamos cualquier control, hacemos click derecho sobre el control y luego, en el menu desplegable que aparece seleccionamos la opcion que dice: Elegir elementos…

luego, nos aparecera una nueva ventana donde encontramos un listado de controles que se le pueden añadir al vb.net, estando en la ventana nos dirigimos a la pestaña que dice: Componentes COM y en el nuevo listado que aparece buscamos el componente llamado Shockwave Flash Object el cual se usa para cargar peliculas flash…

Eligiendo componente con de pelicula flash

muy bien ya tenemos el componente, ahora agreguemoslo al formulario, por si no lo encuentras buscalo en el cuadro de herramientas con el nombre de Shockwave Flash Object, posterior mente agregamos a nuestro formulario 1 boton, 1 combobox y 1 label; preparemos un diseño similar al que se ve en la imagen:

Diseño del formulario

algo importante que no hay que olvidar es tener a la mano el paquete fusion charts free y agregarlo a nuestro proyecto, para ello se puede bajar el componente desde la siguiente url: http://www.fusioncharts.com/free/download/, una vez descargado copiamos la carpeta que viene dentro llamada FusionCharts dentro de la carpeta debug del proyecto que estamos realizando:

carpeta fusion charts

y verificamos que en su interior contenga los archivos que son necesarios para generar las graficas, podemos observalor en la imagen:

archivos de fusion charts

bueno, pasando ahora si a la aplicacion que estamos haciendo, le agregamos al combobox 3 items llamados Barra, Linea y torta, los cuales corresponden a los tipos de graficos que elaboraremos, listo, ahora pasamos a programar nuestro boton, pero antes definamos algunas variales de tipo global…

Dim ruta_grafica As String

Dim cadena_xml As String

ok, ahora si programamos lo siguiente en el evento click de nuestro boton:

If (Me.ComboBox1.SelectedIndex = 0) Then   'preguntamos por si se ha seleccionado el indice 0 del combobox, es decir, la opcion Barras

ruta_grafica = "file:///" + Application.StartupPath + "\\FusionCharts\\FCF_Column3D.swf"

' en esta linea, definimos la ruta de la carpeta fusion chart atraves de la cual llamara las funciones para cada tipo de grafico, en este caso vamos 'a elaborar una grafica de barras.

ruta_grafica = ruta_grafica.Replace("\\", "/")

'aqui, reemplazamos el backslash por el slash ( / ) convencional...

cadena_xml = ruta_grafica +"?dataXML=<graph palette='4' caption='Venta de Vehiculos' subcaption='Para el ao 2011' xAxisName='Vehiculo' yAxisName='Cantidad' rotatelabels='1' slantlabels='1' showvalues='0' decimalPrecision='0' anchorSides='10' anchorRadius='3' anchorBorderColor='FF8000' numberPrefix='$' exportenabled='1' exportAtClient='1' exportHandler='fcExporter1' chartWidth='1000' exportFormats='PNG=Save as PNG' >"


luego, en esta linea, establecemos parametros para el xml a utilizar en la creacion de la grafica, se definen parametros como titulo, labels, tamaño, entre otros…


cadena_xml +=" <set name='Carro' value='5840' color='20C12B' />"

cadena_xml +="<set name='Moto' value='8700'/>"
cadena_xml +=" <set name='Bicicleta' value='9000' color='3D69F5'/>"


Posteriormente agregamos los datos que queremos graficar, en este caso colocamos nombre del vehiculo y luego la cantidad, tambien le definimos un color a nuestro gusto en hexadecimal.


cadena_xml +=" </graph>&registerwithjs=0"

por ultimo, finalizamos la cadena de nuestro xml y pasamos el string a nuestro objeto flash utilzado para mostrar la grafica:


AxShockwaveFlash1.Movie = 1    'hace que el control actualice o se refresque

AxShockwaveFlash1.Movie = cadena_xml   'carga la pelicula flash

End if

Listo, aqui esta explicado la forma para crear una grafica de barras paso a paso, ahora veamos que se debe hacer para la creacion de la grafica de linea y de torta respectivamente, pues basicamente es lo mismo, solo mira el codigo y compara:


If (Me.ComboBox1.SelectedIndex = 1) Then

ruta_grafica ="file:///" + Application.StartupPath + "\\FusionCharts\\FCF_Line.swf"

ruta_grafica = ruta_grafica.Replace("\\", "/")

cadena_xml = ruta_grafica +"?dataXML=<graph palette='4' caption='Venta de Vehiculos' subcaption='Para el ao 2011' xAxisName='Vehiculo' yAxisName='Cantidad' rotatelabels='1' slantlabels='1' showvalues='0' decimalPrecision='0' anchorSides='10' anchorRadius='3' anchorBorderColor='FF8000' numberPrefix='$' exportenabled='1' exportAtClient='1' exportHandler='fcExporter1' chartWidth='1000' exportFormats='PNG=Save as PNG' >"

cadena_xml +=" <set name='Carro' value='5840' color='20C12B' />"

cadena_xml +="<set name='Moto' value='8700'/>"

cadena_xml +=" <set name='Bicicleta' value='9000' color='3D69F5'/>"

cadena_xml +=" </graph>&registerwithjs=0"

AxShockwaveFlash1.Movie = 1

AxShockwaveFlash1.Movie = cadena_xml

EndIf

'---------------ahora elaboro la grafica de torta----------------

If (Me.ComboBox1.SelectedIndex = 2) Then

ruta_grafica ="file:///" + Application.StartupPath + "\\FusionCharts\\FCF_Pie3D.swf"

ruta_grafica = ruta_grafica.Replace("\\", "/")

cadena_xml = ruta_grafica +"?dataXML=<graph palette='4' caption='Venta de Vehiculos' subcaption='Para el ao 2011' xAxisName='Vehiculo' yAxisName='Cantidad' rotatelabels='1' slantlabels='1' showvalues='0' decimalPrecision='0' anchorSides='10' anchorRadius='3' anchorBorderColor='FF8000' numberPrefix='$' exportenabled='1' exportAtClient='1' exportHandler='fcExporter1' chartWidth='1000' exportFormats='PNG=Save as PNG' >"

cadena_xml +=" <set name='Carro' value='5840' color='20C12B' />"

cadena_xml +="<set name='Moto' value='8700'/>"

cadena_xml +=" <set name='Bicicleta' value='9000' color='3D69F5'/>"

cadena_xml +=" </graph>&registerwithjs=0"

AxShockwaveFlash1.Movie = 1

AxShockwaveFlash1.Movie = cadena_xml

End If


Facil verdad!, solo cambia la linea que especifica el tipo de grafica en la variable ruta_grafica  y asi se pueden ir generando nuevos tipos de graficas, a continuacion dejo las imagenes del programa en ejecucion donde se observa cada tipo de grafica:

1) grafica de barras

2) grafica de linea

3) grafica de Torta

Espero y les haya gustado este sencillo tutorial, mas adelante profundizaremos un poco explicando como graficar datos que vienen de una base de datos y la generacion de reportes que contengan a dichos graficos, si te interesa este ejemplo, puedes dejarme un comentario y lo subire a un servidor para su descarga… hasta la proxima!

Descargar programa

Anuncios

21 respuestas a “Comenzando a graficar con VB.Net y Fusion charts

  1. este ejemplo me ha sido de mucha ayuda, muchas gracias por tu aporte, me gustaria saber como aplicarlo a un aplicativo web (PHP, ASP o JSP) gracias…

  2. Amigo esta exelente el programa =) Quiero consultarte como hacer para graficar una linea de tiempo? Yo estoy recibo datos desde un microcontrolador por usb, veo los datos y con ellos quiero graficar. Desde ya muchisimas gracias me dejaste loco con el ejemplo jajajaja!

    • Que tal Djim Balck, espero y estes bien, respecto a lo que me dices que estas recibiendo datos desde un microcontrolador te aconsejo que no uses fusion charts en este caso ya que fusion charts agrega un efecto a la grafica cuando se va a generar y al estar recibiendo datos desde un puerto COM ubs, no vas a poder ver en si los datos que van llegando y por consiguiente graficar debido a que los datos van llegando a la velocidad en baudios que estes trasnmitiendo desde el microcontrolador y como te dije antes “la grafica se recargaria constantemente” y no veras una secuencia continua… en tu caso te recomiendo que uses mschart ya que las graficas no poseen efectos como las de fusion chart, revisa este tutorial, te puede servir:
      Graficar cualquier funcion usando Mschart

      tambien te puede interesar esta aplicacion que consiste en un electrocardiograma, recibe datos de un microcontrolador y los va graficando con Mschart, incluso puedes hacerle zoom a las lineas de tiempo.

      Descargar Electrocardiograma en vb.net

  3. Hola muy buen tutorial felicidades me interesa saber como puedo exportar las graficas a png o algun otro formato.. mi aplicacion esta vb 2008

    • hola, muy buena pregunta, para exportar la grafica a alguna imagen png o jpg debes utilizar la version paga de fusion charts, sin embargo existe una forma alternativa para guardar la imagen y es que recortes exactamente la parte de la grafica, la pases a un picturebox y luego la guardes como imagen; bueno ya habia hecho esa parte del export de la grafica en una aplicacion en vb.net, el link para que lo descargues es: Exportar Grafica de fusion charts

      en el programa hay 2 formas de exportar la imagen, la primera es haciendo clic derecho sobre la grafica y en el menu contextual escoges la opcion Save As PNG:
      guardar
      vemos que comienza a guardar la imagen:
      carga

      la otra forma consiste en presionar el boton recortar y automaticamente se recortara el area que ocupa la grafica en la pantalla. y se guardara en un archivo de imagen en la carpeta debug del proyecto, la imagen se llamara hola.jpg

      Recortar imagen

      Imagen guardado

      Nota: “el programa determina la posicion exacta de la grafica, por tanto si deseas cambiar la ventana de ubicacion el programa automaticamente determinara las coordenadas que encierran a la grafica para asi recortarla”

  4. Quetal felicidades, que buen tutorial, tengo que hacer un proyecto de mi curso de simulación Sobre una regresión lineal y exponencial es aconsejable usar esta herramienta o me recomienda otra, también me interesa sobre su utilización en una base de datos y en una página web. gracias esto es una gran ayuda.

  5. tengo una duda estoy trabajando esto y cuando quiero usar la grafica FCF_MSLine.swf me sale el mensaje “no data display” podrian ayudarme

    • Hola, cuando te aparece ese mensaje es porque no le estas pasando los datos de manera adecuada a la cadena para graficar, ademas debes tener en cuenta que el tipo de grafica FCF_MSLine.swf hace referencia al tipo “Multi serie Line” y son varias lineas que se van a graficar por tanto hay que especificar los valores a graficar para cada linea, tal vez de hay derive tu problema, intenta con FCF_Line.swf

  6. Hola chico!
    Muchas felicidades y gracias por compartir este ejemplo.
    La verdad la explicacion es muy facil de comprender 😀
    Solo tengo un problema, no puedo descargar la aplicacion, podrias ser tan amable de enviarme un linck donde lo pudiera desgargar.
    Por cierto, yo requiero hacer graficas para ambiente WEB en visual, se tendria q modificar algo??

    Saludos!!

  7. Excelente titurial, gracias x el aporte. En lo particular me gustaria saber cual el sl parametro que tengo que modificar o agregar al xlm para agrandar mas la grafica y como seria la instruccion para graficas mas de una serie.

    Gracias de antemano.

    Nota: Para los usuarios que andan buscando ejemplos de como crear el xml partiendo de datos de una tabla, les anexo el ejemplo, espero les sirva.

    Dim SQL As String
    Dim Myreader As OleDbDataReader
    Dim Command As OleDbCommand

    If dbConn.Connect_DB() = 0 Then
    SQL = “SELECT BOM_Engineer , COUNT (BOM_Engineer) NPI, CASE BOM_Engineer when ‘Luis.Hinojos’ THEN ‘FF0080’ when ‘Cesar.Escobedo’ THEN ’00FF00′ when ‘ALBERTO.LEAL’ THEN ‘800080’ when ‘JESUS.SEANEZ’ THEN ‘0000A0’ when ‘CARLOS.MORENO’ THEN ‘8D3DF5’ when ‘MARIO.SOLIS’ THEN ‘3D695’ when ‘JORGE.BETANCURT’ THEN ‘A10000’ END Color FROM Platforms WHERE Phase = ‘NPI’ and description not like ‘FGA%’ GROUP BY BOM_Engineer ”
    Command = New OleDbCommand(SQL, ioCon)
    Myreader = Command.ExecuteReader
    ruta_grafica = “file:///S:\Engineering\BOM_Tool_Application\\FusionCharts\\FCF_Column3D.swf”
    ‘ ruta_grafica = “file:///” + Application.StartupPath + “\\FusionCharts\\FCF_Column3D.swf”
    ruta_grafica = ruta_grafica.Replace(“\\”, “/”)
    cadena_xml = ruta_grafica + “?dataXML=”

    While (Myreader.Read)
    cadena_xml += ” ”
    End While
    Myreader.Close()

    cadena_xml += ” &registerwithjs=0″
    AxShockwaveFlash1.Movie = 1 ‘hace que el control actualice o se refresque
    AxShockwaveFlash1.Movie = cadena_xml ‘carga la pelicula flash

    End If

    • Muchas gracias por tu participacion compañero, y por compartir con todos tus conocimientos…
      saludos!

      con respecto a tus preguntas, para agrandar mas la grafica coloca dentro de la variable cadena_xml como parametro adicional de la grafica lo siguiente: chartWidth=’700′ chartHeight=’100′.

      para graficar mas de una serie debes usar otro tipo de grafica que sea multiserie, cuando descargues los archivos de fusioncharts encontraras unos llamados MSColumn3D, MSColumn3DLineDY, MSColumnLine3D, MSLine alguno de esos tipos de grafica te puede servir, intentalo.

  8. Hola amigos, una pregunta hice un programa en Vb.Net utilizando el mschart, este grafica los datos recibidos desde un PIC a traves del puerto serial, todo va bien, pero bueno ahora lo que necesito es contar los valores maximos de la grafica, es decir cuantos picos tiene la grafica, alguien me puede ayudar con eso??

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s