free web hostingHosting24.com web hosting

Gráficos Estadísticos con PHP (+ FusionCharts)

En este simple ejemplo, vamos a ver como lograr un buen gráfico de barras con PHP y una excelente herramienta: fusionCharts.
Esta herramienta para gráficos estadísticos la puedes descargar desde su sitio oficial: en su versión trial.

El ejemplo trata de 4 variables (Anio1, Anio2, Anio3, Anio4), las cuales serán graficadas con sus respectivos valores. Al final de este pequeño tutorial encontrarán el ejemplo y el código fuente para descargarlo.

ACLARACION: En el tutorial encontrarán corchetes en vez de los signos Mayor y Menor.
Deben reemplazarlos por dichos signos para que el ejemplo funcione.

Ver el Ejemplo

- Empezamos incluyendo el archivo PHP para poder graficar:

include "FusionCharts.php";

Este archivo, viene con la versión trial de FusionCharts.
- Luego inicializamos las variables a utilizar. En este caso, asignamos valores a las variables que serán graficadas.

$intTotalAnio1 = 310;
$intTotalAnio2 = 440;
$intTotalAnio3 = 118;
$intTotalAnio4 = 145;

- Inicializamos también el string que guardará los parámetros para el gráfico.

$strXML = "";

- En la varible “$strXML”, concateno los parámetros que voy a utilizar para graficar.
Primero defino las propiedades generales para el gráfico.
caption: Título del gráfico.
bgColor: Color de fondo.
baseFontSize: Tamaño de fuente.
showValues: = 1 define que se mostrarán los valores en el gráfico. = 0 No se mostrarán los valores.
xAxisName: Descripción del eje X. También se puede introducir yAxisName.

$strXML = "[ chart caption = 'Ejemplo' bgColor='#CDDEE5' baseFontSize='12' showValues='1' xAxisName='Anios' ]";

Recuerden reemplazar los Corchetes por los signos Mayor y Menor.

- Ahora, defino lo que será graficado. En este caso son 4 barras.
set label: Indica el nombre de cada barra.
value: indica el valor de cada barra.
color: defino los colores de cada barra. Esto puedo omitir y dejar los colores por defecto.

$strXML .= "[ set label = 'Anio 1' value ='".$intTotalAnio1."' color = 'EA1000' ]";
$strXML .= "[ set label = 'Anio 2' value ='".$intTotalAnio2."' color = '6D8D16' ]";
$strXML .= "[ set label = 'Anio 3' value ='".$intTotalAnio3."' color = 'FFBA00' ]";
$strXML .= "[ set label = 'Anio 4' value ='".$intTotalAnio4."' color = '0000FF' ]";

Recuerden reemplazar los Corchetes por los signos Mayor y Menor.

- Cierro la etiqueta del string xml

$strXML .= "[/ chart ]";

- Finalmente, imprimo el gráfico. Llamo a la función renderChartHTML que se encuentra en el archivo “FusionCharts.php”, y le paso algunos parámetros como por ejemplo: la ruta y el nombre del archivo “swf” que contiene el gráfico, el string XML que contiene los parámetros, un identificador, el ancho y el alto, y el debug mode (en este caso false. No es importante, pero si desean probarlo pueden ponerlo a true).

echo renderChartHTML("Column3D.swf", "",$strXML, "ejemplo", 500, 400, true);

Al poner la opción “debugMode” en true, al graficar nos mostrará las características del gráfico, tamaño, string XML, idioma, versión, etc.

Ejemplo | Descarga Código fuente

También te puede Interesar

¿Disfrutaste esta entrada? Por qué no dejas un comentario abajo y continúas la conversación, o te suscribes a mi feed y obtienes artículos como este enviados a tu lector de feeds.

Comentarios

Mil gracias, simplemente espectacular!!!

las garfica esta muy bien pero tengo una duda.
Si quisiera poner dos gradicas en el mismo archivo como le prodria hacer=

