(SOLUCIONADO) FusionCharts + AJAX, no funciona =(

rProgged · #1 (**permalink**) 01/09/2008, 15:26

Holas,

Intentaré explicar lo mejor posible mi problema: No me funciona el FusionCharts cuando intento ejecutarlo desde una pagina generada con AJAX

trabajo con ASP Clasico, las página se crea en 3 niveles:

1.- En el nivel 1 tengo los filtros de datos y un iframe

2.- El nivel 2 se encuentra en el iframe, aca tengo una pagina asp que en el body tiene una funcion que llama al contenido de la pagina mediante AJAX

3.- En el nivel 3 tengo la pagina ASP que genera el contenido del nivel 2.

El problema se produce al generar los contenidos del nivel 2 mediante ajax (llamando al nivel 3), uso la API Prototype y la implemento en un codigo como el que sigue:

Código:

function getHTMLContent(form, destino) {
	var parametros = Form.serialize($(form));
	new Ajax.Updater( destino, 'resultados.asp', { method: 'post', parameters: parametros });
}
...
<body onLoad="getHTMLContent('grafico', 'div-contenido')">
...

Todo el cuento que tengo es que en el contenido de la página necesito mostrar unos gráficos pero no funcionan, los gráficos no aparecen sino la palabra "Graph"...

Ahora bien, si muestro el contenido de la pagina directamente en el nivel 2 sin pasar por AJAX entonces los gráficos aparecen sin ningún problema. A mi se me imagina que es un problema de ejecución, por que los gráficos son llamados mediante objetos javascript, entonces pienso que de pronto estoy intentando llamar a un objeto desde otro objeto y quizás eso no se pueda. Pero sólo son conjeturas por que en realidad desconozco el origen del error

De todas formas, FusionCharts genera sus gráficos mediante el siguiente codigo:

Código:

<!-- START Script Block for Chart acertividadJefe -->
	<div id='acertividadJefeDiv' align='center'>
		Chart.
		
	</div>
		
	<script type="text/javascript">	
		//Instantiate the Chart	
		var chart_acertividadJefe = new FusionCharts("FusionCharts/FCF_Column3D.swf", "acertividadJefe", "880", "350");
		
		//Provide entire XML data using dataXML method 
		chart_acertividadJefe.setDataXML("<graph caption='% ACERTIVIDAD POR JEFATURA' xAxisName='Supervisor' yAxisName='Porcentaje Alcanzado' showNames='0' decimalPrecision='0' formatNumberScale='0'><set name='Alguna persona' value='50' color='AFD8F8' /></graph>");
				
		//Finally, render the chart.
		chart_acertividadJefe.render("acertividadJefeDiv");
	</script>	
	<!-- END Script Block for Chart acertividadJefe -->

Como se darán cuenta, este codigo se ejecuta dentro del Ajax.Updater() por lo que creo que por ese lado va el problema.

El otro tema es que el informe es bastante pesado y se debe demorar unos 5-10 segundos en aparecer la información completa, por eso la idea era obtenerlo mediante AJAX para poder mostrar al usuario algo de retroalimentación mientras se termina de generar el informe.

Espero que alguien haya podido realizar algo como esto y pueda ayudarme a solucionar el problema, de todas maneras cualquier comentario o duda sera bienvenido y profundamente agradecido.

Saludos cordiales,

Rodrigo

rProgged · #2 (**permalink**) 02/09/2008, 09:09

alguna idea? :D

rProgged · #3 (**permalink**) 02/09/2008, 11:00

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

nicocl · #4 (**permalink**) 13/12/2010, 08:30

yo lo trabajo con jquery y funciona bien.

<%response.addheader "Cache-Control", "no-store"
response.addheader "Cache-Control", "no-cache"
response.addheader "Pragma", "no-cache"
response.addheader "Cache-Control", "max-age=0, must-revalidate"
response.addheader "Expires", Now-1%>

<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />
<SCRIPT LANGUAGE="Javascript" SRC="../recursos/js/FusionCharts.js"></SCRIPT>

mes = request.Form("mes")
mes2 = request.Form("mes2")
clase = request.Form("clase")
escenario = request.Form("escenary")

strXml2=""
strXml2 = "<chart palette='1' bgcolor='ffffff' showShadow='1' canvasLeftMargin='0' showToolTipShadow='1' plotFillAlpha='100' showPlotBorder='0' plotFillRatio='100' canvasBorderColor='f6f6f6' numDivLines='5' divLineAlpha='1' animation='1' showLabels='1' rotateValues='0' caption='"&porfin&" V/S "&fin&" "&clase&" per Agency, "&strMes& " to "&strMes2&"' yAxisName='"&strMoney&"' numberPrefix='' showValues='1' showConnectors='0' positiveColor='00FF00' formatNumberScale='0' negativeColor='FF0000' xAxisName='"&strPie&"' showSumAtEnd='0' setAdaptiveYMin='1' placeValuesinside='0'>"

strXml2= strXml2 & " <set label='"&porfin&"'value='"&tot1&"' color='0066FF' />"

trXml2= strXml2 & " <set label='"&arr_agency(0,x)&"' value='"&acum&"' link='detalle_gap.asp'/> "

strXml2= strXml2 & " <set label='"&fin&"' isSum='1' color='0066FF' /> "
strXml2= strXml2 & "<styles>"
strXml2= strXml2 & "<definition>"
strXml2= strXml2 & "<style name='ValueText' type='font' font='Calibri' size='12' color='000000' bold='0' />"
strXml2= strXml2 & "</definition>"
strXml2= strXml2 & "<application>"
strXml2= strXml2 & "<apply toObject='DATAVALUES' styles='ValueText'/>"
strXml2= strXml2 & "<apply toObject='DATALABELS' styles='ValueText'/>"
strXml2= strXml2 & "<apply toObject='DATAPLOT' styles='ValueText'/>"
strXml2= strXml2 & "<apply toObject='Caption' styles='ValueText'/>"
strXml2= strXml2 & "<apply toObject='XAXISNAME' styles='ValueText'/>"
strXml2= strXml2 & "</application>"
strXml2= strXml2 & "</styles>"
strXml2= strXml2 & " </chart>"
Call renderChart("../Recursos/Charts/Waterfall2D.swf", "", strXml2, "lineas3", 800, 300, false, false)

le pones un nobre a la pagina y la llamas con ajax.

Yo necesito enviar parametros desde la barra del grafico chart hacia una pagina nueva y poder capturarlos para generar detalle de la info. Si me puedes hechar una mano con eso. Gracias.

nicocl · #5 (**permalink**) 13/12/2010, 08:33

se me fue y lo llamas de esta manera con JQUERY.

$(document).ready(function(){
$("#busca").click(function(evento){
evento.preventDefault();
$("#age").load("nombre_pagina.asp", {param1: item_name("mes").value, param2: item_name("mes2").value, param3: item_name("CLASE").value, param4: item_name("esce").value}),
function(){
$("#load").css("display","none");
});
});
})