Inclusão de opção para abrir gráficos em janelas flutuantes de forma simultânea

Edmar Moretti
1 parent 6e78ae6c
Showing 1 changed file with 69 additions and 8 deletions Show diff stats
ferramentas/graficointerativo/index.js
@@ -189,8 +189,6 @@ i3GEOF.graficointerativo = {
 			};
 			$i("i3GEOgraficointerativoguia4").onclick = function(){
 				i3GEO.guias.mostraGuiaFerramenta("i3GEOgraficointerativoguia4","i3GEOgraficointerativoguia");
-				//var so = new swfobject(i3GEO.configura.locaplic+"/pacotes/openflashchart/open-flash-chart.swf", "i3GEOgraficointerativoGrafico1", "95%", "88%", "9", "#ffffff");
-				//var so = new swfobject();
 				function outputStatus(e) {
 					//i3GEO.janela.tempoMsg("e.success = " + e.success +"\ne.id = "+ e.id +"\ne.ref = "+ e.ref);
 				}
@@ -212,8 +210,14 @@ i3GEOF.graficointerativo = {
 				var t = $i("i3GEOgraficointerativoGrafico");
 				t.style.display = "block";
 				t.style.position = "relative";
-				t.style.top = "-15px";
+				t.style.top = "-5px";
 			};
+			$i("i3GEOgraficointerativoguia5").onclick = function(){
+				i3GEO.guias.mostraGuiaFerramenta("i3GEOgraficointerativoguia5","i3GEOgraficointerativoguia");
+				$i("i3GEOgraficointerativoGrafico").style.display = "none";
+				$i("i3GEOgraficointerativoguia5obj").innerHTML = "<textarea rows='20' cols='52' >"+(i3GEOF.graficointerativo.tabela2csv()).join("\n")+"</textarea>";
+			};
+
 			i3GEOF.graficointerativo.ativaFoco();
 			i3GEOF.graficointerativo.comboTemas();
 			new YAHOO.widget.Button(
@@ -244,10 +248,11 @@ i3GEOF.graficointerativo = {
 		ins = '' +
 		'<div id=i3GEOgraficointerativoguiasYUI class="yui-navset" style="top:0px;cursor:pointer;left:0px;">' +
 		'	<ul class="yui-nav" style="border-width:0pt 0pt 0px;border-color:rgb(240,240,240);border-bottom-color:white;">' +
+		'		<li><a href="#ancora"><em><div id="i3GEOgraficointerativoguia3" style="text-align:center;left:0px;" ><img class="ticPropriedades2" style="height:14px" title="'+$trad("p13")+'" src="'+i3GEO.configura.locaplic+'/imagens/visual/default/branco.gif"></div></em></a></li>' +
 		'		<li><a href="#ancora"><em><div id="i3GEOgraficointerativoguia1" style="text-align:center;left:0px;" >Tipo</div></em></a></li>' +
 		'		<li><a href="#ancora"><em><div id="i3GEOgraficointerativoguia2" style="text-align:center;left:0px;" >Dados</div></em></a></li>' +
-		'		<li><a href="#ancora"><em><div id="i3GEOgraficointerativoguia3" style="text-align:center;left:0px;" >Propriedades</div></em></a></li>' +
 		'		<li><a href="#ancora"><em><div id="i3GEOgraficointerativoguia4" style="text-align:center;left:0px;" >Gr&aacute;fico</div></em></a></li>' +
+		'		<li><a href="#ancora"><em><div id="i3GEOgraficointerativoguia5" style="text-align:center;left:0px;" >CSV</div></em></a></li>' +
 		'	</ul>' +
 		'</div><br>' +
 		'<div class=guiaobj id="i3GEOgraficointerativoguia1obj" style="left:1px;display:none;">' +
@@ -310,9 +315,12 @@ i3GEOF.graficointerativo = {
 		'	<p class=paragrafo ><input style=cursor:pointer type=checkbox onclick="i3GEOF.graficointerativo.ativaNavegacao(this.checked)" /> Atualiza o gr&aacute;fico ao navegar pelo mapa</p>' +
 		'	<p class=paragrafo ><select onchange="i3GEOF.graficointerativo.obterDados()" id="i3GEOgraficointerativoTipoAgregacao" ><option value="soma">Soma</option><option value="media">M&eacute;dia</option></select> Tipo de agrega&ccedil;&atilde;o dos valores do eixo Y</p>' +
 		'</div>'+
-		'<div class=guiaobj id="i3GEOgraficointerativoguia4obj" style="left:1px;display:none;top:-0px">' +
+		'<div class=guiaobj id="i3GEOgraficointerativoguia4obj" style="left:1px;display:none;top:-10px">' +
+		'<a href="#" onclick="i3GEOF.graficointerativo.novaJanela()" >abrir em uma janela separada</a>' +
 		'</div>' +
-		'<div id="i3GEOgraficointerativoGrafico" style="position:relative;top:-10px;display:none"></div>';
+		'<div class=guiaobj id="i3GEOgraficointerativoguia5obj" style="font-size:10px;left:10px;display:none;top:-0px">' +
+		'</div>' +
+		'<div id="i3GEOgraficointerativoGrafico" style="position:relative;top:-5px;display:none"></div>';
 		return ins;
 	},
 	/*
@@ -339,7 +347,7 @@ i3GEOF.graficointerativo = {
 		titulo = "&nbsp;&nbsp;&nbsp;"+$trad("t37b")+" <a class=ajuda_usuario target=_blank href='" + i3GEO.configura.locaplic + "/ajuda_usuario.php?idcategoria=3&idajuda=84' >&nbsp;&nbsp;&nbsp;</a>";
 		janela = i3GEO.janela.cria(
 			"380px",
-			"300px",
+			"310px",
 			"",
 			"",
 			"",
@@ -388,6 +396,37 @@ i3GEOF.graficointerativo = {
 		i3GEO.janela.ULTIMOZINDEX++;
 		i.zIndex = i3GEO.janela.ULTIMOZINDEX;
 	},
+	novaJanela: function(){
+		var janela = "",
+			divid,
+			g = $i("i3GEOgraficointerativoGrafico"),
+			v = g.cloneNode(true),
+			cabecalho = function(){},
+			id = YAHOO.util.Dom.generateId(),
+			minimiza = function(){
+				i3GEO.janela.minimiza(id);
+			},
+			titulo = "&nbsp;&nbsp;&nbsp;"+i3GEOF.graficointerativo.titulo;
+		janela = i3GEO.janela.cria(
+			"380px",
+			"280px",
+			"",
+			"",
+			"",
+			titulo,
+			id,
+			false,
+			"hd",
+			cabecalho,
+			minimiza
+		);
+		divid = janela[2].id;
+		$i(divid).style.marginTop = "10px";
+		v = g.cloneNode(true);
+		v.id = id+"ngrafico";
+		v.style.marginTop = "0px";
+		$i(divid).appendChild(v);
+	},
 	/*
 	Function: comboTemas
@@ -586,6 +625,28 @@ i3GEOF.graficointerativo = {
 		$i("i3GEOgraficointerativoDados").innerHTML = ins.join("");
 	},
 	/*
+	Function: tabela2csv
+
+	Obt&eacute;m os dados da tabela em CSV
+	*/
+	tabela2csv: function(){
+		var inputs = $i("i3GEOgraficointerativoDados").getElementsByTagName("input"),
+			ninputs = inputs.length,
+			i,
+			legendaX = "",
+			legendaY = "",
+			csv = [];
+		if($i("i3GEOgraficointerativoComboXid"))
+		{legendaX = $i("i3GEOgraficointerativoComboXid").value;}
+		if($i("i3GEOgraficointerativoComboYid"))
+		{legendaY = $i("i3GEOgraficointerativoComboYid").value;}
+		csv.push(legendaX+";"+legendaY);
+		for(i=0;i<ninputs;i = i + 3){
+			csv.push(inputs[i].value+";"+inputs[i+1].value * 1);
+		}
+		return csv;
+	},
+	/*
 	Function: tabela2dados
 	Obt&eacute;m os dados da tabela para compor o gr&aacute;fico
@@ -916,7 +977,7 @@ i3GEOF.graficointerativo = {
 			}
 			tabela.innerHTML = ins;
 		}
-		catch(e){if(typeof(console) !== 'undefined'){console.error(e);}}
+		catch(e){}
 	},
 	/*
 	Function: ativaNavegacao
	@@ -189,8 +189,6 @@ i3GEOF.graficointerativo = {		@@ -189,8 +189,6 @@ i3GEOF.graficointerativo = {
189	};	189	};
190	$i("i3GEOgraficointerativoguia4").onclick = function(){	190	$i("i3GEOgraficointerativoguia4").onclick = function(){
191	i3GEO.guias.mostraGuiaFerramenta("i3GEOgraficointerativoguia4","i3GEOgraficointerativoguia");	191	i3GEO.guias.mostraGuiaFerramenta("i3GEOgraficointerativoguia4","i3GEOgraficointerativoguia");
192	- //var so = new swfobject(i3GEO.configura.locaplic+"/pacotes/openflashchart/open-flash-chart.swf", "i3GEOgraficointerativoGrafico1", "95%", "88%", "9", "#ffffff");
193	- //var so = new swfobject();
194	function outputStatus(e) {	192	function outputStatus(e) {
195	//i3GEO.janela.tempoMsg("e.success = " + e.success +"\ne.id = "+ e.id +"\ne.ref = "+ e.ref);	193	//i3GEO.janela.tempoMsg("e.success = " + e.success +"\ne.id = "+ e.id +"\ne.ref = "+ e.ref);
196	}	194	}
	@@ -212,8 +210,14 @@ i3GEOF.graficointerativo = {		@@ -212,8 +210,14 @@ i3GEOF.graficointerativo = {
212	var t = $i("i3GEOgraficointerativoGrafico");	210	var t = $i("i3GEOgraficointerativoGrafico");
213	t.style.display = "block";	211	t.style.display = "block";
214	t.style.position = "relative";	212	t.style.position = "relative";
215	- t.style.top = "-15px";	213	+ t.style.top = "-5px";
216	};	214	};
		215	+ $i("i3GEOgraficointerativoguia5").onclick = function(){
		216	+ i3GEO.guias.mostraGuiaFerramenta("i3GEOgraficointerativoguia5","i3GEOgraficointerativoguia");
		217	+ $i("i3GEOgraficointerativoGrafico").style.display = "none";
		218	+ $i("i3GEOgraficointerativoguia5obj").innerHTML = "<textarea rows='20' cols='52' >"+(i3GEOF.graficointerativo.tabela2csv()).join("\n")+"</textarea>";
		219	+ };
		220	+
217	i3GEOF.graficointerativo.ativaFoco();	221	i3GEOF.graficointerativo.ativaFoco();
218	i3GEOF.graficointerativo.comboTemas();	222	i3GEOF.graficointerativo.comboTemas();
219	new YAHOO.widget.Button(	223	new YAHOO.widget.Button(
	@@ -244,10 +248,11 @@ i3GEOF.graficointerativo = {		@@ -244,10 +248,11 @@ i3GEOF.graficointerativo = {
244	ins = '' +	248	ins = '' +
245	'<div id=i3GEOgraficointerativoguiasYUI class="yui-navset" style="top:0px;cursor:pointer;left:0px;">' +	249	'<div id=i3GEOgraficointerativoguiasYUI class="yui-navset" style="top:0px;cursor:pointer;left:0px;">' +
246	' <ul class="yui-nav" style="border-width:0pt 0pt 0px;border-color:rgb(240,240,240);border-bottom-color:white;">' +	250	' <ul class="yui-nav" style="border-width:0pt 0pt 0px;border-color:rgb(240,240,240);border-bottom-color:white;">' +
		251	+ ' <li><a href="#ancora"><em><div id="i3GEOgraficointerativoguia3" style="text-align:center;left:0px;" ><img class="ticPropriedades2" style="height:14px" title="'+$trad("p13")+'" src="'+i3GEO.configura.locaplic+'/imagens/visual/default/branco.gif"></div></em></a></li>' +
247	' <li><a href="#ancora"><em><div id="i3GEOgraficointerativoguia1" style="text-align:center;left:0px;" >Tipo</div></em></a></li>' +	252	' <li><a href="#ancora"><em><div id="i3GEOgraficointerativoguia1" style="text-align:center;left:0px;" >Tipo</div></em></a></li>' +
248	' <li><a href="#ancora"><em><div id="i3GEOgraficointerativoguia2" style="text-align:center;left:0px;" >Dados</div></em></a></li>' +	253	' <li><a href="#ancora"><em><div id="i3GEOgraficointerativoguia2" style="text-align:center;left:0px;" >Dados</div></em></a></li>' +
249	- ' <li><a href="#ancora"><em><div id="i3GEOgraficointerativoguia3" style="text-align:center;left:0px;" >Propriedades</div></em></a></li>' +
250	' <li><a href="#ancora"><em><div id="i3GEOgraficointerativoguia4" style="text-align:center;left:0px;" >Gráfico</div></em></a></li>' +	254	' <li><a href="#ancora"><em><div id="i3GEOgraficointerativoguia4" style="text-align:center;left:0px;" >Gráfico</div></em></a></li>' +
		255	+ ' <li><a href="#ancora"><em><div id="i3GEOgraficointerativoguia5" style="text-align:center;left:0px;" >CSV</div></em></a></li>' +
251	' </ul>' +	256	' </ul>' +
252	'</div><br>' +	257	'</div><br>' +
253	'<div class=guiaobj id="i3GEOgraficointerativoguia1obj" style="left:1px;display:none;">' +	258	'<div class=guiaobj id="i3GEOgraficointerativoguia1obj" style="left:1px;display:none;">' +
	@@ -310,9 +315,12 @@ i3GEOF.graficointerativo = {		@@ -310,9 +315,12 @@ i3GEOF.graficointerativo = {
310	' <p class=paragrafo ><input style=cursor:pointer type=checkbox onclick="i3GEOF.graficointerativo.ativaNavegacao(this.checked)" /> Atualiza o gráfico ao navegar pelo mapa</p>' +	315	' <p class=paragrafo ><input style=cursor:pointer type=checkbox onclick="i3GEOF.graficointerativo.ativaNavegacao(this.checked)" /> Atualiza o gráfico ao navegar pelo mapa</p>' +
311	' <p class=paragrafo ><select onchange="i3GEOF.graficointerativo.obterDados()" id="i3GEOgraficointerativoTipoAgregacao" ><option value="soma">Soma</option><option value="media">Média</option></select> Tipo de agregação dos valores do eixo Y</p>' +	316	' <p class=paragrafo ><select onchange="i3GEOF.graficointerativo.obterDados()" id="i3GEOgraficointerativoTipoAgregacao" ><option value="soma">Soma</option><option value="media">Média</option></select> Tipo de agregação dos valores do eixo Y</p>' +
312	'</div>'+	317	'</div>'+
313	- '<div class=guiaobj id="i3GEOgraficointerativoguia4obj" style="left:1px;display:none;top:-0px">' +	318	+ '<div class=guiaobj id="i3GEOgraficointerativoguia4obj" style="left:1px;display:none;top:-10px">' +
		319	+ '<a href="#" onclick="i3GEOF.graficointerativo.novaJanela()" >abrir em uma janela separada</a>' +
314	'</div>' +	320	'</div>' +
315	- '<div id="i3GEOgraficointerativoGrafico" style="position:relative;top:-10px;display:none"></div>';	321	+ '<div class=guiaobj id="i3GEOgraficointerativoguia5obj" style="font-size:10px;left:10px;display:none;top:-0px">' +
		322	+ '</div>' +
		323	+ '<div id="i3GEOgraficointerativoGrafico" style="position:relative;top:-5px;display:none"></div>';
316	return ins;	324	return ins;
317	},	325	},
318	/*	326	/*
	@@ -339,7 +347,7 @@ i3GEOF.graficointerativo = {		@@ -339,7 +347,7 @@ i3GEOF.graficointerativo = {
339	titulo = "   "+$trad("t37b")+" <a class=ajuda_usuario target=_blank href='" + i3GEO.configura.locaplic + "/ajuda_usuario.php?idcategoria=3&idajuda=84' >   </a>";	347	titulo = "   "+$trad("t37b")+" <a class=ajuda_usuario target=_blank href='" + i3GEO.configura.locaplic + "/ajuda_usuario.php?idcategoria=3&idajuda=84' >   </a>";
340	janela = i3GEO.janela.cria(	348	janela = i3GEO.janela.cria(
341	"380px",	349	"380px",
342	- "300px",	350	+ "310px",
343	"",	351	"",
344	"",	352	"",
345	"",	353	"",
	@@ -388,6 +396,37 @@ i3GEOF.graficointerativo = {		@@ -388,6 +396,37 @@ i3GEOF.graficointerativo = {
388	i3GEO.janela.ULTIMOZINDEX++;	396	i3GEO.janela.ULTIMOZINDEX++;
389	i.zIndex = i3GEO.janela.ULTIMOZINDEX;	397	i.zIndex = i3GEO.janela.ULTIMOZINDEX;
390	},	398	},
		399	+ novaJanela: function(){
		400	+ var janela = "",
		401	+ divid,
		402	+ g = $i("i3GEOgraficointerativoGrafico"),
		403	+ v = g.cloneNode(true),
		404	+ cabecalho = function(){},
		405	+ id = YAHOO.util.Dom.generateId(),
		406	+ minimiza = function(){
		407	+ i3GEO.janela.minimiza(id);
		408	+ },
		409	+ titulo = "   "+i3GEOF.graficointerativo.titulo;
		410	+ janela = i3GEO.janela.cria(
		411	+ "380px",
		412	+ "280px",
		413	+ "",
		414	+ "",
		415	+ "",
		416	+ titulo,
		417	+ id,
		418	+ false,
		419	+ "hd",
		420	+ cabecalho,
		421	+ minimiza
		422	+ );
		423	+ divid = janela[2].id;
		424	+ $i(divid).style.marginTop = "10px";
		425	+ v = g.cloneNode(true);
		426	+ v.id = id+"ngrafico";
		427	+ v.style.marginTop = "0px";
		428	+ $i(divid).appendChild(v);
		429	+ },
391	/*	430	/*
392	Function: comboTemas	431	Function: comboTemas
393		432
	@@ -586,6 +625,28 @@ i3GEOF.graficointerativo = {		@@ -586,6 +625,28 @@ i3GEOF.graficointerativo = {
586	$i("i3GEOgraficointerativoDados").innerHTML = ins.join("");	625	$i("i3GEOgraficointerativoDados").innerHTML = ins.join("");
587	},	626	},
588	/*	627	/*
		628	+ Function: tabela2csv
		629	+
		630	+ Obtém os dados da tabela em CSV
		631	+ */
		632	+ tabela2csv: function(){
		633	+ var inputs = $i("i3GEOgraficointerativoDados").getElementsByTagName("input"),
		634	+ ninputs = inputs.length,
		635	+ i,
		636	+ legendaX = "",
		637	+ legendaY = "",
		638	+ csv = [];
		639	+ if($i("i3GEOgraficointerativoComboXid"))
		640	+ {legendaX = $i("i3GEOgraficointerativoComboXid").value;}
		641	+ if($i("i3GEOgraficointerativoComboYid"))
		642	+ {legendaY = $i("i3GEOgraficointerativoComboYid").value;}
		643	+ csv.push(legendaX+";"+legendaY);
		644	+ for(i=0;i<ninputs;i = i + 3){
		645	+ csv.push(inputs[i].value+";"+inputs[i+1].value * 1);
		646	+ }
		647	+ return csv;
		648	+ },
		649	+ /*
589	Function: tabela2dados	650	Function: tabela2dados
590		651
591	Obtém os dados da tabela para compor o gráfico	652	Obtém os dados da tabela para compor o gráfico
	@@ -916,7 +977,7 @@ i3GEOF.graficointerativo = {		@@ -916,7 +977,7 @@ i3GEOF.graficointerativo = {
916	}	977	}
917	tabela.innerHTML = ins;	978	tabela.innerHTML = ins;
918	}	979	}
919	- catch(e){if(typeof(console) !== 'undefined'){console.error(e);}}	980	+ catch(e){}
920	},	981	},
921	/*	982	/*
922	Function: ativaNavegacao	983	Function: ativaNavegacao