Muchas gracias Adrian.
Edgar: Si querés mostrar 2 gráficos tenés que imprimirlo 2 veces. O sea, creás un 2do gráfico con sus respectivos parámetros y luego le dás “echo renderChartHTML”.

Podés mirar este otro tutorial:
http://micodigobeta.com.ar/?p=134

el ejemplo1 y el tuto 2 esta bien pero ahora quiero generar graficos a partir de una base de datos ejeemplo tengo registrado tantos vendedores y su venta ahora quiero ver sus ventas en todo el mes que vendedor vendio mas y hacer reportes
eso es trabajar con graficos si me pudieras ayudar con otro tutorial te lo agradeceria infinitamente

Ronald Guerra: Ya no voy a seguir publicando tutoriales sobre gráficos. Si tuvieras un mínimo conocimiento sobre PHP y MySql, lo que intentas hacer no sería problema.

Es básicamente esto:

1 – Te conectas a la BD
2 – Extraes los datos (Vendedor y Total)
3 – Asignas esos datos al gráfico:

set label=$vendedor value=$total

Saludos

hola no sbes cuanto busque tutoriales de graficos, que buen onda q la hayas puesto y no t molestes por las preguntas q t hacen si??? eres muy bueno en lo q haces, SACIAS!!!!!!!

jaja gracias Aby. No me enojo por nada che.
En el ejemplo se muestra como graficar con variables simples, comunes.
Para utilizarlo con datos de una base de datos, es lo mismo.
Basta con hacer una consulta y mostrar los datos.

Pudo haber sonado mal mi comentario pero no es la intención, por eso no lo borro, ni lo edito.

Saludos.

[...] [...]

Muy bueno tu aporte, de verdad, pero tengo un error y no entiendoo.

cuando ejecuto me dice “Invalid XML data” y segui tus pasos el pie de la letra, le rehice dos veces pero siempre lo mismo

este es el codigo q escribi, le cambie las variables pero dsp puse el mismo nombre q vos por si las moscas pero siempre igual…:S

$intTotalAnio1 = 310;
$intTotalAnio2 = 440;
$intTotalAnio3 = 118;
$intTotalAnio4 = 145;
$strXML = “”;
$strXML = “”;
$strXML .= “”;
$strXML .= “”;
$strXML .= “”;
$strXML .= “”;
$strXML .= “”;

echo renderChartHTML(“../../FusionCharts/Charts/Column3D.swf”, “”,$strXML, “ejemplo”, 500, 400, true);

no aparecio el codigo….

$strXML = “[ chart caption = 'Ejemplo' bgColor='#CDDEE5' baseFontSize='12' showValues='1' xAxisName='Anios' ]“;
$strXML .= “[ set label = 'Anio 1' value ='".$intTotalAnio1."' color = 'EA1000' ]“;

igual con los demas…

holas queria saber si se puede realizar un pdf con las graficas de fusuincharts, mi pagina genera graficas pero en php pero lo que quiero saber es como o que usar para generar el pdf de la grafica sale gracias

olas de nuevo si habra un ejemplo de como guardar la grafica de fusioncharts en pdf que se utiliza que librerias bueno me interesaria mucho saberrrrrr como guadar las graficas en pdf oooo en imagen .jpg sale grcias adios

Pablo: disculpá por la tardanza para responder.
Te voy a ayudar con el gráfico, pero te voy a pedir que me envíes el código completo. Comprimí los archivos que usás y enviámelo a sitiosweb_2006@yahoo.com.ar
Voy a resolverlo y te lo envío de nuevo.

alex: tambiés disculpá por la demora en responder. En cuanto a exportar en PDF, tuve inconvenientes con eso, ya que las películas de flash (los gráficos son SWF) no aparecen cuando lo exportás. Utilicé varias librerías de PHP para exportarlo pero no pude hacerlo con los gráficos.
Creo que la nueva versión de fusionchart tiene una herramienta para hacerlo, pero no tengo esa versión y desconozco el código.
Lo que podrías hacer es imprimirlo con una impresora virtual en formato PDF (PDF PRINTER), pero no es la mejor solución.

