Download as
Browse Code »

Commit cef147ce72cd071a2b5918cf9390e9d518fcca46

Authored by Edmar Moretti
1 parent eb576060
Exists in master and in 7 other branches composer, doc-root, docker, guia, licenca, readme, unmaintened

--no commit message

Showing 1 changed file with 155 additions and 37 deletions   Show diff stats
ferramentas/graficointerativo/index.js.php
  Diff comments   View file @cef147c
... ... @@ -38,7 +38,7 @@ i3GEOF.graficointerativo = {
38 38 */
39 39 aguarde: "",
40 40 /*
41   - Variavel: tipo
  41 + Propriedade: tipo
42 42  
43 43 Tipo de gráfico escolhido pelo usuário.
44 44 */
... ... @@ -48,11 +48,13 @@ i3GEOF.graficointerativo = {
48 48  
49 49 Inicia a ferramenta. É chamado por criaJanelaFlutuante
50 50  
51   - Parametro:
  51 + Parametros:
52 52  
53 53 iddiv {String} - id do div que receberá o conteudo HTML da ferramenta
  54 +
  55 + dados {JSON} - dados para o gráfico (opcional)
54 56 */
55   - inicia: function(iddiv){
  57 + inicia: function(iddiv,dados){
56 58 try{
57 59 $i(iddiv).innerHTML += i3GEOF.graficointerativo.html();
58 60 i3GEO.guias.mostraGuiaFerramenta("i3GEOgraficointerativoguia1","i3GEOgraficointerativoguia");
... ... @@ -64,6 +66,9 @@ i3GEOF.graficointerativo = {
64 66 i3GEO.guias.mostraGuiaFerramenta("i3GEOgraficointerativoguia2","i3GEOgraficointerativoguia");
65 67 i3GEOF.graficointerativo.configuraDados();
66 68 };
  69 + $i("i3GEOgraficointerativoguia3").onclick = function(){
  70 + i3GEO.guias.mostraGuiaFerramenta("i3GEOgraficointerativoguia3","i3GEOgraficointerativoguia");
  71 + };
67 72 $i("i3GEOgraficointerativoguia4").onclick = function(){
68 73 i3GEO.guias.mostraGuiaFerramenta("i3GEOgraficointerativoguia4","i3GEOgraficointerativoguia");
69 74 var so = new SWFObject(i3GEO.configura.locaplic+"/pacotes/openflashchart/open-flash-chart.swf", "i3GEOgraficointerativoGrafico1", "95%", "88%", "9", "#ffffff");
... ... @@ -96,7 +101,13 @@ i3GEOF.graficointerativo = {
96 101 new YAHOO.widget.Button(
97 102 "i3GEOgraficointerativobotao1",
98 103 {onclick:{fn: i3GEOF.graficointerativo.obterDados}}
99   - );
  104 + );
  105 + if(arguments.length === 2){
  106 + //i3GEOF.graficointerativo.tipo = "pizza2d";
  107 + //var retorno = {"attributes":{"id":""},"data":{"dados":["n;x","'4';3839572","'8';81710320","'7';24631314","'2';10967753","'1';24496400","'3';18752482","'5';13574480","'6';216507515"]}};
  108 + i3GEOF.graficointerativo.montaTabelaDados(dados);
  109 + $i("i3GEOgraficointerativoguia4").onclick.call();
  110 + }
100 111 }
101 112 catch(erro){alert(erro);}
102 113 },
... ... @@ -159,10 +170,13 @@ i3GEOF.graficointerativo = {
159 170 ' </div>' +
160 171 ' <p class=paragrafo >Excluir o seguinte valor: ' +
161 172 $inputText("","","i3GEOgraficointerativoexcluir","",3,"") +
  173 + ' <p class=paragrafo ><input type=checkbox style=cursor:pointer id=i3GEOgraficointerativoCoresA /> gera cores aleatórias</p>' +
162 174 ' <p class=paragrafo ><input id=i3GEOgraficointerativobotao1 type="buttom" value="Obter dados" /></p>'+
163 175 ' <div id=i3GEOgraficointerativoDados ></div>'+
164 176 '</div>' +
165 177 '<div class=guiaobj id="i3GEOgraficointerativoguia3obj" style="left:1px;display:none;top:-5px">' +
  178 + ' <p class=paragrafo ><input style=cursor:pointer type=checkbox id=i3GEOgraficointerativoAcumula /> Utiliza valores acumulados</p>' +
  179 + ' <p class=paragrafo ><input style=cursor:pointer type=checkbox id=i3GEOgraficointerativoRelativa /> Utiliza valores relativos (%)</p>' +
166 180 '</div>'+
167 181 '<div class=guiaobj id="i3GEOgraficointerativoguia4obj" style="left:1px;display:none;top:-5px">' +
168 182 ' <div id="i3GEOgraficointerativoGrafico"></div>' +
... ... @@ -173,8 +187,12 @@ i3GEOF.graficointerativo = {
173 187 Function: criaJanelaFlutuante
174 188  
175 189 Cria a janela flutuante para controle da ferramenta.
  190 +
  191 + Parametro
  192 +
  193 + dados {JSON} - dados para o gráfico
176 194 */
177   - criaJanelaFlutuante: function(){
  195 + criaJanelaFlutuante: function(dados){
178 196 var minimiza,cabecalho,janela,divid,temp,titulo;
179 197 //cria a janela flutuante
180 198 cabecalho = function(){
... ... @@ -200,7 +218,10 @@ i3GEOF.graficointerativo = {
200 218 divid = janela[2].id;
201 219 i3GEOF.graficointerativo.aguarde = $i("i3GEOF.graficointerativo_imagemCabecalho").style;
202 220 $i("i3GEOF.graficointerativo_corpo").style.backgroundColor = "white";
203   - i3GEOF.graficointerativo.inicia(divid);
  221 + if(arguments.length === 0)
  222 + {i3GEOF.graficointerativo.inicia(divid);}
  223 + else
  224 + {i3GEOF.graficointerativo.inicia(divid,dados);}
204 225 },
205 226 /*
206 227 Function: ativaFoco
... ... @@ -282,7 +303,6 @@ i3GEOF.graficointerativo = {
282 303 obterDados: function(){
283 304 if(i3GEOF.graficointerativo.aguarde.visibility === "visible")
284 305 {return;}
285   -
286 306 var tema = $i("i3GEOgraficointerativoComboTemasId").value,
287 307 x = $i("i3GEOgraficointerativoComboXid").value,
288 308 y = $i("i3GEOgraficointerativoComboYid").value,
... ... @@ -301,50 +321,78 @@ i3GEOF.graficointerativo = {
301 321 {alert("Escolha um item para Y");return;}
302 322 monta = function(retorno){
303 323 i3GEOF.graficointerativo.aguarde.visibility = "hidden";
304   - var dados = retorno.data.dados,
305   - n = dados.length,
306   - v,
307   - ins = [],
308   - i,
309   - id;
310   - ins.push("<p class=paragrafo >Tabela de dados para o gráfico. Os valores podem ser editados</p><table class=lista4 id=i3GEOgraficointerativotabeladados ><tr><td></td><td style=background-color:yellow >nome</td><td style=background-color:yellow >valor</td><td style=background-color:yellow >cor</td><td></td></tr>");
311   - for (i=1;i<n; i++){
312   - v = dados[i].split(";");
313   - v[0] = v[0].replace("'","");
314   - v[0] = v[0].replace("'","");
315   - //ins += v[0]+" "+v[1];
316   - id = "i3GEOgraficointerativoDados"+i; //layer+indice da classe
317   - ins.push("<tr><td>");
318   - ins.push("<img style='cursor:pointer' title='clique para excluir' onclick='i3GEOF.graficointerativo.excluilinha(this)' src='"+i3GEO.configura.locaplic+"/imagens/x.gif' title='excluir' /></td>");
319   - ins.push("</td><td>");
320   - ins.push($inputText("","",id+"_nome","digite o novo nome",20,v[0],"nome"));
321   - ins.push("</td><td>");
322   - ins.push($inputText("","",id+"_valor","digite o novo valor",12,v[1],"valor"));
323   - ins.push("</td><td>");
324   - ins.push($inputText("","",id+"_cor","",12,"#d01f3c","cor"));
325   - ins.push("</td><td>");
326   - ins.push("<img alt='aquarela.gif' style=cursor:pointer src='"+i3GEO.configura.locaplic+"/imagens/aquarela.gif' onclick='i3GEOF.graficointerativo.corj(\""+id+"_cor\")' />");
327   - ins.push("</td></tr>");
328   - }
329   - ins.push("</table><br>");
330   - $i("i3GEOgraficointerativoDados").innerHTML = ins.join("");
  324 + i3GEOF.graficointerativo.montaTabelaDados(retorno);
  325 + $i("i3GEOgraficointerativoguia4").onclick.call();
331 326 };
332 327 i3GEOF.graficointerativo.aguarde.visibility = "visible";
333 328 cp.set_response_type("JSON");
334 329 cp.call(p+"&tipo="+tipo,"graficoSelecao",monta);
335 330 },
336 331 /*
  332 + Function: montaTabelaDados
  333 +
  334 + Monta a tabela com os dados que serão utilizados no gráfico
  335 +
  336 + Parametro:
  337 +
  338 + retorno {JSON} - dados no formato JSON
  339 + */
  340 + montaTabelaDados: function(retorno){
  341 + var dados = retorno.data.dados,
  342 + n = dados.length,
  343 + v,
  344 + ins = [],
  345 + i,
  346 + id,
  347 + cor = "#d01f3c";
  348 + ins.push("<p class=paragrafo >Tabela de dados para o gráfico. Os valores podem ser editados</p><table class=lista4 id=i3GEOgraficointerativotabeladados ><tr><td></td>");
  349 + ins.push("<td style=background-color:yellow >&nbsp;<img style=cursor:pointer onclick='i3GEOF.graficointerativo.ordenaColuna(this,1)' src='"+i3GEO.configura.locaplic+"/imagens/ordena1.gif' title='ordena' /> nome</td>");
  350 + ins.push("<td style=background-color:yellow >&nbsp;<img style=cursor:pointer onclick='i3GEOF.graficointerativo.ordenaColuna(this,2)' src='"+i3GEO.configura.locaplic+"/imagens/ordena1.gif' title='ordena' /> valor</td>");
  351 + ins.push("<td style=background-color:yellow >cor</td><td></td></tr>");
  352 + for (i=1;i<n; i++){
  353 + v = dados[i].split(";");
  354 + v[0] = v[0].replace("'","");
  355 + v[0] = v[0].replace("'","");
  356 + //ins += v[0]+" "+v[1];
  357 + id = "i3GEOgraficointerativoDados"+i; //layer+indice da classe
  358 + ins.push("<tr><td>");
  359 + ins.push("<img style='cursor:pointer' title='clique para excluir' onclick='i3GEOF.graficointerativo.excluilinha(this)' src='"+i3GEO.configura.locaplic+"/imagens/x.gif' title='excluir' /></td>");
  360 + ins.push("</td><td>");
  361 + ins.push($inputText("","",id+"_nome","digite o novo nome",20,v[0],"nome"));
  362 + ins.push("</td><td>");
  363 + ins.push($inputText("","",id+"_valor","digite o novo valor",12,v[1],"valor"));
  364 + ins.push("</td><td>");
  365 + if($i("i3GEOgraficointerativoCoresA").checked){
  366 + cor = i3GEO.util.rgb2hex(i3GEO.util.randomRGB());
  367 + }
  368 + //verifica se no objeto com os dados existe um terceiro valor com as cores
  369 + if(v[2]){
  370 + cor = v[2];
  371 + }
  372 + ins.push($inputText("","",id+"_cor","",12,cor,"cor"));
  373 + ins.push("</td><td>");
  374 + ins.push("<img alt='aquarela.gif' style=cursor:pointer src='"+i3GEO.configura.locaplic+"/imagens/aquarela.gif' onclick='i3GEOF.graficointerativo.corj(\""+id+"_cor\")' />");
  375 + ins.push("</td></tr>");
  376 + }
  377 + ins.push("</table><br>");
  378 + $i("i3GEOgraficointerativoDados").innerHTML = ins.join("");
  379 + },
  380 + /*
337 381 Function: tabela2dados
338 382  
339 383 Obtém os dados da tabela para compor o gráfico
340 384 */
341 385 tabela2dados: function(){
342   - var temp,
  386 + try{
  387 + var temp = 0,
  388 + ultimo = 0,
343 389 inputs = $i("i3GEOgraficointerativoDados").getElementsByTagName("input"),
344 390 ninputs = inputs.length,
  391 + n,
345 392 i,
346 393 parametros,
347 394 valores = [],
  395 + acumulado = [],
348 396 nomes = [],
349 397 cores = [],
350 398 indice = $i("i3GEOgraficointerativoComboTemasId").options.selectedIndex,
... ... @@ -364,14 +412,20 @@ i3GEOF.graficointerativo = {
364 412 corGrid = "#D7E4A3",
365 413 divisoesY = 10,
366 414 rotacaoX = 270,
367   - legendaX = $i("i3GEOgraficointerativoComboXid").value,
368   - legendaY = $i("i3GEOgraficointerativoComboYid").value,
  415 + legendaX = "",
  416 + legendaY = "",
369 417 fill = "#C4B86A";
  418 + if($i("i3GEOgraficointerativoComboXid"))
  419 + {legendaX = $i("i3GEOgraficointerativoComboXid").value;}
  420 + if($i("i3GEOgraficointerativoComboYid"))
  421 + {legendaY = $i("i3GEOgraficointerativoComboYid").value;}
370 422 for(i=0;i<ninputs;i = i + 3){
371 423 nomes.push(inputs[i].value+" ");
372 424 cores.push(inputs[i+2].value);
373 425 temp = inputs[i+1].value * 1;
374 426 valores.push(temp);
  427 + acumulado.push(ultimo + temp);
  428 + ultimo = ultimo + temp;
375 429 soma += temp;
376 430 if(temp > maior)
377 431 {maior = temp;}
... ... @@ -379,6 +433,18 @@ i3GEOF.graficointerativo = {
379 433 {menor = temp;}
380 434 par.push({"value":inputs[i+1].value * 1,"label":inputs[i].value+" "});
381 435 }
  436 + if($i("i3GEOgraficointerativoAcumula").checked){
  437 + valores = acumulado;
  438 + maior = soma;
  439 + }
  440 + if($i("i3GEOgraficointerativoRelativa").checked){
  441 + n = valores.length;
  442 + for(i=0;i<n;i++){
  443 + valores[i] = (valores[i] * 100) / soma;
  444 + }
  445 + maior = 100;
  446 + menor = 0;
  447 + }
382 448 if(i3GEOF.graficointerativo.tipo === "pizza2d"){
383 449 parametros = {
384 450 "elements":[{
... ... @@ -452,6 +518,7 @@ i3GEOF.graficointerativo = {
452 518 };
453 519 }
454 520 return JSON1.stringify(parametros);
  521 + }catch(erro){alert(erro);}
455 522 },
456 523 /*
457 524 Function: excluilinha
... ... @@ -472,6 +539,57 @@ i3GEOF.graficointerativo = {
472 539 */
473 540 corj: function(obj)
474 541 {i3GEO.util.abreCor("",obj,"hex");},
  542 + /*
  543 + Function: ordenaColuna
  544 +
  545 + Ordena uma coluna da tabela
  546 + */
  547 + ordenaColuna: function(coluna,cid){
  548 + try{
  549 + var tabela = $i("i3GEOgraficointerativoDados").getElementsByTagName("table")[0],
  550 + trs = tabela.getElementsByTagName("tr"),
  551 + ntrs = trs.length,
  552 + cabecalhotr = trs[0],
  553 + psort = [],
  554 + t,
  555 + psortfim,
  556 + npsortfim,
  557 + ins,
  558 + p,
  559 + e,
  560 + temp,
  561 + chaves = [],
  562 + numero = false;
  563 + function sortNumber(a,b)
  564 + {return a - b;}
  565 + for (t=1;t<ntrs;t++)
  566 + {
  567 + temp = trs[t].childNodes[cid];
  568 + if (temp){
  569 + psort.push(temp.childNodes[0].value);
  570 + chaves[temp.childNodes[0].value] = t;
  571 + if(temp.childNodes[0].value *1)
  572 + {numero = true;}
  573 + }
  574 + }
  575 + //recosntroi a tabela
  576 + if(numero)
  577 + {psortfim = psort.sort(sortNumber);}
  578 + else
  579 + {psortfim = psort.sort();}
  580 + ins = "<tr>" + trs[0].innerHTML + "</tr>";;
  581 + npsortfim = psortfim.length;
  582 + for (p=0;p<npsortfim;p++)
  583 + {
  584 + e = chaves[psortfim[p]];
  585 + //e = psortfim[p].split("+")[1] * 1;
  586 + if (trs[e] !== undefined)
  587 + {ins += "<tr>" + trs[e].innerHTML + "</tr>";}
  588 + }
  589 + tabela.innerHTML = ins;
  590 + }
  591 + catch(e){}
  592 + }
475 593 };
476 594 //pacotes/openflahchart/json2.js
477 595 if (!this.JSON1) {
... ...