Ver Mensaje Individual
  #3 (permalink)  
Antiguo 02/09/2008, 11:00
rProgged
 
Fecha de Ingreso: agosto-2004
Mensajes: 131
Antigüedad: 20 años, 4 meses
Puntos: 2
Solucionado

Estimados (as),

Al final encontré la solución, se basa en lo siguiente: Como FusionCharts usa una clase javascript para generar sus gráficos, lo que hice fué poner esas funciones en un listener de Ajax y seria todo, arreglado.

Claro que antes tuve que seguir algunos pasos, los explico a continuación. Primero que nada recapitulemos, tenemos una aplicación que genera informes on-line y que está desarrollada en ASP clásico y 3 niveles:

Nivel 1: Página ASP que contiene los filtros para generar los informes, además contiene un iframe que contendrá al nivel 2

Nivel 2: Página que contiene la maqueta de despliegue de informes, contiene un div en donde se desplegara la información recuperada en el nivel 3

Nivel 3: Página ASP que realiza las consultas a la base de datos, genera la tabla de resultados y los xml


Vamos por partes, la interacción de AJAX se genera entre los niveles 2 y 3, en el nivel 2 en el evento onLoad de la pagina llamo a la función AJAX para recuperar los datos, personalmente trabajo con la API Prototype para usar AJAX.

Ahora bien, esta función que obtiene los datos debe contener los listeners para saber cuándo la pagina termina de cargarse, una vez que esto ocurre entonces escribe los graficos. El código seria el siguiente:

Código:
<script language="javascript">

//form = formulario en donde se encuentran los parametros para usar en ASP
//destino = nombre del div en donde quedará el resultado obtenido

function getHTMLContent(form, destino) {
	var parametros = Form.serialize($(form));
	new Ajax.Updater( destino, 'pagina_proceso.asp', {
		method: 'post'
		, parameters: parametros
		, onCreate: function () {
			$(destino).innerHTML = '<span style="font-family:Tahoma;font-size:12px;">Generando informe, por favor espere...</span>';
		}
		, onComplete: function() {
			//Escribe grafico 1
			var chart_grafico1 = new FusionCharts('FusionCharts/FCF_Column3D.swf', 'grafico1', '880', '350');
			var xmlGrafico1 = $('grafico1_XML').value;
			chart_acertividadSucursal.setDataXML(xmlGrafico1);
			chart_acertividadSucursal.render('grafico1_div');

			//Escribe grafico N
			var chart_graficoN = new FusionCharts('FusionCharts/FCF_Column3D.swf', 'graficoN', '880', '350');
			var xmlGraficoN = $('graficoN_XML').value;
			chart_acertividadSucursal.setDataXML(xmlGraficoN);
			chart_acertividadSucursal.render('graficoN_div');
		}
	});
}
</script>

para llamarlo se hace en el body: <body onLoad="getHTMLContent('form_grafico', 'div_resultado');">
Ahora bien, en el nivel 3 al que hemos llamado "pagina_proceso.asp" ( fíjense en el código ) debemos generar los datos para el gráfico (eso lo encuentran en la documentación de FusionCharts) y luego ponerlo en algun objeto html que pueda contener valores, en mi caso lo hice en un Hidden Field, creo que también se podria en un iframe oculto, la verdad no lo probé. Además de dejar el contenido XML en un Hidden Field también es necesario crear el div en donde se escribirá finalmente el gráfico.


Lo anteriormente mencionado tiene relación con la siguiente parte del código escrito anteriormente:

Código:
var xmlGrafico1 = $('grafico1_XML').value;
chart_acertividadSucursal.setDataXML(xmlGrafico1);
chart_acertividadSucursal.render('grafico1_div');
Donde claramente 'grafico1_XML' es el nombre que le dimos al Hidden Field y 'grafico1_div' es el nombre que le dimos al div en donde se escribirá el gráfico.

Y eso seria, mayores comentarios solicitenlos con confianza.

Espero que le sirva a alguien, en mi caso me sirvió harto, si vieran lo lindo que se ven los informes on-line con Callbacks de AJAX y graficos Flash

Saludos,

Rodrigo