Saludos a ambos y felices fiestas.

Hola, super bueno tu material, pero sabes, probé hacer lo mismo con la ultima version del fusionChart Free, sin embargo no logré el resultado. Qué versión es la que utilizas para estos ejemplos? Saludos!

Hola preguntón.
Al final de cada tutorial están los códigos fuentes para descargar.
Descargalo y fijate si te funcionan.

hola anda todo bien
pero tengo un proble cuando quiero cargar el grafico,
con los datos q le estoy pasando solo me muestra un cuadro en blanco.
tenes ide
¿que podra ser?
agradeceria tu respuesta.

Lucas tengo que ver tu còdigo.
Envianos tu consulta en la parte de contactos.
Ni bien lo vea te ayudo.

Estimado Diego, pude generar gráficos dinámicos sin problemas!

Me alegro preguntón !!

Hola me ayudo un monton tu codigo en verdad, esta facil de entender, me salvo de una… seguire viendo por aqui a ver si puedo aprender mas de ti.
Gracias.

Gracias yor !!

Me Parece muy interesante este ejemplo lo has exo super piola men grax

Muy buen aporte viejo segui adelante !!!! y haber si publicas un tuto un poco mas complicado con mysql o postgres.saludos

Disculpa como ago para aliniar la imagen .. gracias

tienes informacion para incluir estas graficas en una aplicacion de flash por favor

Jose, no entiendo tu pregunta.
Si lo que quieres es alinear el gráfico podrías ponerlo dentro de un DIV, y lo alineas en donde quieras.

Emilton:

Para flash no lo tengo, pero en la demo de fusionChart podes encontrar como hacerlo. Tenes que leer la documentación.

Diego, espero estés bien, por acá de nuevo preguntando. Qué debo hacer para que el gráfico se guarde como jpg o pdf? hay una librería .js, que es la FusionChartsExportComponent, es necesario generar un script en javascript? Saludos!
Preguntón.

preguntón, no pude lograr exportar estos gráficos a PDF. Me parece que con la última versión de fusionchart se puede lograr eso.
Para exportarlo a jpg ni siquiera lo investigué.

Te recomiendo que leas la documentación en el sitio oficial:

http://www.fusioncharts.com/

necesito graficar unos cadros estadisticos. mi pregunta es que si se puede mostrar cualquier tipo de grafico o solo tipo barra?
tambien tengo que hacer cruces con varias variables de la base datos con diferentes tablas si tienes ejemplos te quedo agradecido soy de Galapagos y necesito ayuda urgente

Necesito crear una grafica lineal que muestre 2 lineas, los valores seran tomados de una base de datos, no se si alguno d ustedes tendra un ejemplo que me pueda proporcionar?

saludos;
muy buen post…lo implemente para una base de datos ….aqui el codigo para el que lo necesite…

$sql=mysql_query(“aki la consulta sql ke necesiten”);
while($row=mysql_fetch_assoc($sql))
{

$strXML .= “”;
// Cerramos la etiqueta “chart”.
}
$strXML .= “”;

$strXML .= “”;
// Cerramos la etiqueta “chart”.

me falto eso ……..saludos

$strXML .= “[et label = '" .$row['numero_orden'].”‘ value =’” .$row['cajas'].”‘ /]”;

Hace rato que no me hago de tiempo para leer los comentarios y escribir en el blog. Pido disculpas gente, pero tanto a Walter como a mi nos está costando hacernos de tiempo.

Para los gráficos pueden ingresar al sitio http://www.fusioncharts.com/ y descargar la demo. Allí mismo, en el sitio, encontrarán la documentación completa y con ejemplos para utilizar esta herramienta.

Además encontrarán todos los tipos de gráficos. Lineal, de barras, circulares, etc.

Deja un Comentario

(requerido)

(requerido)