November 01 2007
Gráficas con LibChart en PHP
NOTA: AL momento de re-escribir este artÃculo, me entere de la nueva versión de la librerÃa con soporte total para PHP5 y nuevos tipos de gráficas, aún asÃ, no ha cambiado en sus funciones básicas que son las que se explican aquÃ.
LibChart es es una lÃbrerÃa orientada a objetos de libre distribución y facilidad de uso que te ahorrara la difÃcil tarea de crear gráficas en tus aplicaciones Web. Todo lo que tienes que hacer, es bajarte la librerÃa, instalarla en tu aplicación y empezar a usarla. Entremos en detalle.
Instalar la librerÃa
Después de descargar la librerÃa, es necesario que está se descomprima y se coloque en un subdirectorio de nuestra aplicación, en mi caso, le he dejado el nombre de la librerÃa a la carpeta, solo para recordar que estoy haciendo.
Una vez subidos los archivos, deberás hacer lo siguiente:
- Otorga el permiso 555 a la carpeta que acabas de subir
- crea dentro de esa carpeta una subcarpeta donde se van a guardar las gráficas (se generan en formato .PNG) y ponle los atributos 777 (siempre puedes jugar con los permisos), en mi caso, le puesto demo como nombre a la carpeta
Creando gráficos
Al momento, LibChart, soporta gráficas de barras horizontales y verticales, circulares y gráficas de lÃneas, asà que tendremos que elegir cual vamos a crear, pero primero, en nuestras aplicaciones, incluyamos la librerÃa correspondiente (ver la nota el inicio de este artÃculo).
-
include "libchart/libchart.php";
Recordemos que debemos apuntar al nombre que le hayamos puesto a la carpeta de nuestra librerÃa. Con eso ya tenemos incluida la librerÃa, ahora vemos como crear una gráfico de barras horizontal
-
$chart = new HorizontalChart(500, 250);
Con barra verticales
-
$chart = new VerticalChart(500, 250);
Circular o de pastel
-
$chart = new PieChart(500, 250);
LÃneal
-
$chart = new LineChart(500, 250);
Se ve bastante fácil, por cierto, los parametros numéricos representan ancho y alto respectivamente, $ chart es el nombre que le hemos dado a nuestra variable la cual se deriva de las clases LineChart, VerticalChart, HorizontalChart y PieChart; lo siguiente, es añadir por supuesto el contenido de la gráfica.
-
$chart->;addPoint(new Point("Jan 2005", 273));
addPoint es un método que consiste en agregar un punto a nuestra gráfica, se instancia de la Clase Point, e incluye, el tÃtulo entre comillas y el valor necesario para poder representarlo, lo que quiere decir que podemos agregar tantos puntos como datos necesitemos representar. Ahora, como ya tenemos los datos, es importante colocarle un tÃtulo a nuestra gráfica, de otra forma ¿cómo sabremos que estamos ilustrando? setTitle se encarga de ello
-
$chart->setTitle("Este es el tÃtulo global de la gráfica");
Ahora que ya tenemos todo completo, hay que renderizar el gráfico y que se genere el archivo .png con nuestra gráfica
-
$chart->render("demo/demo2.png");
El método render le dice a donde vamos a depositar la gráfica, es importante como mencione al inicio que el directorio donde vamos a poner las gráficas generadas tenga el permiso 777 o 775, se que para los paranoicos de la seguridad esto es inaudito, pero vamos, hay mecanismos para ello, una recomendación es que no pongan sus gráficas sobre la raÃz de su servidor sino quieren llevarse sorpresas desagradables (por aquello de los hackers, crakers, lammers, script kiddies, etc). Lo último que queda por hacer, es simplemente mostrar la gráfica en nuestra aplicación, lo haré de la forma más sencilla posible
-
echo "<img src='demo/demo2.png' />";
Nada del otro mundo, ¿eh? si todo salió bien, ya tienen un perfecto sistema de generación de gráficas. Veamos el código completo de una gráfica y su visualización.
-
include "libchart/libchart.php";
-
$chart = new HorizontalChart(500, 170);
-
$chart->addPoint(new Point("Azul", 50));
-
$chart->addPoint(new Point("Rojo", 83));
-
$chart->addPoint(new Point("Verde", 142));
-
$chart->setTitle("Cual es tu color favorito?");
-
$chart->render("demo/demo2.png");
-
echo "<img src='demo/demo2.png' />";
Y las bases de datos, ¿qué?
SabÃa que se lo preguntarÃan, suponiendo que ya tenemos todo el código para la conexión de una base de datos, podemos tomar un ejemplo sencillo de como gráficar datos de alumnos de una determinada escuela.
-
include "libchart/libchart.php";
-
$chart = new HorizontalChart(500, 170);
-
$chart->setTitle("Promedio Grupal");
-
$sql = "select nombre, promedio from alumnos where semestre=2 and idgrupo=3";
-
if($registros==0)
-
echo "<p>No hay datos para gráficar</p>";
-
else
-
{
-
{
-
$chart->addPoint(new Point($datos["nombre"], $datos["promedio"]));
-
}
-
$chart->render("demo/demo2.png");
-
echo "<img src='demo/demo2.png' />";
-
}
Cuyo resultado serÃa:
¡Espero que les haya sido de utilidad!
Post Relacionados
- No related posts
Loading ...
Hola necesito ayuda para saber como otorgar los permisos a la carpeta libchart es decir el permiso 555 en windows xp home edition
Hola Luis José, el sistema de archivos de windows es diferente al de linux, bastará con solo otorgarle la propiedad de solo lectura.
Yo segui los pasos y en Windows me corren las graficas pero cuando la instalo en Linux no se ve la imagen, si pueden ayudarme porfavor enviame un email.
Gracias
Hola Dessire, mira en Linux la carpeta donde coloques los archivos debe ser propiedad de tu usuario y tener los permisos 777 para que libchart pueda crear los archivos de las gráficas.
Tengo una duda, ¿hay un parametro adicional para controlar o configurar los colores de las graficas?, gracias por su ayuda.
Hola queria dar las gracias por responder a la duda pero probe desde el servidor de linux otorgandole el permiso a la carpeta: chmod 777 /opt/lampp/htadocs/atlas/libchart y nada aun no veo la imagen de la grafica. Queria saber que otra cosa podemos pensar que sera la solucion.
Gracias
Nohé: Es una clase llamada Color.php, busca dentro de ese archivo
Dessiree: Revisa si no estás teniendo problemas con el usuario, en mi caso, yo me adueño de la carpeta de publicación web con mi usuario que originalmente pertenece a apache o wwwrun. Por cierto, ¿hace esto?
echo ” < img src = 'demo/demo2.png ' / > ” ;
Tines bien la ruta de la carpeta donde se guardan? revisa si se está creando el archivo…
Hola me gustaria verificar con ustedes si este tutorial de graficas sirve para php5
Gracias
Hola Dessire, la nota al inicio del artÃculo explique que si funciona igual
hola, queria saber como seteamos el maximo valor en el eje y, porque al parecer se hace automaticamente, pero yo no quiero eso, es decir, quiero configurar la escala a mi modo.
gracias