Gráficos Estadísticos con PHP + FusionCharts II
Segundo tutorial de Gráficos Estadísticos con PHP y Fusioncharts.
Veremos como crear Gráficos Maestro/Detalle. Por ejemplo: a partir de un gráfico de barras, obtener otro gráfico detalle.
Click aquí para ver el Ejemplo:
Para esto, vamos a seguir con el ejemplo del tutorial anterior (Graficos estadisticos con PHP).
La estructura del directorio es la siguiente:
Carpeta “funciones_php”: contiene el archivo “FusionCharts.php”, necesario para graficar.
Carpeta “graficos”: contiene los archivos “grafico1.php” y “grafico2.php” (Maestro/Detalle).
Carpeta “swf_charts”: contiene los archivos “Column3D.swf” y “Pie3D.swf” (para graficar).
Carpeta “js”: contiene el archivo “ajax.js”, necesario para pasar parámetros.
Archivo “contenedores_divs.php”: archivo inicial.
Idea General:
Tendremos un archivo que contendrá 2 DIVs. Uno con ID “maestro_chart” y otro con ID “detalle_chart”.
El DIV “maestro_chart” estará visible desde el principio y contendrá al gráfico 1 (gráfico maestro).
El DIV “detalle_chart” no estará visible al principio. Se visualizará cuando se lo requiera, desplegando el gráfico detalle.
Al abrir el archivo inicial (contenedores_divs.php) se desplegará el primer gráfico (de barras), el cual tendrá “links” para visualizar el gráfico detalle (circular o de torta).
El archivo inicial es “contenedores_divs.php”: Este archivo contiene los DIVs explicados anteriormente. También incluyo el archivo javascript necesario(ajax.js).
Al principio, se desplegará el gráfico 1 (gráfico maestro).
<html>
<head>
<title>Ejemplo Grafico Estadistico II: PHP + FusionCharts </title>
<script language="JavaScript" type="text/javascript" src="js/ajax.js"></script>
</head>
<body>
<table>
<tr>
<td>
<div id="maestro_chart">
<?php include("graficos/grafico1.php"); ?>
</div>
</td>
<td>
<div id="detalle_chart" style="display:none;"></div>
</td>
</tr>
<tr>
<td>
Click en el gráfico 1 para ver el detalle.<br>
Los datos del Grafico detalle dependeran de la barra<br>
seleccionada en el grafico maestro.
</td>
</tr>
</table>
</body>
</html>
Primer gráfico (maestro). Archivo “grafico1.php”: No se explicará todo este archivo, debido a que en el tutorial anterior ya fue explicado detalladamente. Además, en los archivos fuentes, podrán encontrar el código muy bien comentado.
Solo explicaré la parte nueva del código.
Creando los enlaces.
Recordemos que nuestro gráfico contará con 4 barras (Anio1, Anio2, Anio3 y Anio4). Cada uno tendrá un enlace hacia su respectivo gráfico detalle.
En este caso se llama a una función javascript “detalleAnios” (ubicado en el archivo ajax.js) y se le pasan 3 parámetros: Anio correspondiente (título), valor del semestre 1 y valor del semestre 2.
Aclaración: La suma de los valores del semestre 1 y semestre 2 es igual al valor total del año seleccionado.
$linkAnio1 = urlencode("\"javascript:detalleAnios('Anio 1', '210', '100');\"");
$linkAnio2 = urlencode("\"javascript:detalleAnios('Anio 2', '175', '265');\"");
$linkAnio3 = urlencode("\"javascript:detalleAnios('Anio 3', '74', '44');\"");
$linkAnio4 = urlencode("\"javascript:detalleAnios('Anio 4', '50', '95');\"");
Una vez armado los enlaces, ya solo queda por asignar a cada barra:
$strXML .= "<set label = 'Anio 1' value ='".$intTotalAnio1."' color = 'EA1000' link = ".$linkAnio1." />"; $strXML .= "<set label = 'Anio 2' value ='".$intTotalAnio2."' color = '6D8D16' link = ".$linkAnio2." />"; $strXML .= "<set label = 'Anio 3' value ='".$intTotalAnio3."' color = 'FFBA00' link = ".$linkAnio3." />"; $strXML .= "<set label = 'Anio 4' value ='".$intTotalAnio4."' color = '0000FF' link = ".$linkAnio4." />";
El resto del archivo “grafico1.php” está explicado anteriormente.
Archivo “ajax.js”: Este archivo es el encargado de recibir los parámetros enviados por el primer gráfico (anio, valor semestre1, valor semestre2). Luego de recibir estos parámetros, los envía al archivo “grafico2.php” para que los procese y grafique. Una vez procesados estos datos, se desplegará en pantalla el detalle, en el DIV “detalle_chart” que ahora si será visible.
Se comienza creando el objeto “xmlhttp”:
// Creación del objeto
function objetoAjax(){
var xmlhttp=false;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
// Función que recibe los parámetros enviados por grafico1.php, desde los enlaces de cada barra.
// Envía esos datos a grafico2.php para que los procese.
// Una vez procesados esos datos, se despliega en pantalla el gráfico detalle en el DIV "detalle_chart" haciendose ahora visible.
function detalleAnios(anio, semestre1, semestre2) {
detalleDiv = document.getElementById('detalle_chart');
detalleDiv.innerHTML = "";
ajax = objetoAjax();
ajax.open("POST", "graficos/grafico2.php");
ajax.onreadystatechange = function() {
if(ajax.readyState == 4) {
detalleDiv.innerHTML = ajax.responseText
detalleDiv.style.display="block";
}
}
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.send("anio="+anio + "&semestre1="+semestre1 + "&semestre2="+semestre2)
}
Segundo gráfico (detalle). Archivo “grafico2.php:
Incluimos la Librería necesaria para graficar:
include '../funciones_php/FusionCharts.php';
Obtengo los datos enviados por la función javascript e inicializo $strXML:
$titulo = $_POST['anio']; $semestre1 = $_POST['semestre1']; $semestre2 = $_POST['semestre2'];
Concateno los parámetros que voy a usar para graficar.
Defino las propiedades generales para el gráfico:
$strXML = "<chart caption = 'Grafico 2: Detalle ".$titulo."' bgColor='#CDDEE5' baseFontSize='12' >";
Ahora defino lo que será graficado.
En este caso, serán solo dos variables. O sea, será un gráfico circular con dos “porciones” ($semestre1 y $semestre2):
$strXML .= "<set label = 'Semestre 1' value ='".$semestre1."' />"; $strXML .= "<set label = 'Semestre 2' value ='".$semestre2."' />";
Cierro el string $strXML:
$strXML .= "</chart>";
Y finalmente grafico.
echo renderChartHTML("swf_charts/Pie3D.swf", "",$strXML, "detalle", 350, 350, false);
En este tutorial no he explicado en detalle los parámetros para los gráficos por cuestiones de tiempo espacio.
Pueden ver eso en el aterior ejemplo, en donde está bien detallado cada línea del código.
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
Amigo…. una pregunta …
si me podes colaborar..
como podria colocarlos titulos de las columnas eje x de manera que cuando estos sean muy largos me queden a 45 grados su posicion o 90 grados….
gracias…
Hola que tal, la información que brindaste es muy buena, gracias por eso…ahora te presento una duda para ver si me puedes ayudar, yo necesito hacer un Multi-Series Chart XML, que compare varios datos de una tabla..me explico a un id le pertenecen varias cantidades según una fecha, hasta el momento con un solo conjunto de datos de un id lo e logrado
…
$strXML.= “”;
…
, sin embargo no encuentro la manera de comparar esto con otro conjunto de datos del mismo id..ya q si repito esta linea con el otro conjunto de valores no llega al resultado que espero,
…
$strXML.= “”;
…
No se si me puedas ayudar un poco..igual muchas gracias y saludos desde Venezuela
ahh se me olvido mencionar..estoy trabajando con php consultando datos de una tabla en mysql..noc si sea relevante pero por si acaso..hasta luego..gracias de nuevo.
Muy interesante amigo,quisiera tambien realizar grafica de linea, como consigo los archivos, asi como el Pie3D.SWF que es el pastel, por ejemplo tengo un sistema que esta en PHP y la base de datos en POSTGREs, como enlazar los reportes estadisticos que me va a generar.GRACIAS espero su ayuda.
Una pregunta: una vez obtenido el gráfico, cual es metodo mas practico para imprimir el grafico obtenido? estoy trabajando con PHP y MySQL.
Gracias!!!
Hola que tal, nuevamente yo, con la info que publicaste creeme que me has ayudado un monton, y ahora estoy montado en una grafica muy parecida a este maestro detalle, la diferencia es que mi maestro en un char combinado, es uno que combina uno de barra con uno de lineas, y el detalle uno multiserie, pero tengo dos cosas que me tienen bloqueado, primero por mas q busco aun no tengo el swf de ese grafico en particular, solo tengo el q combina multiserie con lineas, y el multiserie, si por casualidad lo tienes te estaria agradecidisimo y dos si tienes algun ejemplo de eso,,, se q es mucho pedir pero bue..asi todos aprendemos algo nuevo…igual son graficos a consultas de base de datos
Estimado.
Primero que nada felicitaciones por tu blog, esta muy bueno.
Mi consulta es:
¿como puedo generar una funcion que me actualize el grafico segun una consultaa traves de ajax?
Gracias por responder tan rapido.
Imaginate que hay un combo con:
empresa 1
empresa 2.
Al seleccionar un combo me muestra la tabla en un campo id (esto es a traves de ajax).
Lo que necesito es ademas de mostrar la información es graficar los datos procesados.
Muchas gracias por tu pronta respuesta
me fue de gran ayuda tu aporte, pero quisiera hacer que los graficos que se generan se puedan exportar a excel , como hacer eso, de antemano te doy las gracias por la ayuda que me puedas brindar
Hola
Alguien me puede ayudar.
Tengo un PIE3D, pero lo que me gustaria es que muestre los porcentajes y cuando le pase el mouse muestre la cantidad.
creen que se pueda ???.
como puedo hacer para realizar un grafico en barras parecido StackedColumn3D pero que no tenga escrito en la cabecera fushion chart
Hola. Muy bueno tu tutorial. Tengo algo parecido (ajax con php), pero trato de regresar dos graficos con una titulos en html asi que en php trato de regresarlos concatenados:
echo “Primer grafico”.displaychart1.”Grafico 2.displaychart2;
Las funcioes displaychartx procesan los datos en la variable $strXML y hacen el render del grafico.
El problema es que primero me aparecen los graficos uno seguido de otro y los titulos me aparecen despues. Sabes como podria hacer que me aparezcan en orden con sus titulos (titulo 1, grafico 1, titulo 2, grafico 2). Ya intente alinearlos en una tabla de 1 columna x 4 lineas per ni asi funciona.
Saludos
olvide unas comillas en la linea de php
echo “Primer grafico”.displaychart1.”Grafico 2″.displaychart2;
hola, tengo una pregunta, hay alguna propiedad para hacer que la grafica cresca conforme el numero de campos aumenta ya que al tener un tamaño fijo llega un momento en que los datos ya no se distinguen.
Agradesco su ayuda
Hola te felicito muy interesante, pero tengo un inconveniente, es que debo realizar un modulo estadistico en php y veo todo los codigos y me pregunto por donde empezar? html, dreamweaver..otros?
Te agradezco me puedas ayudar.
Hola a todos.. tengo una pregunta… estaba revisando queria saber como puedo modificar la escala del grafico… seria de gran ayuda…
Primero que todo muchas gracias por la información, esta muy bien explicada y me ha sido de gran ayuda, mi pregunta es ¿como logro los colores en degradado en las graficas 3d ?
Amigo… gracias a gente como tu muchisima gente puede conservar su empleo…..
de verdad con tu ejemplo encontre lo que necesitaba saludos desde colombia