Gráfico estadístico de lineas con php y pChart

En los posts anteriores hemos hecho algunos ejemplos de cómo usar la clase en php pChart, la cuál permite hacer gráficos estadísticos de apariencia profesional.

En esta ocación vamos a realizar un gráfico lineal, lo vamos a llamar desde otro archivo y junto con javascript le pondremos un buen efecto al pasar el cursor. Para ver el ejemplo termindao haz clic aquí. http://shampoo.byethost32.com/pChart-js/

Bien, para empezar, he preparado un comprimido con material de apoyo, incluye las librerias, los javascripts y el ejemplo a realizar:http://casinada.freetzi.com/?d=pChart-lineas.rar

Abrimos el archivo lineas.php que es el que va a generar la imagen; vamos a explicar el código.


<?php

if ( isset($_GET["Action"]) ) { $Action = $_GET["Action"]; } else { $Action = "Draw"; }
if ( isset($_GET["MapID"]) ) { $MapID = $_GET["MapID"]; }

// Incluimos las clases
include("pChart/pData.class");
include("pChart/pChart.class");

if ( $Action == "GetImageMap" )
{
$Test = new pChart(700,230);
$Test->getImageMap($MapID);
}

Las primeras lineas son para que trabaje correctamente con el javascript, en las siguientes incluimos las clases y en las que siguen le indicamos con que imagen va a trabajar el js, que es esta misma.

Para este ejmplo, haremos un gráfico que demuestre los libros vendidos en los primero 6 meses del año (lo siento, no se me ocurre nada más :P). Ahora definimos los datos:


// Definimos los datos
$Datos = new pData;
$Datos->AddPoint(array(10,20,30,25,25,40),"Libros Vendidos");
$Datos->AddPoint(array("Enero","Febrero","Marzo","Abril","Mayo","Junio"),"Meses");
$Datos->AddSerie("Libros Vendidos");
$Datos->SetAbsciseLabelSerie("Meses");
$Datos->SetYAxisName("Unidades vendidas");

Como vemos los datos se definen de igual forma que en los otros tipos de gráficos.

// Iniciamos el gráfico
$Test = new pChart(700,230);
$Test->setImageMap(TRUE,$MapID);
$Test->setFontProperties("Fonts/tahoma.ttf",8);
$Test->setGraphArea(65,30,650,200);
$Test->drawFilledRoundedRectangle(7,7,693,223,5,240,240,240);
$Test->drawRoundedRectangle(5,5,695,225,5,230,230,230);
$Test->drawGraphArea(255,255,255,TRUE);
$Test->drawScale($Datos->GetData(),$Datos->GetDataDescription(),SCALE_NORMAL,150,150,150,TRUE,0,2,TRUE);
$Test->drawGrid(4,TRUE,230,230,230,50);

Como vemos , el gráfico se inicia exactamente igual que en los otros ejemplos, pero le añadimos un nuevo método: $Test->setImageMap(TRUE,$MapID); , este le da los datos a js para que los ponga en el efecto.
// Dibujamos las lineas
$Test->drawLineGraph($Datos->GetData(),$Datos->GetDataDescription());
$Test->drawPlotGraph($Datos->GetData(),$Datos->GetDataDescription(),3,2,255,255,255);

// Dibujamos la leyenda
$Test->setFontProperties("Fonts/tahoma.ttf",8);
$Test->drawLegend(80,60,$Datos->GetDataDescription(),204,204,255);
$Test->Stroke();

Aquí hacemos lo mismo que en los otros ejemplos: dibujamos las lineas, dibujamos la "leyenda" y mostramos la imagen con Stroke();

Ahora vamos con el otro archivo, abrimos index.php, este no es necesario modificar ni una explicación muy detallada:

No voy aponer el código para no hacer muy largo el post, pero aquí va una explicación breve


Qué es lo hace todo este código?

Pues es muy simple, incluye los archivos js, con php genera un número aleatorio para el dódigo de la imagen y le especificamos que imagen leer.

Con esto hemos terminado los tutoriales sobre pChart. Les dejo otra vez el archivo ejemplo y el material de apoyo:

Ejemplo:http://shampoo.byethost32.com/pChart-js/

Material de apoyo: http://casinada.freetzi.com/?d=pChart-lineas.rar

Les invito a visitar http://pchart.sourceforge.net/, la página oficial de pChart, tiene otros ejemplos y una buena documentación.

Hasta la próxima!!!!